/* ============================================================
   心岛 v1.0 · 转场层（全作只有两种转场，方案 §1.5）
   ------------------------------------------------------------
   1. 静默交叉淡入 —— 屏 1→2、2→3、3→4、6→退出
      实现在 tokens.css 的 .screen.active（620ms）
   2. 过曝转场    —— 仅 屏 4→5、屏 5→6
      本文件实现。只用 2 次，正因为只用 2 次它才有分量。
      它标记全流程仅有的两次空间跨越（到达苍鹭岛 / 离开苍鹭岛）。
      转场编码信息，不是装饰。

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

/* ------------------------------------------------------------
   1. 静默交叉淡入
   tokens.css 的 .screen 是 display:none/block —— 只靠它切屏，旧屏会
   在同一帧消失，中间露出 body 底色，"交叉"就不存在了。
   这里补上离场态：新屏在上面淡入，旧屏原样留着当底，620ms 后撤掉。
   全程没有任何一帧是空的。
   ------------------------------------------------------------ */

.screen.active  { z-index: 2; }
.screen.leaving {
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------
   2. 过曝转场
   ------------------------------------------------------------ */

/* 过曝层：全屏，永远在最上，永远不吃鼠标 */
.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  background-color: var(--light-core);
}

/* 880ms 总长 = 280ms 过曝 + 200ms 压到暗 + 400ms 退出
   百分比：280/880 = 31.8%   480/880 = 54.5% */
.flash.firing {
  animation: flash-over var(--t-flash) linear forwards;
}

@keyframes flash-over {
   0%    { opacity: 0; background-color: var(--light-core); }
  31.8%  { opacity: 1; background-color: var(--light-core); }
  54.5%  { opacity: 1; background-color: var(--ink-deep); }
  100%   { opacity: 0; background-color: var(--ink-deep); }
}

/* reduced-motion 下 tokens.css 会把动画压到 .01ms。
   过曝转场是"信息"不是"装饰"，压掉动画后仍要留住一次可感知的黑场，
   否则屏 4→5 的空间跨越在语义上就丢了。
   这里用一个不依赖 animation 的兜底：短暂盖一层暗底。 */
@media (prefers-reduced-motion: reduce) {
  .flash.firing {
    /* 必须显式关掉 animation：tokens.css 只把时长压到 .01ms，
       动画名还在，forwards 会把最终帧的 opacity:0 钉死，
       下面这条 opacity:1 就永远赢不了。 */
    animation: none;
    opacity: 1;
    background-color: var(--ink-deep);
    transition: opacity var(--t-quick) linear;
  }
  .flash.firing.clearing { opacity: 0; }
}