/*
 * 第2版。
 *
 * ---------------------------------------------------------------------------
 * 第1版との違い
 *
 * 第1版は «ページの上部に埋め込まれた16:9の動画» だった。
 * 地の色を揃えても、動画の中に 背景・見出し・字幕 が全部入っている以上、
 * それは «完結した一枚の画面» で、見る側は動画プレイヤーとして読む。
 *
 * 第2版では、動画に残っているのは «透過した人» だけ。
 * 地も、見出しも、字幕も、選択肢も、全部このCSSが描く。
 * 画面のどこにも長方形が無いので、境界を指させない。
 *
 * 重なりの順（下から）
 *   0 地      画面全体。常にゆっくり動いている
 *   1 見出し   中央の構図では «人の後ろ» に回る
 *   2 人      透過動画
 *   4 UI      選択肢・CTA
 *   5 字幕
 * ---------------------------------------------------------------------------
 *
 * 数値は tokens.css（src/canvas/tokens.ts から自動生成）の値に --u を掛けて使う。
 * --u には px が付いている。単位を外すと calc がただの数になり、宣言ごと無効になる。
 */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overscroll-behavior: none;
}

:root {
  --u: 0.5px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 人の基準の高さ。構図ごとの倍率はここに掛かる */
  --fig-base: 78svh;
  --fig-x: 0.5;
  --fig-y: 0.63;
  --fig-scale: 1;
}

/* ---------------------------------------------------------------------------
   地。画面全体。止まらない
   映像が待っているあいだも、ここは動き続ける。
   «動画は止まっているが、世界は止まっていない» の実体はこの層にある。
   --------------------------------------------------------------------------- */

#bg { position: fixed; inset: 0; z-index: 0; background: var(--bg); overflow: hidden; }
#bg i { position: absolute; display: block; }

#bg .b1, #bg .b2 {
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
#bg .b1 {
  width: 78vmax; height: 78vmax; left: -22vmax; top: -26vmax;
  background: radial-gradient(circle, #1d2740 0%, rgba(29, 39, 64, 0) 68%);
  animation: drift1 42s ease-in-out infinite alternate;
}
#bg .b2 {
  width: 66vmax; height: 66vmax; right: -24vmax; bottom: -22vmax;
  background: radial-gradient(circle, #3a1f19 0%, rgba(58, 31, 25, 0) 68%);
  animation: drift2 53s ease-in-out infinite alternate;
}
@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vmax, -5vmax, 0) scale(1); }
}

/* 粒子。単色の面が «塗り» に見えるのを防ぐ。密度は低く */
#bg .grain {
  inset: 0; width: 100%; height: 100%; opacity: 0.055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 下の暗がり。字幕が読めるようにするため。文字に箱を付けない */
#bg .scrim {
  inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to top, rgba(10, 11, 15, 0.92) 0%, rgba(10, 11, 15, 0.55) 42%, rgba(10, 11, 15, 0) 100%);
}

/* ---------------------------------------------------------------------------
   舞台
   --------------------------------------------------------------------------- */

#scene { position: relative; width: 100vw; height: 100svh; overflow: hidden; }

/* 人 */

#figure {
  position: absolute;
  left: calc(var(--fig-x) * 100%);
  top: calc(var(--fig-y) * 100%);
  height: var(--fig-base);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(var(--fig-scale));
  transform-origin: 50% 50%;
  z-index: 2;
  pointer-events: none;
  /* 構図が変わると «人が移動する»。動画プレイヤーが縮むのではない */
  transition: left 900ms var(--ease), top 900ms var(--ease), transform 900ms var(--ease);
}
#figure .node-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  will-change: opacity;
}
/* 足元の影。地に «立っている» ことにする */
#figure::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4%;
  width: 46%; height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%);
  filter: blur(6px);
}

/* 見出し */

#type {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: left 900ms var(--ease), right 900ms var(--ease), top 900ms var(--ease),
    transform 900ms var(--ease);
}
#eyebrow {
  margin: 0 0 calc(var(--space-xs) * var(--u));
  color: var(--ink-sub);
  font-size: clamp(12px, calc(var(--type-label) * var(--u)), 34px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(calc(14 * var(--u)));
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
#eyebrow.in { opacity: 1; transform: translateY(0); }

#lines { margin: 0; font-weight: var(--weight-black); line-height: 1.24; letter-spacing: -0.01em; }
#lines .line { display: block; white-space: nowrap; }
#lines .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(calc(18 * var(--u)));
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
/* 1文字ずつ。刻み 40ms は映像側と同じ（Motion Atlas の character-stagger） */
#lines .line.in .ch { opacity: 1; transform: translateY(0); }

#answer {
  margin: 0 0 calc(var(--space-xs) * var(--u) * 0.6);
  color: var(--accent);
  font-weight: var(--weight-black);
  line-height: 1.2;
  opacity: 0;
  transform: translateY(calc(16 * var(--u)));
  transition: opacity 650ms var(--ease), transform 650ms var(--ease);
}
#answer.in { opacity: 1; transform: translateY(0); }

