/* ==========================================================================
   fx.css —— 氛围层（雪、凝霜标题、烛光、墨迹、页面过场、声音开关）
   配套 assets/js/fx.js 与 assets/js/sound.js。只放这些效果自己的样式，
   不覆盖 site.css 的组件；类名统一 fx- 前缀。
   ========================================================================== */

/* ---------- 雪：画布垫在首屏图与文字之间 ---------- */
.fx-snow {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; pointer-events: none;
  will-change: transform; /* 独立图层，雪每帧变化不牵连底图和标题 */
}


/* ---------- 雪延伸：首屏下面那一区的顶部 ---------- */
.fx-drift-host { isolation: isolate; }
.fx-snow--drift { inset: 0 0 auto; height: min(62vh, 560px); z-index: 0; }
.fx-drift-host > .page { position: relative; z-index: 1; }

/* ---------- 首屏载入：一个编排好的时刻 ---------- */
.fx-intro .hero-tag,
.fx-intro .hero-title-en,
.fx-intro .hero-lede,
.fx-intro .hero-actions,
.fx-intro .hero-credit { opacity: 0; animation: fx-rise 1.4s var(--out) forwards; }
.fx-intro .hero-tag { animation-delay: .1s; }
.fx-intro .hero-title-en { animation-delay: 1.5s; }
.fx-intro .hero-lede { animation-delay: 1.85s; }
.fx-intro .hero-actions { animation-delay: 2.15s; }
.fx-intro .hero-credit { animation-delay: 2.6s; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 标题逐字凝霜：从模糊的冷光里凝出字形 */
.fx-frost { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(-6px) scale(1.05); animation: fx-frost 1.7s var(--out) forwards; }
@keyframes fx-frost {
  55% { opacity: 1; text-shadow: 0 0 34px rgba(236, 246, 250, .95); }
  to { opacity: 1; filter: none; transform: none; text-shadow: 0 0 40px rgba(159, 194, 212, .42); }
}

/* ---------- 烛光：概念稿上一层不规则摇曳的暖光 ---------- */
.fx-candle {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(28% 22% at 8% 50%, rgba(255, 190, 110, .32), transparent 70%),
    radial-gradient(26% 20% at 92% 34%, rgba(255, 190, 110, .26), transparent 70%);
  animation: fx-flicker 3.7s steps(1) infinite paused; /* 只动透明度；滚出视口就暂停 */
}
.fx-candle.is-on { animation-play-state: running; }
@keyframes fx-flicker { 0%, 100% { opacity: .85; } 9% { opacity: .62; } 11% { opacity: .9; } 37% { opacity: .74; } 39% { opacity: .95; } 71% { opacity: .68; } 74% { opacity: .88; } }

/* ---------- 墨迹：引句在滚到时一字一字写出 ---------- */
.fx-ink i { font-style: normal; opacity: 0; filter: blur(4px); transition: opacity .7s var(--ease), filter .9s var(--ease); }
.fx-ink.is-writing i { opacity: 1; filter: none; }

/* ---------- 页面过场：一层霜雾掠过 ---------- */
.fx-veil {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(18, 26, 33, .55), rgba(6, 9, 12, .96) 75%),
    var(--bg);
  opacity: 1; transition: opacity .55s var(--ease);
}
.fx-veil::after {
  content: ''; position: absolute; inset: 0;
  background-image: var(--tex); opacity: .05;
}
.fx-veil.is-gone { opacity: 0; }
.fx-veil.is-coming { opacity: 1; transition-duration: .32s; }

/* ---------- 声音开关：顶栏最右，一枚小图标 ---------- */
.fx-sound {
  display: grid; place-items: center; width: 34px; height: 34px; margin-left: 6px;
  border-radius: 50%; color: var(--text-3); border: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.fx-sound:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.fx-sound svg { width: 17px; height: 17px; }
.fx-sound .w { opacity: 0; transition: opacity .35s var(--ease); }
.fx-sound.is-on { color: var(--frost); border-color: rgba(159, 194, 212, .28); }
.fx-sound.is-on .w { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fx-intro .hero-tag, .fx-intro .hero-title-en, .fx-intro .hero-lede,
  .fx-intro .hero-actions, .fx-intro .hero-credit, .fx-frost { opacity: 1; animation: none; filter: none; transform: none; }
  .fx-candle { animation: none; }
  .fx-ink i { opacity: 1; filter: none; }
  .fx-veil { display: none; }
}