/* ============================================================
   MiND CIRCUIT — Styles

   構成の原則(前版からの決別点)
   1. セクションの箱・番号ラベル・見出しの繰り返しを持たない。
      公演が70分ノンストップなら、サイトも区切りを見せない
   2. 文字と写真は版面に収めない。断ち切り、画面外へ抜く
   3. 動きはスクロール(=潜行)への応答だけ。マウス追従はしない
   4. 明暗の転換は「文字のない帯」で起こす。§配色の第一則
   ============================================================ */

/* ---- 背景の2層。海(色)と泡(canvas)だけが常時いる ---- */
.sea {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sea-top) 0%, var(--sea-bot) 100%);
}

.bubbles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

main { position: relative; z-index: 2; }

/* ============ 固定UI ============ */

.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 上下の余白は「ロゴが浮いて見えない」限界まで詰める(座長指摘 2026-08-11)。
     ロゴの高さ(38〜58px)が帯の高さを決め、余白はその添え物にする */
  padding: clamp(0.45rem, 1.1vw, 0.8rem) var(--pad);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.head.in { opacity: 1; }
.head a { pointer-events: auto; }

/* 劇団ロゴはタイトルロゴと同じ色に固定する(深度で振らない)。
   ★ aspect-ratio は必須。<use> で symbol を呼ぶ外側の <svg> には viewBox が無いので、
     height:auto だと置換要素の既定値 150px が確保され、58pxのマークが
     その中で上下に46pxずつ浮く。ヘッダーが 180px まで膨らんでいた原因(実測) */
.head-mark { display: block; width: clamp(38px, 4.4vw, 58px); color: var(--logo); }
.head-mark svg { display: block; width: 100%; aspect-ratio: 1; height: auto; fill: currentColor; }

/* ============================================================
   予約導線 — ゼロベースで作り直し(3回目・座長指示 2026-08-11)

   ★ 調整の問題ではなく、材料が違っていた。
     このサイトは一度も「面」を使っていない。MAPの .ghost-btn も CASTの .who-link も
     フッタのタイルも水深計も、全部が罫と文字だけでできている。
     予約だけをベタ塗りの面にしていたので、色や形をどう変えても
     貼り付けた部品に見えた。だから面と箱そのものを捨てる。

     1回目 … 差し色の面 + 同じピンクの影            → 「目立たない」
     2回目 … 角丸999px + ツヤ + 落ち影 + 上下の揺れ → 「悪目立ちが際立つ」
     3回目 … 面をやめ、罫と文字に戻す              ← いまここ

   代わりに「予約 = 水面へ上がること」を印にする。
   差し色は面ではなく、**上がっていく3粒の泡**としてだけ置く。
   チラシが「CONTE」のN一文字だけをピンクにしているのと同じ作法。
   下の粒ほど大きく、上ほど小さい = 遠ざかっていく。ホバーで実際に上がる。

   文字は --ink なので水深に追従する。
   ヘッダーは main.js の safeInk が、本文中は .on-light / .on-dark が面倒を見る。
   ★ 差し色を文字色に使わないこと。白地で 1.9:1 しか出ない(§2)
   ============================================================ */
.head-book,
.book-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--ja-g);
  font-weight: 700;
  color: var(--ink);
  background: none;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-hair);
  /* 触れたら、罫が濃くなり・全体がわずかに浮き・字間がひらく。
     泡が上がるのと同じ「浮力」の合図を、文字と罫でも出す */
  transition: border-color 0.35s var(--ease),
              translate 0.35s var(--ease),
              letter-spacing 0.35s var(--ease);
}

.head-book:hover,
.book-btn:hover,
.head-book:focus-visible,
.book-btn:focus-visible {
  border-bottom-color: currentColor;
  translate: 0 -2px;
}

/* 上がっていく3粒。
   ★ 塗りつぶした円にしないこと。canvas の泡はそう描いていない。
     bubbleSprite() は「中は水のまま → 縁に向かって濃くなる膜 → フレネルの縁」で、
     さらに白いハイライトを左上に置く。しかも **膜を描くのは大粒だけ** で、
     小粒は speckSprite() の「芯だけの滲んだ光点」。ここでも同じ描き分けをする。

     大粒 … 膜(0.12 → 0.24 → 0.95 → 0)。止め位置は canvas と同じ 0 / 60% / 88% / 100%
     ハイライト … 白。明るい水面では見えず、深部で効く(canvas と同じ振る舞い)
     中粒・小粒 … 芯だけ。輪郭を持たせない */
/* ★ 3粒は必ず別々の要素にすること。
   1つの要素に背景を3枚重ねると、当然そろって動いて不自然になる
   (座長指摘 2026-08-11)。canvas の粒は1つずつ
   wf(揺れの周期 0.8〜2.9秒)と ph(位相)を持っていて、
   同じ動きをする粒は1つも無い。ここも周期と位相を全部ずらす。
   3.1 / 2.3 / 4.1秒 は互いに割り切れないので、見ている間に揃うことがない */
.bub {
  position: relative;
  flex: 0 0 auto;
  width: 1.2em;
  height: 2.1em;
}

