/* 显影 · 动效 token 层
   只放变量与通用入场基类，不写任何组件样式。 */

:root {
  /* 时长（5 档，不再增加）*/
  --dur-1: 220ms;   /* 按钮、链接、下划线等即时反馈 */
  --dur-2: 480ms;   /* 卡片悬停、图注跟随 */
  --dur-3: 800ms;   /* 文字与图注入场 */
  --dur-4: 1200ms;  /* 图片显影 */
  --dur-5: 1600ms;  /* 章节级编排 */

  /* 缓动（两个 + 一个线性）*/
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* 入场：快出慢收 */
  --ease-ui: cubic-bezier(0.4, 0, 0.2, 1);         /* 小控件状态切换 */
  --ease-scrub: linear;                             /* 滚动进度映射 */

  /* 幅度 */
  --rise: 18px;        /* 入场位移上限 */
  --scale-in: 1.03;    /* 图片入场缩放上限 */
  --stagger: 70ms;     /* 同组逐个入场的间隔 */
}

/* 通用入场基类：
   由 JS 在元素将入视口前添加 .u-rise，进入视口后加 .is-in 复原。
   类名由 JS 添加，未启用 JavaScript 时内容始终可见（渐进增强）。 */
.u-rise {
  opacity: 0;
  transform: translateY(var(--rise));
  filter: blur(6px);
  transition:
    opacity var(--dur-3) var(--ease-out-expo),
    transform var(--dur-3) var(--ease-out-expo),
    filter var(--dur-3) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

.u-rise.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* 统一降级：所有动效在减少动态偏好下静态呈现 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .u-rise {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}