/* ==========================================================================
   showcase.css — 「蒼夜シアター」グループD: videos.html / about.html
   style.css(トークン・コンポーネント)+ theater.css の差分のみ。
   色は :root トークンのみ使用。氷青はホバー/アクティブ/再生系に限定。
   ========================================================================== */

/* ---------- 共通: セクションのリズムと章替わり ---------- */

.sec-feature, .sec-playlist,
.sec-history, .sec-strengths, .sec-clients, .sec-company,
.sec-cta { padding-block: var(--space-7); }

.sec-feature, .sec-strengths, .sec-company { background: var(--c-black); }

/* 写真クレジット行(index の reel__credit と同じ作法) */
.screen-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4em 1.4em;
  margin-top: var(--space-2);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--c-text-faint);
}

/* contact への誘導帯(.contact-cta は style.css を再利用) */
.sec-cta { border-top: 1px solid var(--c-line); }

.cta-band { text-align: center; }

.cta-band__no {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.cta-band__lead {
  max-width: 34em;
  margin: var(--space-3) auto 0;
  font-size: 14.5px;
  color: var(--c-text-dim);
}

.cta-band .contact-cta { margin-top: var(--space-4); }

/* ==========================================================================
   videos.html — 上映室
   ========================================================================== */

.screening-label {
  margin-bottom: var(--space-3);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--c-text-dim);
}

/* ---------- フィーチャー枠(16:9 スクリーン) ---------- */

.feature-screen { position: relative; display: block; }

.feature-screen__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden; /* data-parallax 契約: scale(1.12) をクリップ */
  background: var(--c-black);
  border: 1px solid var(--c-line);
}

.feature-screen__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%; /* 縦位置SL: 車体〜ヘッドマークの帯を残す */
}

/* 写真上のテキストはスクリム(黒グラデのみ)でコントラスト担保 */
.feature-screen__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .74), transparent 46%),
    linear-gradient(to bottom, rgba(0, 0, 0, .22), transparent 20%);
}

/* 再生ボタン: 氷青の許可領域(index .videos-card__play と同じ語彙) */
.feature-screen__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.feature-screen__play svg {
  display: block;
  width: clamp(60px, 7vw, 84px);
  height: clamp(60px, 7vw, 84px);
  padding: clamp(17px, 2vw, 24px);
  box-sizing: border-box;
  fill: var(--c-ice);
  border: 1px solid var(--c-ice);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  transition: background .3s ease, transform .3s ease;
}

.feature-screen:hover .feature-screen__play svg,
.feature-screen:focus-visible .feature-screen__play svg {
  background: rgba(135, 184, 214, .18);
  transform: scale(1.06);
}

.feature-screen__meta {
  position: absolute;
  z-index: 2;
  left: clamp(1.2rem, 3vw, 2.5rem);
  right: clamp(1.2rem, 3vw, 2.5rem);
  bottom: clamp(1.1rem, 2.6vw, 2rem);
  display: grid;
  gap: .35em;
}

.feature-screen__label {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--c-text-dim);
}

.feature-screen__title {
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.5;
}

.feature-screen:hover .feature-screen__title {
  text-decoration: underline;
  text-decoration-color: var(--c-ice);
  text-decoration-thickness: 1px;
  text-underline-offset: .4em;
}

.feature-screen__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em 1.4em;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-text-dim);
}

.feature-screen__sub .en {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--c-text-faint);
}

/* ---------- プレイリスト(.videos-grid / .videos-card を再利用) ---------- */

.playlist-grid { row-gap: clamp(2.2rem, 4.5vw, 3.4rem); }

.videos-card__client {
  display: flex;
  align-items: baseline;
  gap: .9em;
  margin-top: .5em;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--c-text-dim);
}

.videos-card__client .en {
  font-size: 9px;
  letter-spacing: .26em;
  color: var(--c-text-faint);
}

/* 16:9クロップ位置の調整(被写体を帯に残す) */
.playlist-grid .videos-card:nth-child(3) .videos-card__thumb img { object-position: 50% 38%; } /* 黒煙 */
.playlist-grid .videos-card:nth-child(4) .videos-card__thumb img { object-position: 50% 42%; } /* オオワシ */
.playlist-grid .videos-card:nth-child(5) .videos-card__thumb img { object-position: 50% 55%; } /* タンチョウ */

