/* ============================================================
   de-cinematic.css — YAMATO Design Engine / Cinematic（scroll-world）tier
   de-cinematic.js とセット。JS が --cine-* を書き、CSSが描画する。
   「暗め・高彩度・単一パレット / 遅く滑らか / 余白」を土台トークン化。
   ============================================================ */

:root {
  /* シネマティック層の触感（R&D 7原則のうち「遅く滑らか」を定数化） */
  --cine-slow:   1100ms;                                   /* スローリビールの基準尺 */
  --cine-ease:   cubic-bezier(0.16, 1, 0.3, 1);            /* velvet（最後だけ静かに止まる） */
  --cine-ease-io: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 世界の単一パレット（上書き推奨。ここは中立の暗夜） */
  --cine-bg:     #0a0a12;
  --cine-ink:    #ece8df;                                  /* 文字は紙白でなく象牙 */
  --cine-accent: #c9a23f;                                  /* 金（副アクセント） */
}

/* ---- world: WebGL背景の置き場。canvasは敷き詰め、前景はz-indexで上に ---- */
.cine-world-host {
  position: relative;
  background: var(--cine-bg);
  isolation: isolate;
}
.cine-world-host > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.cine-world-host > :not(canvas) { position: relative; z-index: 1; }

/* WebGL不可/reduce 時のフォールバック（静的だが世界観は保つ） */
.cine-world-fallback {
  background:
    radial-gradient(120% 80% at 30% 10%, color-mix(in srgb, var(--cine-accent) 14%, transparent), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, color-mix(in srgb, var(--cine-bg) 0%, #1c1740) 35%, transparent 70%),
    var(--cine-bg);
}

/* ---- pin: 前景アンカー層（背景の上に静かに留まる） ----
   .cine-pin-track が背の高い区間、.cine-pin が貼り付く層。  */
.cine-pin-track { position: relative; }
.cine-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  opacity: var(--cine-anchor-a, 1);          /* fade:true のとき入口/出口でそっと */
  transition: opacity 240ms var(--cine-ease);
  will-change: opacity;
}

/* ---- parallax: 深度レイヤー ---- */
.cine-parallax {
  transform: translate3d(0, var(--cine-py, 0px), 0);
  will-change: transform;
}

/* ---- textSwap: 意味を背負う文字が入れ替わる ---- */
.cine-swap {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  transition: opacity var(--cine-slow) var(--cine-ease),
              filter   var(--cine-slow) var(--cine-ease),
              transform var(--cine-slow) var(--cine-ease);
  will-change: opacity, filter, transform;
}
.cine-swap.cine-swap-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ---- reveal: 進捗連動スローリビール（--cine-r 0..1 が像を立ち上げる） ---- */
.cine-reveal {
  opacity: var(--cine-r, 0);
  transform: translateY(calc((1 - var(--cine-r, 0)) * 26px));
  filter: blur(calc((1 - var(--cine-r, 0)) * 6px));
  will-change: opacity, transform, filter;
}

/* ---- 余白の作法（R&D「文章を詰めない・呼吸させる」）。任意ユーティリティ ---- */
.cine-breathe { padding-block: clamp(18vh, 26vh, 34vh); }
.cine-measure { max-width: 38rem; }

/* ---- アクセシビリティ：動きを減らす設定を尊重 ---- */
@media (prefers-reduced-motion: reduce) {
  .cine-parallax { transform: none !important; }
  .cine-swap, .cine-reveal {
    opacity: 1 !important; filter: none !important; transform: none !important;
    transition: none !important;
  }
  .cine-pin { position: static; min-height: auto; }
}