/* 構図ごとの置き場所 ------------------------------------------------------- */

/*
 * 導入。人が右に立ち、言葉が左。
 *
 * 最初は «見出しを人の真後ろへ回す» ようにしたが、それだと読ませたい言葉が
 * 人にほとんど隠れた（見えていたのは各行の1文字目だけ）。
 * 重ねるのは «文字の末尾が人の肩に潜る» 程度でいい。
 * 重なっていること自体が «同じ空間に居る» という手触りを作るので、量は要らない。
 */
.stage-center #type {
  left: 7%; right: 30%; top: 50%;
  transform: translateY(-50%);
  text-align: left;
  width: auto;
}
.stage-center #lines { font-size: clamp(28px, 5.6vw, 88px); }

/* 横。人が左、文字が右 */
.stage-side #type, .stage-compact #type {
  left: 44%; right: 5%; top: 46%;
  transform: translateY(-50%);
  text-align: left;
  width: auto;
}
.stage-side #lines { font-size: clamp(26px, 4.6vw, 72px); }
.stage-compact #lines { font-size: clamp(22px, 3.4vw, 54px); }
.stage-compact #answer { font-size: clamp(26px, 4.4vw, 66px); }
.stage-compact #type { top: 38%; }

/* ---------------------------------------------------------------------------
   UI。選択肢とCTA
   --------------------------------------------------------------------------- */

#ui {
  position: absolute;
  left: 44%; right: 5%; bottom: 16svh;
  z-index: 4;
}
.stage-center #ui { left: 7%; right: 30%; }

#choices { display: grid; gap: calc(var(--gutter) * var(--u)); grid-template-columns: repeat(3, 1fr); }
#choices.gone { pointer-events: none; }

.choice {
  appearance: none;
  border: 2px solid var(--rule);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-family: inherit;
  font-weight: var(--weight-bold);
  font-size: clamp(15px, calc(var(--type-micro) * var(--u) * 0.95), 27px);
  letter-spacing: 0.01em;
  padding: clamp(20px, calc(var(--space-s) * var(--u) * 0.8), 34px) 10px;
  min-height: 70px;
  cursor: pointer;
  /* 出るときは «人がいる側から» 立ち上がる */
  opacity: 0;
  transform: translate(calc(-14 * var(--u)), calc(22 * var(--u))) scale(0.97);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
    border-color 240ms var(--ease), background 240ms var(--ease), box-shadow 240ms var(--ease);
}
#choices.on .choice { opacity: 1; transform: translate(0, 0) scale(1); }
#choices.on .choice:nth-child(1) { transition-delay: 0ms; }
#choices.on .choice:nth-child(2) { transition-delay: 110ms; }
#choices.on .choice:nth-child(3) { transition-delay: 220ms; }
#choices.gone .choice { opacity: 0; transform: translateY(calc(-10 * var(--u))) scale(0.98); transition-delay: 0ms; }

.choice:hover, .choice:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent));
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent);
  transform: translateY(-3px);
  outline: none;
}
.choice:active { transform: translateY(1px) scale(0.99); }
.choice.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: ring 700ms var(--ease) 1;
}
@keyframes ring {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  to   { box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.choice:disabled { cursor: default; }
.choice:disabled:not(.selected) { opacity: 0.28; }

/* CTA */

#cta {
  opacity: 0; transform: translateY(calc(20 * var(--u)));
  pointer-events: none; max-height: 0; overflow: hidden;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease), max-height 800ms var(--ease);
}
#cta.on { opacity: 1; transform: translateY(0); pointer-events: auto; max-height: 70svh; }

.cta-note {
  margin: 0 0 calc(var(--space-xs) * var(--u));
  color: var(--ink-sub);
  font-size: clamp(12px, calc(var(--type-micro) * var(--u) * 0.62), 18px);
  line-height: 1.7;
}
.cta-button, #form button[type='submit'] {
  appearance: none; width: 100%; border: 0; border-radius: 14px;
  background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-weight: var(--weight-black);
  font-size: clamp(16px, calc(var(--type-label) * var(--u) * 0.8), 28px);
  padding: clamp(15px, calc(var(--space-xs) * var(--u)), 24px);
  cursor: pointer;
  box-shadow: 0 14px 40px -16px color-mix(in srgb, var(--accent) 85%, transparent);
  transition: transform 240ms var(--ease), filter 240ms var(--ease), box-shadow 240ms var(--ease);
}
.cta-button:hover, #form button[type='submit']:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  box-shadow: 0 20px 50px -16px color-mix(in srgb, var(--accent) 90%, transparent);
}
.cta-button:active, #form button[type='submit']:active { transform: translateY(1px); }