.bub span {
  position: absolute;
  border-radius: 50%;
  /* 輪郭をぼかす。canvas は各スプライトに blur を掛けてから描いており
     (bubbleSprite の g.filter = blur(size × 0.045〜0.075))、
     縁の立った円は1つも無い。0.04em ≒ 直径の5.5%で、canvas と同じ比率 */
  filter: blur(0.04em);

  /* 2本掛ける。1本目=常時の揺れ、2本目=触れたときの上昇。
     ★ 上昇は animation-play-state で止めてあるだけで、常に読み込まれている。
       ホバーで animation-name を差し替えると、その瞬間に現在位置から
       キーフレームの0%へ飛んで見える。止める/動かすなら跳ねない */
  animation-timing-function: ease-in-out, ease-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, paused;
}

/* 上がって消え、下から入り直して戻る。
   0% と 100% が「止まっているときの姿」なので、止めていても不自然にならない */
@keyframes bub-rise {
  0%   { translate: 0 0;       opacity: 1; }
  52%  { translate: 0 -1.7em;  opacity: 0; }
  53%  { translate: 0 0.55em;  opacity: 0; }
  74%  { opacity: 1; }
  100% { translate: 0 0;       opacity: 1; }
}

.head-book:hover .bub span,
.book-btn:hover .bub span,
.head-book:focus-visible .bub span,
.book-btn:focus-visible .bub span { animation-play-state: running, running; }

/* 大粒 … 膜(中は水のまま → 縁で濃い)+ 左上のハイライト。
   止め位置 0 / 55% / 82% / 94% / 100% は bubbleSprite に合わせてある */
.bub span:nth-child(1) {
  width: 0.72em; height: 0.72em; left: 0.02em; bottom: 0.02em;
  background:
    radial-gradient(circle closest-side at 32% 28%,
      rgb(255 255 255 / 0.85) 0%, rgb(255 255 255 / 0) 42%),
    radial-gradient(circle closest-side,
      rgb(var(--accent-rgb) / 0.12) 0%,
      rgb(var(--accent-rgb) / 0.22) 55%,
      rgb(var(--accent-rgb) / 0.68) 82%,
      rgb(var(--accent-rgb) / 0.26) 94%,
      rgb(var(--accent-rgb) / 0) 100%);
  animation-name: bub-a, bub-rise;
  animation-duration: 3.1s, 1.15s;
  animation-delay: -0.9s, 0s;
}

/* 中粒・小粒 … 膜は持たない。speckSprite と同じ「芯だけの滲んだ光点」 */
.bub span:nth-child(2) {
  width: 0.4em; height: 0.4em; left: 0.66em; bottom: 0.78em;
  background: radial-gradient(circle closest-side,
    rgb(var(--accent-rgb) / 0.92) 0%,
    rgb(var(--accent-rgb) / 0.34) 45%,
    rgb(var(--accent-rgb) / 0) 100%);
  animation-name: bub-b, bub-rise;
  animation-duration: 2.3s, 0.92s;
  animation-delay: -1.7s, 0s;
}

.bub span:nth-child(3) {
  width: 0.26em; height: 0.26em; left: 0.22em; bottom: 1.45em;
  background: radial-gradient(circle closest-side,
    rgb(var(--accent-rgb) / 0.8) 0%,
    rgb(var(--accent-rgb) / 0.3) 45%,
    rgb(var(--accent-rgb) / 0) 100%);
  animation-name: bub-c, bub-rise;
  animation-duration: 4.1s, 1.38s;
  animation-delay: -0.3s, 0s;
}

/* 経路も別。大粒はゆっくり大きく、小粒ほど速く、横へ流れる */
@keyframes bub-a {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(0.06em, -0.09em); }
  62%      { transform: translate(-0.05em, -0.13em); }
}

@keyframes bub-b {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-0.08em, -0.07em); }
  70%      { transform: translate(0.05em, -0.13em); }
}

@keyframes bub-c {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(0.06em, -0.05em); }
  55%      { transform: translate(0.1em, -0.12em); }
  80%      { transform: translate(-0.03em, -0.05em); }
}

/* ヘッダーは CAST の PROFILE リンクと同じ組み(下罫だけ)。箱にしない */
.head-book {
  font-size: clamp(0.88rem, 2.1vw, 1rem);
  letter-spacing: 0.16em;
  padding-bottom: 0.45rem;
}

.head-book:hover,
.head-book:focus-visible { letter-spacing: 0.19em; }

/* ---- 水深計。目盛そのものが移動手段 ---- */
.gauge {
  position: fixed;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.gauge.in { opacity: 1; }

.gauge-now {
  font-family: var(--en);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gauge-now i { font-style: normal; font-size: 0.44em; letter-spacing: 0.14em; margin-left: 0.2em; }

.gauge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }

.gauge-list a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--ink-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

/* 目盛の線。現在地だけ長く伸びる */
.gauge-list a::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}

/* 現在地は色の差だけでは弱い(座長指摘 2026-08-11)。
   色・太さ・字間・目盛の3つを同時に動かす。
   ★ 透明度は使わない。薄くすると背景の水に負けて4.5:1を割る */
