/* ==========================================================================
   motion.css —— 动画初始态 / 分割文字 / 降级规则
   规则：初始态写在 CSS（防闪烁 FOUC），运动过程交给 GSAP。
   ========================================================================== */

/* 引擎接管前先隐藏，避免"先看到内容再跳一下"的闪烁 */
html.m-ready .m-fx { visibility: visible; }
.m-fx { will-change: transform, opacity; }

/* 文字分割：外层裁切，内层位移，做出"从帘子后升起"的效果 */
.m-line { display: block; overflow: hidden; }
.m-char, .m-word { display: inline-block; will-change: transform, opacity; }
.m-word { white-space: pre; }
.m-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }

/* 图片视差：内层需比容器高，才有位移空间 */
[data-parallax] { overflow: hidden; }
[data-parallax] > * { will-change: transform; }

/* clip 揭幕初始态。
   用 html.m-js 限定：只有引擎确实接管了才隐藏，
   否则（JS 挂了 / GSAP 没加载）内容照常可见，不会白块。 */
html.m-js [data-fx="clip"] { clip-path: inset(0 0 100% 0); }

/* 页面首次进入前锁定滚动（Loading 期间） */
body.is-locked { overflow: hidden; height: 100svh; }

/* hover 时给光标放大的元素统一标记 */
[data-cursor="big"] { cursor: none; }

/* ---------- 无障碍降级：系统开启"减弱动态效果"时直接呈现终态 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .m-fx, .m-char, .m-word, .m-line > * {
    opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important;
  }
  [data-fx="clip"] { clip-path: none !important; }
  .loader { display: none !important; }
  .marquee__g { transform: none !important; }
  .cur, .cur-d { display: none !important; }
}

/* ---------- 低端设备降级：JS 检测后给 html 加 .m-lite ---------- */
html.m-lite .hero__glow { filter: blur(20px); opacity: .65; }
html.m-lite .cta__glow { filter: none; opacity: .8; }
html.m-lite .cur, html.m-lite .cur-d { display: none; }
html.m-lite .bx::before { display: none; }   /* 关掉 Bento 光晕跟随，省重绘 */
html.m-lite .rail, html.m-lite .topbar { backdrop-filter: none; }

/* ---------- 本站补充的无障碍降级 ----------
   Sticky 堆叠与横向 pin 在无动画时会"叠死"或看不全，这里改成静态可读排布 */
@media (prefers-reduced-motion: reduce) {
  .stack__item { position: static !important; }
  .gal__vp { height: auto !important; padding-block: 60px; }
  .gal__track { overflow-x: auto; padding-bottom: 14px; }
  .hero { min-height: auto; padding-block: 130px 0; }
  .cta { min-height: auto; padding-block: 110px; }
  .loader { display: none !important; }
}