#form { display: none; flex-direction: column; gap: calc(var(--space-xs) * var(--u)); margin-top: calc(var(--space-xs) * var(--u)); }
#cta.open #form { display: flex; }
#cta.open .cta-button { display: none; }
#form label { display: flex; flex-direction: column; gap: 6px; }
#form span { color: var(--ink-sub); font-size: clamp(11px, calc(var(--type-micro) * var(--u) * 0.56), 15px); }
#form input {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 2px solid var(--rule); border-radius: 12px; color: var(--ink);
  font-family: inherit; font-size: clamp(15px, calc(var(--type-micro) * var(--u) * 0.7), 20px);
  padding: clamp(11px, calc(var(--space-xs) * var(--u) * 0.7), 18px);
}
#form input:focus { border-color: var(--accent); outline: none; }
.form-note { margin: 0; color: var(--ink-sub); font-size: clamp(10px, calc(var(--type-micro) * var(--u) * 0.5), 14px); }

#done { display: none; flex-direction: column; gap: 8px; }
#cta.done #done { display: flex; }
#cta.done #form, #cta.done .cta-button, #cta.done .cta-note { display: none; }
#done strong { font-size: clamp(17px, calc(var(--type-label) * var(--u) * 0.8), 28px); }
.done-sub { color: var(--ink-sub); font-size: clamp(12px, calc(var(--type-micro) * var(--u) * 0.62), 18px); }

/* ---------------------------------------------------------------------------
   字幕。箱を付けない。地の暗がりの上に置く
   --------------------------------------------------------------------------- */

#caption {
  position: absolute; left: 0; right: 0; bottom: 7svh;
  z-index: 5; text-align: center; pointer-events: none;
  padding: 0 5vw;
}
#caption span {
  display: inline-block;
  font-size: clamp(14px, 1.85vw, 27px);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  color: #fff;
  /*
   * 箱は付けない。箱を付けた瞬間に «動画の字幕» になる。
   * 代わりに暗い輪郭を四重に重ねる。人物の白い服の上でも読めて、
   * かつ «帯» としては見えない。
   */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(0, 0, 0, 0.85),
    0 2px 4px rgba(0, 0, 0, 1);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
#caption span.in { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------------
   起動の一枚
   --------------------------------------------------------------------------- */

#cover {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0.55) 0%, rgba(10, 11, 15, 0.86) 60%, rgba(10, 11, 15, 0.97) 100%);
  transition: opacity 800ms var(--ease);
}
#cover.gone { opacity: 0; pointer-events: none; }
.cover-inner { text-align: center; max-width: 760px; }
.cover-eyebrow { margin: 0 0 18px; color: var(--ink-sub); letter-spacing: 0.16em; font-size: clamp(11px, 1.5vw, 15px); }
#cover h1 { margin: 0; font-size: clamp(32px, 7vw, 84px); line-height: 1.22; font-weight: var(--weight-black); }
.cover-sub { margin: 20px 0 40px; color: var(--ink-sub); font-size: clamp(14px, 2.2vw, 21px); line-height: 1.7; }
#start {
  appearance: none; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-family: inherit; font-weight: var(--weight-black);
  font-size: clamp(16px, 2.2vw, 21px); padding: 18px 46px;
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  box-shadow: 0 16px 44px -18px color-mix(in srgb, var(--accent) 90%, transparent);
  transition: transform 240ms var(--ease), filter 240ms var(--ease), opacity 300ms;
}
#start[disabled] { opacity: 0.35; cursor: default; }
#start:not([disabled]):hover { filter: brightness(1.08); transform: translateY(-2px); }
#start:active { transform: translateY(1px); }
.start-icon { width: 0; height: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.cover-load { margin: 22px 0 0; color: var(--ink-sub); font-size: 13px; min-height: 1.2em; }
.cover-load.hidden { visibility: hidden; }

/*
 * 起動の一枚に立っている人。
 * 押す前から «そこに居る» ので、押した瞬間に «動画が始まった» という切れ目が出ない。
 * 文字の後ろに回して、主役は言葉のほうに置く。
 */
.cover-figure {
  position: absolute;
  left: 50%; bottom: -6svh;
  height: 74svh;
  transform: translateX(-50%);
  opacity: 0.16;
  pointer-events: none;
  z-index: -1;
  filter: grayscale(0.25);
}

/* CTA が開いているあいだは、人が一歩下がって言葉に場所を譲る */
body.cta-open #figure {
  transform: translate(-50%, -50%) scale(calc(var(--fig-scale) * 0.88)) translateX(-8%);
  opacity: 0.92;
}
body.cta-open #type { opacity: 0.9; }

