@charset "utf-8";
/* =============================================================================
   MISSIONMAN v5 — 本編側に足したぶん
   ---------------------------------------------------------------------------
   Concept A の style.css は **1バイトも変えていない**。
   「上映されている感」を補強する追加だけをこのファイルへ隔離してある。
   ＝ 既存12種のモーションへの回帰が構造的に起こらない。

   足したもの（いずれも設定 motion.* で個別に無効化できる）:
     1. タイムコードの表示（スクロール量に連動）
     2. REEL の境界でフレームが1コマぶん横にずれる
     3. 映写ゲートの縦揺れ（送り穴の帯だけ・スクロール中だけ）
     4. カーソル位置でランプの光源がわずかに動く（PC・full のみ）
     5. 音声トグルの定位置

   足していないもの（意図的）:
     - 全画面の粒子オーバーレイ（既存のエイジング質感を上書きしてしまうため）
     - 既存12種への追加モーション
     - スクロールの乗っ取り・ピン留め
   ============================================================================= */

/* ============================================ ヒーローの引用（字面の調整）*/
/* 差し替えた本人の言葉は、以前のコピーより1行が長い（最長15文字）。
   --step-3 の下限 30px のままだと 320px で1行が収まらず、
   意味のまとまりの途中で折り返してしまう。
   **原文も改行位置も変えず**に収めるため、この見出しだけ字面を落とす。
   デザインの変更ではなく、コピーを原文のまま入れるための組版調整。
   （style.css は Concept A とバイト同一に保つため、ここに置く） */
/* 字面は「最長行（15文字）が折り返さない上限」から逆算している。
   小さくしすぎると、サイトで一番大きな文であるはずのこの見出しが
   セクション見出し（--step-2 = 22px〜）より小さくなり、階層が逆転する。
   6vw は 320px で約19px、390px で約23px。下の h2 より必ず大きい。 */
.hero-title--quote{
  font-size:clamp(19px,6vw,52px);
  max-width:16em;
}
@media (max-width:720px){
  .hero-title--quote{max-width:none}
}

/* ================================================= 0. 常設 HUD（隅の塊） */
/* タイムコードと音声を1つの塊にする。左右の隅へ散らすと本文の見出しに
   2箇所で重なる（2026-08-06 の実測で、ヒーロー見出しと衝突した）。
   常設のオーバーレイなので、既定の存在感は最小にし、触れたときだけ起こす。 */
.hud{
  position:fixed;z-index:56;
  inset-block-end:calc(env(safe-area-inset-bottom,0px) + clamp(12px,2vw,20px));
  inset-inline-end:clamp(12px,2vw,20px);
  display:flex;align-items:center;gap:.5em;
  opacity:.5;
  transition:opacity var(--mo-base) var(--mo-out);
}
.hud:hover,
.hud:focus-within{opacity:1}
@media (min-width:1180px){
  .hud{inset-inline-end:calc(var(--perf) + 12px)}   /* 送り穴の帯を避ける */
}
/* オープニング中は本編側の HUD を出さない（オーバーレイ内のものを使う） */
html[data-op-lock="1"] .hud{display:none}

/* ============================================ 1. タイムコード（上映位置） */
/* .slate-take と同じ組み。装飾なので aria-hidden、JS が動くときだけ出す。 */
.tc-hud[hidden]{display:none !important}
.tc-hud{
  display:flex;align-items:center;gap:.7em;
  padding:.34em .7em;
  background:rgba(15,16,19,.62);
  border:1px solid rgba(242,239,233,.16);
  color:var(--ag-ink-light);
  font-family:var(--cond);font-weight:700;
  font-size:var(--step--2);letter-spacing:.2em;text-transform:uppercase;
  line-height:1.2;
  pointer-events:none;
}
.tc-hud-r{
  padding:.14em .46em;
  background-color:var(--ag-amber);color:var(--ag-ink-dark);
  font-variant-numeric:tabular-nums;
}
.tc-hud-v{font-variant-numeric:tabular-nums;opacity:.8}
/* 明るい巻では暗い地の箱のままだと浮くので、縁だけ強める */
html[data-tone="paper"] .tc-hud,
html[data-tone="tan"] .tc-hud,
html[data-tone="cloud"] .tc-hud{border-color:rgba(242,239,233,.3)}
@media (max-width:400px){
  .tc-hud{letter-spacing:.12em;gap:.5em}
}

/* ================================================ 2. REEL 境界のコマずれ */
/* 巻を跨いだ瞬間、そのセクションだけが1コマぶん横に流れて戻る。
   transform だけで完結し、レイアウトを動かさない。 */
.reel[data-jolt="1"]{animation:reel-jolt 140ms steps(2,end) both}
@keyframes reel-jolt{
  0%  {transform:translate3d(calc(var(--jolt,2px) * -1),0,0)}
  50% {transform:translate3d(var(--jolt,2px),0,0)}
  100%{transform:none}
}

/* ============================================ 3. 映写ゲートの縦揺れ（帯のみ） */
/* 全画面を揺らすと本文が読みづらくなるため、動かすのは左右の送り穴の帯だけ。
   スクロールしているあいだだけ、±0.5px。 */
@media (min-width:1180px){
  html[data-js="on"][data-motion="full"][data-scrolling="1"] .perf{
    animation:gate-weave 900ms ease-in-out infinite;
  }
  @keyframes gate-weave{
    0%,100%{transform:translate3d(0,0,0)}
    30%    {transform:translate3d(.4px,-.5px,0)}
    64%    {transform:translate3d(-.3px,.4px,0)}
  }
}

/* ================================================ 4. ランプがカーソルを追う */
/* PC・full のみ。既存の地の色を塗り替えないよう、極めて薄く。 */
.lamp-fx{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:0;
  background:radial-gradient(46% 40% at var(--lx,50%) var(--ly,42%),
    rgba(242,239,233,.055) 0%,
    rgba(242,239,233,.018) 46%,
    rgba(242,239,233,0) 72%);
  transition:opacity var(--mo-slow) var(--mo-io);
}
html[data-lamp="on"] .lamp-fx{opacity:1}
/* 明るい巻では白い光は見えないので、影側へ振る */
html[data-tone="paper"] .lamp-fx,
html[data-tone="tan"] .lamp-fx,
html[data-tone="cloud"] .lamp-fx{
  background:radial-gradient(46% 40% at var(--lx,50%) var(--ly,42%),
    rgba(15,16,19,.05) 0%,
    rgba(15,16,19,.016) 46%,
    rgba(15,16,19,0) 72%);
}

/* ==================================================== 5. 音声トグルの定位置 */
/* 位置は .hud が持つ。ここは塊の中での見え方だけ。 */
.snd-fix{opacity:1;background:rgba(15,16,19,.62)}
@media (max-width:400px){
  .snd-fix{letter-spacing:.12em;padding-inline:.7em}
}
/* 狭い画面ではタイムコードを落とす。
   情報としての優先度は「音を切れること」の方が高い。 */
@media (max-width:520px){
  .tc-hud{display:none}
}

/* ================================================================ 動きの低減 */
@media (prefers-reduced-motion:reduce){
  .reel[data-jolt="1"]{animation:none !important;transform:none !important}
  .perf{animation:none !important;transform:none !important}
  .lamp-fx{display:none}
  /* タイムコードは「現在地」を示す情報なので残す。追従だけを即時にする */
  .tc-hud{transition:none}
}