/* motion.css — 進行度 --p の配管と、パララックスの土台
 *
 * 各シーン（[data-scene]）は進行度 --p（0→1）だけを受け取る。演出側の CSS は --p しか見ない。
 *   - CSS 経路: @supports (animation-timeline: view()) の中で scroll-driven animation が --p を動かす
 *   - JS 経路 : motion.js が rAF で --p をインラインに書く（@supports が偽のときだけ動く）
 *   - reduced motion / JS 無効: --p を 1 に固定して最終状態で静止
 *
 * data-range で「どの区間を 0→1 にするか」を選ぶ（motion.js の progress() と同じ定義）:
 *   (なし)   entry 0% → cover 40%   画面下端に入ってから、40% 進むまで
 *   contain  contain 0% → 100%      sticky シーン用。要素が画面を覆っている間
 *   exit     exit 0% → 100%         画面上端から抜けていく間（Hero 用）
 */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --scroll {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

[data-scene] { --p: 0; }

@keyframes drive-p { from { --p: 0; } to { --p: 1; } }
@keyframes drive-scroll { from { --scroll: 0; } to { --scroll: 1; } }

@supports (animation-timeline: view()) {
  [data-scene] {
    animation: drive-p linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  [data-range="contain"] { animation-range: contain 0% contain 100%; }
  [data-range="exit"]    { animation-range: exit 0% exit 100%; }

  .parallax {
    animation: drive-scroll linear both;
    animation-timeline: scroll(root);
  }
}

/* JS が無いときは全部「見えている」状態にする（テキストは常に DOM にある） */
.no-js [data-scene] { --p: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-scene], .parallax {
    --p: 1;
    --scroll: 0;
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ── 多層パララックス背景（目玉B） ─────────────────────────────
 * 層はすべて --scroll（0→1）を係数倍して translate3d するだけ。
 * background-attachment: fixed は iOS で破綻するので使わない。
 * --travel は最も速い層が全スクロールで動く距離の基準。
 */
.parallax {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --travel: 600px;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(124, 156, 255, 0.16), transparent 60%),
    linear-gradient(to bottom, var(--bg-2), var(--bg) 40%);
}
.parallax__layer {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(100% + var(--travel) * 1.3);
  will-change: transform;
  transform: translate3d(0, calc(var(--scroll) * var(--travel) * var(--speed) * -1), 0);
}
.parallax__svg { width: 100%; height: 100%; }

.parallax__layer--stars   { --speed: 0.1; opacity: 0.9; }
.parallax__layer--circuit {
  --speed: 0.3;
  opacity: 0.18;
  transform:
    translate3d(0, calc(var(--scroll) * var(--travel) * var(--speed) * -1), 0)
    rotate(calc(var(--scroll) * 2deg));
  transform-origin: 50% 40%;
}
.parallax__layer--grid {
  --speed: 0.6;
  background-image:
    linear-gradient(to right, rgba(124, 156, 255, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 156, 255, 0.10) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 85%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 85%);
}
.parallax__layer--glow {
  --speed: 1.2;
  /* 仕様は乗算合成だが、ほぼ黒の地に乗算しても見えないため screen で光らせている（README 参照） */
  mix-blend-mode: screen;
  background:
    radial-gradient(38% 30% at 30% 35%, rgba(124, 156, 255, 0.28), transparent 70%),
    radial-gradient(32% 26% at 72% 70%, rgba(165, 243, 252, 0.16), transparent 70%),
    radial-gradient(30% 24% at 55% 120%, rgba(196, 181, 253, 0.18), transparent 70%);
  filter: blur(24px);
}

/* モバイルは 2 層に落とす */
@media (max-width: 767px) {
  .parallax__layer--circuit, .parallax__layer--glow { display: none; }
  .parallax { --travel: 300px; }
}

/* exit 区間のシーン（Hero）は「--p: 1」だと消えてしまうので、静止状態は 0 にする */
.no-js [data-range="exit"] { --p: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-range="exit"] { --p: 0; }
  /* ロゴのワイプは最終状態（全部見えている）で止める。
     animation: none だけだと clip-path が 0% のまま＝ロゴが消えるので、明示的に開く */
  .wordmark__img { animation: none !important; clip-path: inset(0 0 0 0) !important; opacity: 1 !important; }
  .hero__sub, .hero__lead, .hero__cue span, .caret { animation: none !important; }
  .card__link { transform: none !important; transition: none !important; }
}