/* ==========================================================================
   シアターライトボックス(.theater-modal — theater.js の写真用 lb とは独立)
   閉じるボタンは theater.css の .lb__btn / .lb__close / .lb__glyph を再利用
   ========================================================================== */

html.tm-open { overflow: hidden; }

.theater-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0, 0, 0, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

html.tm-open .theater-modal {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease;
}

.theater-modal__stage {
  width: min(1080px, 100%);
  display: grid;
  gap: var(--space-3);
}

.theater-modal__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--c-black);
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}

html.tm-open .theater-modal__screen {
  animation: lb-in .45s cubic-bezier(.22, 1, .36, 1); /* theater.css の keyframes を再利用 */
}

.theater-modal__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26; /* 消灯した場内に浮かぶスクリーン */
}

.theater-modal__note {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  text-align: center;
}

.theater-modal__note-main {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-text);
}

.theater-modal__note-sub {
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

/* 再生グリフ(再生系=氷青の許可領域) */
.theater-modal__beam {
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid var(--c-ice);
  border-radius: 50%;
}

.theater-modal__beam::before {
  content: "";
  position: absolute;
  left: 53%;
  top: 50%;
  width: 15px;
  height: 17px;
  translate: -50% -50%;
  background: var(--c-ice);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.theater-modal__beam::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--c-ice);
  border-radius: 50%;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .theater-modal__beam::after { animation: beamPulse 2.4s ease-out infinite; }

  @keyframes beamPulse {
    0%   { transform: scale(1); opacity: .5; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
  }
}

.theater-modal__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .4em 1.5em;
}

.theater-modal__title { font-size: 15.5px; font-weight: 500; }

.theater-modal__sub {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--c-text-dim);
}

.theater-modal__sub .en {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--c-text-faint);
}

/* ==========================================================================
   about.html — 会社案内
   ========================================================================== */

/* ポートレートの parallax 枠(figcaption は枠外に残す) */
.about-portrait__frame { overflow: hidden; background: var(--c-black); }

.about-lead {
  margin-top: var(--space-4);
  max-width: 36em;
  font-size: 14.5px;
  color: var(--c-text-dim);
}

/* ---------- 沿革タイムライン ---------- */

.timeline {
  max-width: 780px;
  margin: 0 0 0 4px; /* style.css は ul のみリセットのため ol を明示リセット */
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--c-line);
}

.timeline__item {
  position: relative;
  padding: clamp(1.4rem, 3vh, 2.1rem) 0 clamp(1.4rem, 3vh, 2.1rem) clamp(1.6rem, 4vw, 2.8rem);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -4.5px;
  top: calc(clamp(1.4rem, 3vh, 2.1rem) + .45em);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-text-dim);
}

/* 「現在」= アクティブ状態のみ氷青 */
.timeline__item.is-now::before {
  background: var(--c-ice);
  border-color: var(--c-ice);
}

.timeline__date {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.timeline__title {
  margin-top: .5em;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.7;
}

.timeline__desc {
  margin-top: .5em;
  max-width: 38em;
  font-size: 13.5px;
  color: var(--c-text-dim);
}

/* ---------- ネットワークと強み ---------- */

.strengths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vh, 3rem) clamp(1.5rem, 5vw, 4.5rem);
}

.strength {
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-line);
}

.strength__no {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.strength__title {
  margin-top: .8em;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
}

.strength__desc {
  margin-top: .7em;
  font-size: 13.5px;
  color: var(--c-text-dim);
}

/* ---------- 主要取引先(整然としたテキストグリッド) ---------- */

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--c-line);
}

.clients-grid li {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--c-text-dim);
}

.clients-note {
  margin-top: var(--space-3);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--c-text-faint);
}

/* ---------- 会社概要(.about-data を再利用) ---------- */

.company-data { max-width: 880px; }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 768px) {
  /* フィーチャーのメタは写真の外へ(小画面の可読性優先) */
  .feature-screen__meta {
    position: static;
    margin-top: var(--space-2);
  }

  .feature-screen__media::after {
    background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 30%);
  }

  .strengths-grid { grid-template-columns: 1fr; }

  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .clients-grid { grid-template-columns: 1fr; }

  .theater-modal { padding: 14px; }
  .theater-modal__stage { gap: var(--space-2); }
  .theater-modal__beam { width: 46px; height: 46px; }
  .theater-modal__beam::before { width: 12px; height: 14px; }
  .theater-modal__note-main { font-size: 11.5px; }

  .timeline__item { padding-left: 1.3rem; }
}