/* ============================================================
   心岛 v1.0 · 常驻层（跨屏共用）
   ------------------------------------------------------------
   1. 静音切换  —— 全作唯一允许存在的常规 UI 控件（方案 §1.6）
   2. 屏标题    —— ZCOOL KuaiLe 的笼子：应用标题 1 处 + 屏标题 6 处

   本文件不得出现任何字面 hex 值，全部走 tokens.css 的 var()。
   ============================================================ */

/* ------------------------------------------------------------
   0. 舞台
   出图规格是 1920×1080。凡是"贴在画面某一处"的东西 —— 门缝里的光、
   窗上的塔尖光、苍鹭站的位置 —— 都必须用**画面的坐标系**，
   不能用窗口的坐标系。否则窗口一换比例，光就从门缝上滑下去了。

   .stage 是一个恒为 16:9、按 cover 铺满窗口的盒子。
   把 SVG 场景和所有热区都放进去，它们的百分比坐标就恒等于出图坐标。
   ------------------------------------------------------------ */

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width:  max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));

  /* 修复 stacking-context bug：
     .stage 自身因 `translate` 已是 stacking context（隐式 z-index:auto）。
     但屏 2/5 的 .s*-img 占位 div 是 z-index:1，会盖住 auto 的 .stage，
     把 .stage 内的 .s*-hot / 苍鹭 SVG 一起锁在底下，蜜糖光就消失了。
     这里给 .stage 一个明确的 z-index + isolation：
       · z-index:2   保证 .stage（z=2）盖在 .s*-img（z=1）之上
       · isolation   让 .stage 内部创建独立的 stacking context 边界，
                     防止 .s*-hot / 苍鹭的 z-index 被外部意外层级污染
     不改 .s*-img 的 background-image:var(--src,none) 出图位逻辑。 */
  z-index: 2;
  isolation: isolate;
}

/* ------------------------------------------------------------
   1. 静音切换
   20×20，--air 描边，无填充。
   它有意长得不像按钮：没有底、没有边框、没有 hover 背景。
   常态 opacity .4 —— 在暗画面里几乎看不见，需要时才找得到。
   ------------------------------------------------------------ */

.mute {
  position: fixed;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 80;

  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--air);
  opacity: .4;
  cursor: pointer;

  transition: opacity var(--t-quick) var(--e-out);
}
.mute:hover,
.mute:focus-visible { opacity: .9; }

.mute svg { display: block; width: 20px; height: 20px; }

/* 有声：两道弧在，斜杠不在。静音：反过来。 */
.mute .slash { opacity: 0; transition: opacity var(--t-instant) linear; }
.mute .wave  { opacity: 1; transition: opacity var(--t-instant) linear; }
.mute.is-muted .slash { opacity: 1; }
.mute.is-muted .wave  { opacity: 0; }

/* ------------------------------------------------------------
   2. 屏标题
   ZCOOL KuaiLe 是这个字体家族里最"可爱"的一支，所以对它的处理是：
   大字距 + 低对比 + 只出现一下就走。它是章节名，不是 HUD。

   进屏 淡入 1.2s → 停 2.4s → 淡出 1.6s，总 5.2s 后画面上再无文字。
   屏 5 也照此办理 —— 对话开始时标题必须已经不在了。
   ------------------------------------------------------------ */

.screen-title {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;

  font-family: var(--font-display);
  font-size: var(--fs-screen);
  letter-spacing: var(--ls-screen);
  /* 大字距会把整块字往右推半格，这里补回来，让它真的居中 */
  text-indent: var(--ls-screen);
  line-height: 1.2;
  font-weight: 400;
  color: var(--air);

  opacity: 0;
}

.screen.active > .screen-title {
  animation: title-visit 5200ms var(--e-out) both;
}

@keyframes title-visit {
  0%   { opacity: 0;   letter-spacing: .34em; }
  23%  { opacity: .62; letter-spacing: var(--ls-screen); }   /* 1.2s */
  69%  { opacity: .62; letter-spacing: var(--ls-screen); }   /* +2.4s */
  100% { opacity: 0;   letter-spacing: .26em; }              /* +1.6s */
}

/* reduced-motion 下 tokens.css 会把动画压到 .01ms 并强制 iteration 1，
   带 both 的动画会把最终帧 opacity:0 钉死 —— 那样标题就永远看不见了。
   这里换一套无动画的表现：直接显示，5.2s 后由 JS 撤掉 .active 时自然消失。 */
@media (prefers-reduced-motion: reduce) {
  .screen.active > .screen-title {
    animation: none;
    opacity: .62;
    letter-spacing: var(--ls-screen);
    transition: opacity var(--t-quick) linear;
  }
  .screen.active > .screen-title.faded { opacity: 0; }
}

/* 窄屏：标题小一号，别撞到画面里的东西 */
@media (max-width: 820px) {
  .screen-title { font-size: 28px; top: 6%; }
}