/* ==========================================================================
   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(24px); opacity: .7; }
html.m-lite .cur, html.m-lite .cur-d { display: none; }
html.m-lite .card::before { display: none; }