.gauge-list a:hover { color: var(--ink); }

.gauge-list a.on {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.3em;
}

.gauge-list a.on::after { width: 34px; height: 2px; }

/* ============ 0m 水面 ============ */

.surface {
  position: relative;
  min-height: 100svh;
  /* 上はヘッダー(ロゴの高さ+余白)を避けるぶんだけ。ロゴを画面の中央寄りに戻す */
  padding: clamp(3.6rem, 9vh, 6rem) var(--pad) clamp(3.5rem, 8vh, 5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  overflow-x: clip;
}

/* 集合写真はFVに置かない(座長判断)。
   白ホリの中に contain で浮かせると縁がぼやけて締まらず、
   狭い画面では5人が高さ234pxに並んで顔が読めなくなる。
   CAST の頭で全幅の断ち切りとして使う(.cast-photo) */

.surface-type { text-align: center; }

/* ---- 水面へ浮かび上がる ----
   背景の泡と同じ動き方をさせる。泡は canvas の中で
     x = sin(t × wf × 2π + ph) × amp × 26   (振れ幅 3.6〜18px / 周期 0.8〜2.9秒)
   で左右に揺れながら上がっている。文字だけ真っ直ぐ上げると、
   同じ水の中にいるように見えない。だから
     上がる → 少し行き過ぎる → 逆へ振れる → 小さく振れて止まる
   という減衰する揺れにしてある。振れ幅は泡の上限(18px≒1.1rem)より内側に収める。

   ★ 不透明度は前半で1にする。ここは LCP(最大要素の描画)の対象になるので、
     最後まで薄いままにすると計測値がそのぶん遅くなる。
     見た目の余韻は「透明度」ではなく「揺れ」で持たせる */
@keyframes rise {
  0%   { opacity: 0; transform: translate3d(0, 2.1rem, 0); }
  26%  { opacity: 1; }
  48%  { transform: translate3d(-0.42rem, -0.4rem, 0); }
  70%  { transform: translate3d(0.24rem, 0.18rem, 0); }
  87%  { transform: translate3d(-0.08rem, -0.05rem, 0); }
  100% { opacity: 1; transform: none; }
}

.kicker, .when, .where { opacity: 0; }

.kicker.in, .when.in, .where.in {
  animation: rise 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.kicker {
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: clamp(0.64rem, 1.5vw, 0.78rem);
  letter-spacing: 0.32em;
  color: var(--ink-mid);
  margin: 0 0 clamp(0.9rem, 2.4vh, 1.6rem);
  min-height: 1.4em;
}

/* 支給ロゴ(SVG)。字面比 571.1 : 59.8 ≒ 9.55:1 の横長なので、
   幅を版面いっぱいに取れば必ず1行で収まる(座長指示の「PC・スマホとも折り返さない」)。
   86vw は 375px で 322px。差し替え前の文字組み(317px)とほぼ同じ大きさになる */
.title {
  margin: 0;
  line-height: 0;
}

/* タイトルは1文字ずつ上げる。泡は1粒ずつバラバラに上がってくるので、
   ロゴだけ一枚の板として現れると、そこだけ水の外の出来事に見える。
   支給ロゴは字ごとに <path> が分かれている(MiND=4 / CIRCUIT=7 の計11)ので、
   そのまま1文字=1粒として扱える。

   ★ SVGの子要素へのCSS transform は viewBox の単位で効く。
     字高は 59.8 単位なので、下の 19 は「字の高さの約3分の1だけ下から上がる」の意味。
     画面幅が変わっても比率が保たれる = スマホでもPCでも同じ揺れ方になる */
.title svg path { opacity: 0; }

.title.in svg path {
  animation: rise-letter 1.3s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes rise-letter {
  0%   { opacity: 0; transform: translate(0, 19px); }
  30%  { opacity: 1; }
  50%  { transform: translate(-1.5px, -3.2px); }
  72%  { transform: translate(0.9px, 1.5px); }
  88%  { transform: translate(-0.3px, -0.5px); }
  100% { opacity: 1; transform: none; }
}

/* 湧き出し口から順に上がってくるように、左から少しずつ遅らせる。
   40ms × 10 = 全部出そろうまで 0.4秒。速すぎると一斉に見え、
   遅すぎると「文字が一列に並ぶのを待たされている」ように見える */
.title.in svg path:nth-child(1)  { animation-delay: 0ms; }
.title.in svg path:nth-child(2)  { animation-delay: 40ms; }
.title.in svg path:nth-child(3)  { animation-delay: 80ms; }
.title.in svg path:nth-child(4)  { animation-delay: 120ms; }
.title.in svg path:nth-child(5)  { animation-delay: 176ms; }  /* CIRCUIT の頭。語間で一拍あける */
.title.in svg path:nth-child(6)  { animation-delay: 216ms; }
.title.in svg path:nth-child(7)  { animation-delay: 256ms; }
.title.in svg path:nth-child(8)  { animation-delay: 296ms; }
.title.in svg path:nth-child(9)  { animation-delay: 336ms; }
.title.in svg path:nth-child(10) { animation-delay: 376ms; }
.title.in svg path:nth-child(11) { animation-delay: 416ms; }

.title svg {
  display: block;
  /* 100% を入れておくこと。これが無いと親の余白(水深計の1列ぶん)を無視して
     vw で広がり、目盛の上にロゴが乗る */
  width: min(86vw, 64rem, 100%);
  height: auto;
  margin: 0 auto;
  /* ★ 必須。viewBox は字面ぴったりに切り詰めてある(字高59.8)ので、
     浮上アニメーションで文字が下から19単位上がり、行き過ぎで3.2単位上へ出る。
     SVGは既定が overflow:hidden なので、そのままだと viewBox の外が切られて
     文字の上と下が欠ける(実機で「D CIRの上が欠ける」と指摘された)。
     viewBox を広げるとロゴの実寸が変わってしまうので、こちらを開ける。
     行き過ぎは幅1024pxで5.7px、kickerとの間隔は17px以上あるので重ならない */
  overflow: visible;
  /* PDF(MiND CIRCUIT-FIX.pdf)のタイトルロゴから実測した色。
     原板SVGの #7d7d7d でも深度追従でもなく、この1色で固定する */
  fill: var(--logo);
}

.when {
  font-family: var(--en);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.8vw, 1.6rem);
  letter-spacing: 0.06em;
  margin: clamp(1rem, 2.6vh, 1.8rem) 0 0.5rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em;
}

.when em { font-style: normal; font-size: 0.56em; letter-spacing: 0.2em; color: var(--ink-mid); }
.when s { width: 1.6em; height: 1px; background: var(--ink-hair); text-decoration: none; }

.where {
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: clamp(0.82rem, 1.9vw, 0.95rem);
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--ink-mid);
  margin: 0;
}

.where i { font-style: normal; display: block; font-size: 0.86em; }

.cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  transform: translateX(-50%);
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  color: var(--ink-mid);
  margin: 0;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

/* .cue は translateX(-50%) で中央に置いているので、rise をそのまま当てると
   最後の transform:none で中央寄せごと外れて左へ飛ぶ。-50% を織り込んだ別口にする */
.cue.in { animation: rise-cue 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

@keyframes rise-cue {
  0%   { opacity: 0; transform: translate3d(-50%, 2.1rem, 0); }
  26%  { opacity: 1; }
  48%  { transform: translate3d(calc(-50% - 0.42rem), -0.4rem, 0); }
  70%  { transform: translate3d(calc(-50% + 0.24rem), 0.18rem, 0); }
  87%  { transform: translate3d(calc(-50% - 0.08rem), -0.05rem, 0); }
  100% { opacity: 1; transform: translateX(-50%); }
}

/* 沈んでいく線。潜行の方向を示す */
.cue b {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, currentColor, transparent);
  animation: sink 2.4s ease-in-out infinite;
}

@keyframes sink {
  0%, 100% { transform: scaleY(0.35); transform-origin: 50% 0; opacity: 0.4; }
  50%      { transform: scaleY(1);    transform-origin: 50% 0; opacity: 1; }
}

/* ============ 18m 公演スペック ============
   区切り線も見出しも置かない。文だけが順に沈んでくる */

.spec {
  padding: clamp(9rem, 22vh, 16rem) var(--pad);
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 4.2vh, 3rem);
  overflow-x: clip;
}

