/* ============================================================================
   Reveal — 入场动效（属性即接口）
   ============================================================================
   🔴 一条规则撑六种表现
   ------------------------------------------------
        六个方向**共用同一个 transform 表达式**，只改三个变量：
            --reveal-x / --reveal-y / --reveal-scale
        没有一个方向单独写 keyframes —— 这是本组件唯一值得记住的设计。
        理由：keyframes 一多，缓动/时长/延迟就会各写一套，
             最后没有人能回答"为什么这个方向和那个方向节奏不一样"。

   🔴 无 JS 必须全可见（不是"尽量"）
   ------------------------------------------------
        隐藏**只在** `<html data-reveal-ready>` 存在时生效。
        这个标记由引擎在**接管之后**才加 ⇒ 没有 JS、JS 报错、IO 缺失时，
        内容就是普通内容：位置不偏、透明度为 1。
        ⇒ 所以本组件**不会**造成白屏，代价是"没有动效"。

   🔴 时长只走令牌，不写裸数值
   ------------------------------------------------
        var(--dur-base)  位移/展开（180ms）
        var(--dur-fast)  颜色/透明度（120ms，降级时用）
        var(--ease-out)  UI 默认缓动
        `05-audit/motion.py` 会查裸时长与自编曲线。

   🔴 位移上限 8px
   ------------------------------------------------
        作品集那种 24px 位移能把视线带着走；产品页信息密度高，
        大位移等于让用户"等它飘完"。8px 只够表达"从哪边来"。

   🔴 降级是分级，不是一刀切
   ------------------------------------------------
        prefers-reduced-motion 下：位移/缩放**关掉**（前庭不适的来源），
        只保留透明度，且缩到 --dur-fast。
        与全库那条 `0.01ms !important` 兜底的关系：本文件用自己的规则覆盖它，
        因为"关掉位移"不等于"关掉一切"。
   ========================================================================= */

/* `.reveal` 是契约里的根名（ai/components.json 的 rootClass 必须真实存在）。
   建议只用属性写法；这个类名是为了让契约与源码对得上，不引入第二套用法。 */
[data-reveal],
.reveal {
  --reveal-x: 0px;
  --reveal-y: 0px;
  --reveal-scale: 1;
  --reveal-delay: 0ms;
  transform: translate(var(--reveal-x), var(--reveal-y)) scale(var(--reveal-scale));
  transition-property: transform, opacity;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
  transition-delay: var(--reveal-delay);
}

/* ---- 六个方向：只改变量，不写 keyframes ---- */
[data-reveal="up"]    { --reveal-y:  8px; }
[data-reveal="down"]  { --reveal-y: -8px; }
[data-reveal="left"]  { --reveal-x:  8px; }
[data-reveal="right"] { --reveal-x: -8px; }
[data-reveal="scale"] { --reveal-scale: .97; }
[data-reveal="none"]  { --reveal-x: 0px; --reveal-y: 0px; --reveal-scale: 1; }

/* ---- 隐藏态：只有引擎接管后（html[data-reveal-ready]）才允许 ---- */
[data-reveal-ready] [data-reveal]:not([data-reveal-done]) {
  opacity: 0;
}

/* ---- 完成态：把三个变量归零 ⇒ 触发 transition ---- */
[data-reveal-ready] [data-reveal][data-reveal-done] {
  opacity: 1;
  --reveal-x: 0px;
  --reveal-y: 0px;
  --reveal-scale: 1;
}

/* ---- 分批（data-reveal-children）：间隔由引擎写成 --reveal-delay ---- */
[data-reveal-children] > * {
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---- 分级降级 ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none;
    transition-property: opacity;
    transition-duration: var(--dur-fast);
  }

  /* reduced 下**不隐藏**：内容直接出现。
     隐藏 + 等淡入也是"动"，对前庭敏感用户不是安慰。 */
  [data-reveal-ready] [data-reveal]:not([data-reveal-done]) {
    opacity: 1;
  }
}