/* =========================================================
   动效系统（严格还原原站的运动设计）
   - 颗粒层：fixed SVG feTurbulence 噪点 + grain-jitter steps(6)
   - 高亮擦入：.hl 蓝色块 scaleX 擦入（滚动进场加 .in）
   - 字母板翻牌：.board[data-flap] 进场加 .fx，逐块 stagger 翻转
   - 区块淡入上移：[data-anim="up"] 进场加 .in
   - 无障碍：prefers-reduced-motion 全部降级为静态
   ========================================================= */

/* —— 颗粒层（与原站一致：feTurbulence baseFrequency .85 / numOctaves 3 / seed 7） —— */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 150;
  pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .1 0 0 0 0 .18 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: 1.2s steps(6, end) infinite grain-jitter;
  transition: opacity .5s;
}
[data-mode="dark"] .grain { opacity: 0; }

@keyframes grain-jitter {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-7%, 4%); }
  33%  { transform: translate(5%, -6%); }
  50%  { transform: translate(-4%, 7%); }
  66%  { transform: translate(8%, 2%); }
  83%  { transform: translate(-6%, -3%); }
  100% { transform: translate(0, 0); }
}

/* —— 高亮擦入（.hl：蓝色块从左侧 scaleX 擦入，文字转亮色） —— */
.hl {
  position: relative;
  display: inline-block;
  padding: 0 .06em;
  z-index: 0;
  color: var(--ink);
  transition: color .5s .35s;
}
.hl::before {
  content: "";
  position: absolute;
  inset: .04em 0 .02em;
  background: var(--blue);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: 0;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1) .15s;
}
.in .hl { color: var(--tilefg); }
.in .hl::before { transform: scaleX(1); }

/* —— 字母板翻牌（进场逐块翻转落位） —— */
.board .tile {
  transform: rotateX(92deg);
  transform-origin: bottom;
  opacity: 0;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease, background-color .5s;
}
.board.fx .tile {
  transform: rotateX(0);
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.board .tile.unsettled {
  background: var(--flap-wait);
  color: var(--blue);
}

/* —— 区块淡入上移 —— */
[data-anim="up"] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-anim="up"].in {
  opacity: 1;
  transform: none;
}

/* —— 无障碍：尊重系统的“减少动态效果” —— */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hl, .hl::before, .board .tile, [data-anim="up"] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .hl { color: var(--tilefg); }
  .hl::before { transform: scaleX(1); }
}

/* —— 揭示前的初始态（JS 未就绪时仍可见，避免空白） —— */
.no-js .hl { color: var(--tilefg); }
.no-js .hl::before { transform: scaleX(1); }
.no-js .board .tile { transform: none; opacity: 1; }
.no-js [data-anim="up"] { opacity: 1; transform: none; }

/* —— 移动端小屏：关闭噪点层跳动，消除整页“漂移”观感（保留静态纹理） —— */
@media (max-width: 860px) {
  .grain { animation: none; }
}