.spec-line {
  font-family: var(--ja);
  font-weight: 400;
  font-size: clamp(1.7rem, 6.2vw, 4.4rem);
  letter-spacing: 0.04em;
  line-height: 1.35;
  margin: 0;
  opacity: 0;
  transform: translateY(26px);
}

.spec-line.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

/* 数字と要点だけ張り上げる。チラシと同じ配分(ゴシックは張り上げ専用) */
.spec-line b {
  font-family: var(--ja-g);
  font-weight: 700;
  font-size: 1.16em;
  letter-spacing: 0.01em;
  /* 張り上げた語は割らない。和文は禁則以外どこでも折れるので、
     入らなくなった瞬間に「オマケありま / す！」のような2文字の孤立行ができる
     (2026-08-12「MVあります！」→「オマケあります！」で実際に出た)。
     nowrap にしておけば、折れるとしても読点のうしろ = 意味の切れ目になる。
     ★ ここが折れたら文が長すぎる合図。CSSで詰めるのではなく文を短くすること */
  white-space: nowrap;
}

/* 奇数行を字下げして、水中を沈むときの揺れを作る */
.spec-line[data-i="1"] { margin-left: clamp(1rem, 7vw, 7rem); }
.spec-line[data-i="2"] { margin-left: clamp(0.5rem, 3vw, 3rem); }
.spec-line[data-i="3"] { margin-left: clamp(1.5rem, 10vw, 10rem); }

.spec-tail {
  font-family: var(--ja);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  margin: clamp(1.5rem, 4vh, 3rem) 0 0;
  opacity: 0;
  transform: translateY(20px);
}

.spec-tail.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }

/* ============ 38m 出演 ============ */

.cast { padding: clamp(6rem, 16vh, 11rem) 0; overflow-x: clip; }

.cast-open {
  font-family: var(--ja);
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin: 0 var(--pad) clamp(1.6rem, 4vh, 2.6rem);
}

