/*
 * app/motion.css — 动效基建样式（架构契约 §41）
 *
 * 结构：先写「终态兜底」（媒体查询外），再把全部动画包进
 * @media (prefers-reduced-motion: no-preference)。
 * reduce 用户与不认识该媒体查询的老浏览器直接看到最终样子，绝不空屏。
 *
 * 公共接口（ritual 席等其他模块可复用，改名须同步全部消费方）：
 *   类：.reveal / .reveal-in（入场上移淡入，--reveal-delay 级联错峰）
 *       .lit（星点点亮：scale + 金色发光）
 *   keyframes：motion-flip-in（3D 翻转入场，翻牌用）
 *              motion-glow（金色发光脉冲，点亮/流光用）
 *   色值同源 app/style.css :root（--gold #d4af37 / --gold-soft #e8cf7a）。
 */

/* ---------- 终态兜底（媒体查询外：reduce 用户直接看到最终样子） ---------- */

.reveal {
  opacity: 1;
  transform: none;
}

.lit {
  opacity: 1;
  color: var(--gold-soft, #e8cf7a);
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.65);
}

/* ---------- 动画（仅在用户未要求减少动效时生效） ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* 入场：初始下移 14px 透明，加 .reveal-in 过渡到位；
     同容器子项设置 --reveal-delay: 80ms/160ms/... 级联错峰 */
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .reveal-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* 星点点亮：scale 弹出 + 金色发光 */
  .lit {
    animation: motion-light-up 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  }

  @keyframes motion-light-up {
    0% {
      opacity: 0.35;
      transform: scale(0.6);
      text-shadow: none;
    }
    60% {
      opacity: 1;
      transform: scale(1.25);
      text-shadow: 0 0 12px rgba(232, 207, 122, 0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
      text-shadow: 0 0 8px rgba(212, 175, 55, 0.65);
    }
  }

  /* 公共 keyframes：3D 翻转入场（ritual 席翻牌复用；
     父容器自设 perspective，如 perspective: 800px） */
  @keyframes motion-flip-in {
    0% {
      transform: rotateY(90deg);
      opacity: 0;
    }
    100% {
      transform: rotateY(0deg);
      opacity: 1;
    }
  }

  /* 公共 keyframes：金色发光脉冲（ritual 席五行流光/干支金光复用） */
  @keyframes motion-glow {
    0% {
      filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    }
    50% {
      filter: drop-shadow(0 0 10px rgba(232, 207, 122, 0.85));
    }
    100% {
      filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.35));
    }
  }
}