/* ---------------------------------------------------------------------------
   試作を確かめるための道具
   --------------------------------------------------------------------------- */

#harness {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: rgba(10, 11, 15, 0.7);
  border-top: 1px solid var(--rule);
  font-size: 11px; color: var(--ink-sub);
}
#harness button {
  appearance: none; background: transparent; border: 1px solid var(--rule);
  border-radius: 999px; color: var(--ink-sub); font-family: inherit; font-size: 11px;
  padding: 5px 11px; cursor: pointer;
}
#harness button:hover { border-color: var(--accent); color: var(--ink); }
#driver { margin-left: auto; opacity: 0.7; font-size: 10px; }
#log {
  position: fixed; left: 0; right: 0; bottom: 34px; max-height: 40svh; overflow: auto;
  margin: 0; padding: 12px; background: rgba(0, 0, 0, 0.93); border-top: 1px solid var(--rule);
  color: var(--ink-sub); font-size: 11px; line-height: 1.7; z-index: 29; white-space: pre-wrap;
}

/* ---------------------------------------------------------------------------
   縦長の画面
   人の位置はノードごとの指定ではなく、縦向きの並びへ置き換える
   --------------------------------------------------------------------------- */

/*
 * 縦長の画面。
 *
 * 横位置で構図を作る余地が無いので、絶対配置はやめて «縦一列» に組み替える。
 * 絶対配置のままにしたら、選択肢が人物の胸から下を覆った。
 *
 * 人の枠を flex:1 にしてあるので、選択肢やCTAが出ると人が自動で小さくなる。
 * 横向きの画面で «人が横へ寄って場所を空ける» のと同じことが、縦では «縮んで空ける» になる。
 */
@media (max-width: 760px), (orientation: portrait) {
  #scene {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4svh 5vw calc(5svh + 34px);
    gap: 2svh;
  }
  /*
   * 構図の指定（.stage-side #type など）はクラス付きなので優先度が高い。
   * 打ち消すほうも同じ形で書かないと効かない。
   * 最初 #type だけで書いて効かず、見出しが画面の上へ 32px はみ出していた。
   */
  .stage-center #type, .stage-side #type, .stage-compact #type,
  .stage-center #ui, .stage-side #ui, .stage-compact #ui,
  #figure, #caption {
    position: static;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    width: auto;
  }

  .stage-center #type, .stage-side #type, .stage-compact #type {
    flex: 0 0 auto; text-align: center; transition: none;
  }
  #eyebrow { margin-bottom: 8px; }
  .stage-center #lines, .stage-side #lines { font-size: clamp(25px, 7.6vw, 44px); }
  .stage-compact #lines { font-size: clamp(20px, 6vw, 34px); }
  .stage-compact #answer { font-size: clamp(24px, 7.4vw, 40px); }

  /* 人。余った縦を全部使う。選択肢が出れば、その分だけ縮む */
  #figure {
    flex: 1 1 auto;
    min-height: 22svh;
    aspect-ratio: auto;
    height: auto;
    transform: scale(var(--fig-scale));
    transform-origin: 50% 100%;
    transition: transform 900ms var(--ease);
  }
  #figure .node-video { object-fit: contain; object-position: center bottom; }
  #figure::after { bottom: 0; width: 40%; height: 3%; }

  /* 並びは 見出し → 人 → 字幕 → 選択肢。字幕をボタンの下に置かない */
  #type { order: 1; }
  #figure { order: 2; }
  #caption { order: 3; flex: 0 0 auto; padding: 0 2vw; }
  #caption span { font-size: clamp(14px, 4vw, 19px); }

  .stage-center #ui, .stage-side #ui, .stage-compact #ui { order: 4; flex: 0 0 auto; }
  #choices { grid-template-columns: 1fr; gap: 10px; }
  .choice { min-height: 56px; padding: 15px 10px; font-size: clamp(15px, 4.4vw, 20px); }
  .cta-button, #form button[type='submit'] { font-size: clamp(16px, 4.6vw, 21px); }
  .cta-note { font-size: clamp(12px, 3.4vw, 15px); }

  #harness { font-size: 10px; padding: 5px 10px calc(5px + env(safe-area-inset-bottom)); }
  #harness button { font-size: 10px; padding: 4px 9px; white-space: nowrap; }
  #driver { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .cover-figure { height: 56svh; bottom: -3svh; }
}

@media (prefers-reduced-motion: reduce) {
  #bg .b1, #bg .b2 { animation: none; }
  * { transition-duration: 1ms !important; }
}