/* 端から端まで。枠も羽根も付けない */
.cast-photo {
  margin: 0 0 clamp(4rem, 12vh, 9rem);
  width: 100%;
}

.cast-photo img { width: 100%; height: auto; }

/* 1人ずつ。写真は必ず画面の外へ抜ける。左右交互で潜行のリズムを作る */
.who {
  display: grid;
  grid-template-columns: minmax(0, 38vw) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  margin-bottom: clamp(5rem, 14vh, 10rem);
  padding-right: var(--pad);
}

.who--rev {
  grid-template-columns: minmax(0, 1fr) minmax(0, 38vw);
  padding-right: 0;
  padding-left: var(--pad);
}

.who--rev .who-ph { order: 2; }
.who--rev .who-t { order: 1; text-align: right; }

/* ---- 触ると入れ替わる写真 ----
   CASTの5人(4:5)と、MESSAGEの座長(3:4)が共有する。
   クラスは写真そのものに付く。main.js の pointermove が .swap を探す。

   .look  = マウスが自分で動いてこの写真の上に来た
   .smile = タッチでタップした
   ★ CSSの :hover は使わない。ホイールで送ると、止まったカーソルの下を写真のほうが
     通り過ぎて次々に成立し、「スクロールで切り替わる」ようにしか見えない
     (座長指摘 2026-08-11・実機で再現)。判定は main.js が持つ */
.swap { position: relative; overflow: hidden; cursor: pointer; }

.swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 溶かす時間。0.45s の var(--ease)(expo out)は頭が速すぎて「パッ」と切り替わって
     見えた(座長指摘 2026-08-11)。両端をなだらかにした 0.85s で、
     2枚が重なっている時間そのものを見せる */
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.5s cubic-bezier(0.2, 0, 0.2, 1);
}

/* 変わり顔は上に重ねて、透明度だけで入れ替える(位置が動かないので顔がブレない)。
   ★ 下の -a は消さない。両方を同時に薄くすると合成の途中で背景の海が透けて
     一瞬暗くなる(中間で25%抜ける)。-a を敷いたまま -b を重ねると濁らずに溶ける */
.swap .ph-b { opacity: 0; transform: scale(1.045); }

.swap.look .ph-b,
.swap.smile .ph-b { opacity: 1; transform: none; }

/* 原板が 4:5 なので枠も 4:5。ここで切らない(切ると寄りが戻ってしまう) */
.who-ph {
  margin: 0 0 0 calc(-1 * var(--pad));   /* 左端を画面外へ断ち切る */
  aspect-ratio: 4 / 5;
}

.who--rev .who-ph { margin: 0 calc(-1 * var(--pad)) 0 0; }

.who-n {
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--ink-mid);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 1.2em;
}

.who--rev .who-n { justify-content: flex-end; }

.who-n i {
  font-style: normal;
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: 0.86em;
  letter-spacing: 0.18em;
}

/* 名前はこのセクションの主役。版面から食み出す寸前まで大きく取る */
.who-name {
  font-family: var(--ja);
  font-weight: 600;
  font-size: clamp(2.2rem, 7vw, 5rem);
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin: 0 0 clamp(1rem, 2.6vh, 1.6rem);
}

.who-say {
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: clamp(0.86rem, 1.9vw, 0.98rem);
  letter-spacing: 0.06em;
  line-height: 2;
  margin: 0 0 1.4rem;
  max-width: 30rem;
}

.who--rev .who-say { margin-left: auto; }

.who-link {
  display: inline-block;
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ink-hair);
  transition: border-color 0.25s var(--ease);
}

.who-link:hover { border-bottom-color: currentColor; }

/* ============ 68m 前回公演 ============
   明暗の転換帯。文字を置かない(キャプションは帯の下=転換完了後) */

/* 上下の余白は飾りではなく、明暗を入れ替えるための「文字が無い距離」そのもの。
   INFO の最後の一行から SCENE のキャプションまでが転換に使える窓で、
   1280x720 で 492px / 390x844 で 436px しか無く、旧版(約550px)より狭かった。
   余白を足して両方で約600pxまで伸ばしてある。ここを削ると転換が急になり、
   墨も白も4.5:1に届かない帯が文字の上に乗る(§配色の第一則) */
.scene { padding: clamp(6rem, 17vh, 11rem) 0 clamp(6.5rem, 18vh, 12rem); overflow: hidden; }

.drift-view { overflow: hidden; }

.drift {
  display: flex;
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
  width: max-content;
  will-change: transform;
}

/* 最初からカラー。ホバーで色が付く演出はしない(座長指示) */
.drift img {
  width: clamp(260px, 32vw, 440px);
  height: clamp(174px, 21vw, 293px);
  object-fit: cover;
  flex: 0 0 auto;
}

/* 転換完了後の暗部に置く。小さな文字は転換の途中に置かない(第一則)。
   上の余白は飾りではない。ここが短いとキャプションが「転換の縁」に乗り、
   白文字でも 3.99:1 までしか出ない(実測 768x1024・余白8vh)。
   22vh でちょうど 4.50、26vh で 4.69。余裕を見て 26vh を採る。
   数字を触るなら §6 のコントラスト監査を回すこと */
