/* ==========================================================================
   首页滚动入场特效 (index.jsp)
   元素进入视口时淡入并轻微上移。只用 opacity / transform 做动画，
   不触发布局，因此不产生 CLS。

   隐藏态挂在 .reveal-ready 下——这个类由 index.jsp 里的一小段内联脚本在
   解析 <head> 时加到 <html> 上。没有 JS 时该类不存在，元素保持正常可见，
   内容永远不会因为脚本没加载而消失。
   尊重 prefers-reduced-motion：系统开启“减少动态效果”时不做位移与淡入。
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .reveal-ready .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* 纯淡入变体：给全出血的图片用，避免位移在边缘露出缝隙。 */
  .reveal-ready .reveal-fade {
    opacity: 0;
    transition: opacity 900ms ease-out;
  }

  .reveal-ready .reveal-fade.is-in {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .reveal,
  .reveal-ready .reveal-fade {
    opacity: 1;
    transform: none;
  }
}