.scene-cap {
  font-family: var(--ja);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  letter-spacing: 0.1em;
  line-height: 2;
  margin: clamp(5.5rem, 26vh, 12rem) var(--pad) 0;
}

.scene-cap a {
  font-family: var(--ja-g);
  font-weight: 700;
  text-underline-offset: 4px;
  margin-left: 0.6em;
}

/* ============ 84m 海底 = 会場 ============
   ここで初めて情報が整列する。潜り切った先に事実がある */

.floor { padding: clamp(6rem, 15vh, 11rem) var(--pad); overflow-x: clip; }

.floor-open {
  font-family: var(--ja);
  font-size: clamp(1.5rem, 5vw, 3rem);
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin: 0 0 clamp(3rem, 9vh, 6rem);
}

.floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2.5rem, 6vw, 4.5rem);
}

.slot-h {
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.34em;
  color: var(--ink-mid);
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--ink-hair);
}

.days, .fee { list-style: none; margin: 0; padding: 0; }

.days li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--ja);
  padding: 0.6rem 0;
}

.days b { font-weight: 400; font-size: clamp(1.6rem, 4.6vw, 2.2rem); letter-spacing: 0.02em; }
.days em { font-style: normal; font-family: var(--en); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--ink-mid); }
.days i { font-style: normal; font-size: clamp(1.15rem, 3.2vw, 1.5rem); margin-left: auto; }

.fee li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-hair);
}

.fee-k {
  flex: 0 0 100%;
  font-family: var(--en);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

.fee-k i {
  font-style: normal;
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  margin-left: 0.7em;
  padding: 0.24em 0.55em;
  background: var(--ink-mid);
  color: var(--sea-bot);
  vertical-align: 0.16em;
}

.fee-v { font-family: var(--ja); display: flex; align-items: baseline; gap: 0.35em; }
.fee-v b { font-weight: 400; font-size: clamp(1.3rem, 3.6vw, 1.7rem); }
.fee-v em { font-style: normal; font-family: var(--ja-g); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--ink-mid); }

.place {
  font-family: var(--ja-g);
  font-weight: 700;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.05em;
  line-height: 1.7;
  margin: 0 0 0.9rem;
}

.fine {
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  line-height: 1.9;
  color: var(--ink-mid);
  margin: 1.1rem 0 0;
}

/* MAP。--ink-hair(#C2C4C6)の1本では水面の上でほとんど見えなかった
   (座長指摘 2026-08-11)。罫を文字と同じ濃さにして、はっきり囲む。
   触れたら塗りつぶし、文字はその場所の水の色に抜く */
.ghost-btn {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--en);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-decoration: none;
  padding: 0.95em 2.2em;
  border: 1px solid currentColor;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.ghost-btn:hover,
.ghost-btn:focus-visible {
  background: var(--ink);
  color: var(--sea-top);
}

.book { margin-top: clamp(4rem, 11vh, 7rem); }

/* 読み終えた直後にもう一度。INFO を上へ移した(座長判断)ので、
   ページの終わりに押す場所だけを戻してある */
.book--end { margin-top: clamp(2.4rem, 6vh, 3.6rem); }

/* ★ 箱で囲まないこと。罫で囲うと「ダサい」(座長指摘 2026-08-11)。
   ヘッダーと同じ組み(文字 + 下罫 + 泡)を、そのまま大きくしただけにする。
   大きさと字間だけで、これが主たる導線だと分かればよい。
   ★ font-family を書かないこと。以前ここで var(--en) を指定していたが、
     文言が和文になったので Barlow にグリフが無く、代替書体に落ちていた */
.book-btn {
  font-size: clamp(1.2rem, 3.2vw, 1.75rem);
  letter-spacing: 0.24em;
  padding-bottom: 0.7rem;
}

.book-btn:hover,
.book-btn:focus-visible { letter-spacing: 0.27em; }

/* ============ 96m 座長の言葉 ============ */

.word {
  padding: clamp(5rem, 13vh, 9rem) var(--pad) clamp(6rem, 15vh, 10rem);
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  overflow-x: clip;
}

/* 縦長(座長指示)。立ち姿なので版面いっぱいに立たせず、左端だけ画面外へ抜く。
   原板と同じ 3:4。2枚を重ねるので、枠の高さは aspect-ratio が決める */
.word-photo { margin: 0 0 0 calc(-1 * var(--pad)); aspect-ratio: 3 / 4; }

.word-t p {
  font-family: var(--ja);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  letter-spacing: 0.05em;
  line-height: 2.3;
  margin: 0 0 1.6rem;
}

/* ページ唯一の、文字としての差し色。
   ピンクは白地では 1.9:1 しか出ないが、ここは深度0.9付近の暗部なので成立する。
   チラシがN一文字にだけ色を置いているのと同じ作法で、着地の一言だけに乗せる */
.word-end {
  font-family: var(--ja);
  font-weight: 800;
  font-size: clamp(1.8rem, 6vw, 3.2rem) !important;
  letter-spacing: 0.1em;
  line-height: 1.5 !important;
  margin: clamp(1.5rem, 4vh, 2.6rem) 0 0 !important;
  color: var(--accent);
}

/* 共有。予約の下に置くが、予約より前へ出ないこと。
   主導線は予約で、これはその次。だから字は小さく、罫も細いまま */
.share { margin-top: clamp(2.6rem, 7vh, 4rem); }

.share-h {
  font-family: var(--ja-g) !important;
  font-weight: 500;
  font-size: 0.76rem !important;
  letter-spacing: 0.16em;
  line-height: 1.8 !important;
  color: var(--ink-mid);
  margin: 0 0 0.9rem !important;
}

.share ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
}

.share li[hidden] { display: none; }

.share a,
.share button {
  display: inline-block;
  font-family: var(--ja-g);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: inherit;
  background: none;
  border: 0;
  padding: 0 0 0.35rem;
  text-decoration: none;
  border-bottom: 1px solid var(--ink-hair);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), letter-spacing 0.25s var(--ease);
}

.share a:hover,
.share a:focus-visible,
.share button:hover,
.share button:focus-visible { border-bottom-color: currentColor; letter-spacing: 0.17em; }

.word-sign {
  font-family: var(--ja-g) !important;
  font-weight: 500;
  font-size: 0.85rem !important;
  letter-spacing: 0.14em;
  color: var(--ink-mid);
  margin-top: 1.4rem !important;
}

/* ============ 100m 底 ============ */

.foot { padding: clamp(5rem, 12vh, 8rem) var(--pad) clamp(2rem, 5vh, 3rem); }

.staff { margin: 0 0 clamp(3rem, 8vh, 5rem); border-top: 1px solid var(--ink-hair); }

.staff > div {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 4vw, 3rem);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ink-hair);
}

.staff dt {
  flex: 0 0 auto;
  width: clamp(6rem, 16vw, 10rem);
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink-mid);
}

.staff dd {
  margin: 0;
  font-family: var(--ja);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  letter-spacing: 0.12em;
}

/* 一列に並んだ文字は、どれも同じ重さの言葉に見えて選べない(座長指摘 2026-08-11)。
   1件ずつ枠を与え、行き先を副えて「押せる面」にする。
   枠は上のスタッフ表と同じ髪の毛罫なので、footの中で新しい部品には見えない */
.links {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 7vh, 4rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
}

.links a {
  display: flex;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  flex-wrap: wrap;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ink-hair);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.links a:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* 外部へ出ることを示す。5件とも別タブなので例外は無い */
.links a::after {
  content: "↗";
  margin-left: auto;
  font-family: var(--en);
  font-size: 0.85em;
  color: var(--ink-mid);
}

.lk-n {
  font-family: var(--en);
  font-weight: 500;
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  letter-spacing: 0.2em;
}

/* 3件目から先は和文。欧文の字間のままだと間延びする */
.links li:nth-child(n+3) .lk-n { font-family: var(--ja-g); font-weight: 700; letter-spacing: 0.1em; }

.lk-s {
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
}

.rights {
  font-family: var(--ja-g);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.9;
  color: var(--ink-mid);
  margin: 0;
}

/* コピーライト。公演名の下に一段小さく置く(座長指示 2026-08-11) */
.rights--tiny { font-size: 0.66rem; letter-spacing: 0.08em; margin-top: 0.7rem; }
.rights--tiny .sep { margin: 0 0.5em; opacity: 0.5; }
.rights--tiny a {
  text-decoration: none;
  border-bottom: 1px solid var(--ink-hair);
  padding-bottom: 0.1em;
  transition: border-color 0.25s var(--ease);
}
.rights--tiny a:hover,
.rights--tiny a:focus-visible { border-bottom-color: currentColor; }

.up {
  display: block;
  margin-top: clamp(3rem, 8vh, 5rem);
  text-align: center;
  font-family: var(--en);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  color: var(--ink-mid);
  text-decoration: none;
}

.up:hover { color: var(--ink); }

/* ============ 狭い画面 ============ */

@media (max-width: 820px) {
  /* 行き先も出す(座長指示 2026-08-11)。
     右端に縦一列のまま出すと、FVではロゴ(幅86vw)に、本文では右端の行に必ず重なる。
     幅を譲れないなら向きを変える — 水深計を横に倒して最下部へ敷く。
     目盛は文字の下に降りる短い線になり、現在地だけ長く伸びるのは縦のときと同じ。
     地は --sea-bot(main.jsが毎フレーム書き換える現在の水の色)からの
     グラデーションなので、帯には見えず水に溶ける */
  .gauge {
    inset: auto 0 0 0;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem var(--pad) calc(0.45rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, var(--sea-bot) 52%);
  }

  .gauge-now { font-size: 1.05rem; flex: 0 0 auto; }

  .gauge-list {
    flex: 1 1 auto;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.2rem;
    min-width: 0;
  }

  .gauge-list a {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.32rem;
    font-size: clamp(0.5rem, 2.3vw, 0.62rem);
    letter-spacing: 0.06em;
  }

  /* 現在地の印は、文字の下いっぱいに引いた太い線にする。
     横並びでは目盛が短いと全部同じに見える(座長指摘)。
     字間は動かさない — 幅が変わると隣の項目までずれて、読むたびに列が揺れる */
  .gauge-list a::after { width: 7px; }

  .gauge-list a.on {
    letter-spacing: 0.06em;
    font-weight: 700;
  }

  .gauge-list a.on::after { width: 100%; height: 2px; }

  /* 敷いた帯のぶんだけ、下端に置いてあるものを持ち上げる */
  .cue { bottom: clamp(3.1rem, 6vh, 4rem); }
  .foot { padding-bottom: clamp(4.2rem, 8vh, 5.4rem); }

  .who,
  .who--rev {
    grid-template-columns: 1fr;
    gap: clamp(1.2rem, 4vh, 2rem);
    padding: 0 var(--pad);
  }

  .who-ph,
  .who--rev .who-ph {
    order: 1;
    margin: 0 calc(-1 * var(--pad));
    /* 比率は 4:5 のまま(切ると引いた画角が台無しになる)。
       375px幅なら469pxの高さで、縦を食いすぎない */
  }

  .who-t,
  .who--rev .who-t { order: 2; text-align: left; }
  .who--rev .who-n { justify-content: flex-start; }
  .who--rev .who-say { margin-left: 0; }

  .word { grid-template-columns: 1fr; }
  .word-photo { margin: 0 calc(-1 * var(--pad)) clamp(2rem, 5vh, 3rem); }

  /* 前回公演のキャプションを写真に寄せる(座長指摘 2026-08-11「離れすぎてる」)。

     幅820px以下では .drift img の高さが下限 174px で止まる(21vw が 174px を
     下回るのが 828px 以下)。ところがキャプションの上余白は 26vh のまま伸びるので、
     390x844 でも 768x1024 でも 写真174px < 余白192px となり、
     キャプションが写真から切り離されて宙に浮く。広い画面では 269px 対 187px なので
     この崩れは起きない。だから狭い画面だけの話。

     ★ 余白そのものは減らせない。ここは明暗の転換帯で、
       .book(data-band="light")の下端から .scene-cap(data-band="dark")の上端までが
       転換に使える窓だから(§2)。窓を縮めると転換が急になり、
       キャプションが「転換の縁」に乗って白文字でも 3.99:1 までしか出ない。

     だから減らすのではなく、同じ量だけ写真の上へ移す。
     移した先も窓の内側(文字が無い区間)なので、窓の長さは変わらない。
     上下2つの合計が旧来の合計を下回らないよう、画面高 400〜1400px で検算した
     (最小 0px、最大 +32px。窓は決して短くならない)。
     ★ この2つの数字は必ずセットで動かすこと。片方だけ触ると窓が縮む */
  .scene { padding-top: clamp(12rem, 36vh, 19.6rem); }
  .scene-cap { margin-top: clamp(2.5rem, 7vh, 4rem); }
}

/* 広い画面だけ 16:9 に締める。上下5.05%ずつ切るが、
   人物は 6.9%〜93.1% に居るので無傷。狭い画面は原寸(8:5)のまま帯にする */
@media (min-width: 821px) {
  .cast-photo { aspect-ratio: 16 / 9; }
  .cast-photo img { height: 100%; object-fit: cover; object-position: 50% 50%; }

  /* ---- 水深計の1列を空ける ----
     広い画面では水深計が右端に縦一列で固定される。本文がそこまで伸びると
     文字の上に目盛が乗る(実測 1280px幅: 座長の言葉 +79px / タイトル +31px /
     会場名 +33px)。右端まで文字が来るセクションだけ、その幅を右に足す。
     ★ 全幅で断ち切っている要素(.cast-photo / .drift / 写真)は
       --pad の負マージンで外へ出しているので、--pad 自体は動かさないこと */
  :root { --lane: 7rem; }

  .spec,
  .floor,
  .foot,
  .word { padding-right: calc(var(--pad) + var(--lane)); }

  /* CASTは写真を画面外へ抜くので、右余白は .who の側で持っている。
     .who--rev は文字が左にあるので触らない(右は写真の断ち切り) */
  .who { padding-right: calc(var(--pad) + var(--lane)); }
  .cast-open { margin-right: calc(var(--pad) + var(--lane)); }

  /* FVは中央揃えなので、左右そろえて詰めないとロゴが中心からずれる */
  .surface { padding-left: calc(var(--pad) + var(--lane)); padding-right: calc(var(--pad) + var(--lane)); }

  .scene-cap { margin-right: calc(var(--pad) + var(--lane)); }
}

/* ============ Reduced Motion ============ */

@media (prefers-reduced-motion: reduce) {
  .spec-line, .spec-tail { opacity: 1; transform: none; transition: none; }
  .head, .gauge { opacity: 1; transition: none; }
  /* 浮上は全部止めて、最初から水面に出ている状態にする */
  .kicker, .when, .where, .cue, .title svg path { opacity: 1; animation: none; transform: none; }
  .cue { transform: translateX(-50%); }
  .cue b { animation: none; }
  .swap img { transition: none; }
  .bub span { animation: none; }
}