/* motion.css —— 配 motion.js 的动效样式。颜色只走 var(--vx-*)，本文件不写裸色值（色值入口仍只有 vx.css）。
 * 铁律：一切"先藏起来再出现"的起始态都只在 html.vx-js 下生效——motion.js 没跑（断网坏文件、禁用 JS、打印）时内容原样可见。
 * 终态三道门：prefers-reduced-motion、html.vx-static（VXMotion.renderStatic() 加的）、无 JS——三者都直接显示终态。
 */

/* ── data-vx-stagger：子元素依次入场 ── */
html.vx-js [data-vx-stagger]:not(.vx-done)>*{
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--vx-i,0)*var(--vx-gap,90ms))}
html.vx-js [data-vx-stagger]:not(.vx-in)>*{opacity:0;transform:translateY(var(--vx-shift,18px))}
[data-vx-stagger]>.vx-reveal{animation:none}

/* ── data-vx-draw：描线入场（motion.js 给目标设 pathLength=1） ── */
html.vx-js [data-vx-draw] .vx-draw-p,html.vx-js .vx-draw-p[data-vx-draw]{stroke-dasharray:1 1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.25,1) calc(var(--vx-i,0)*110ms)}
html.vx-js [data-vx-draw]:not(.vx-in) .vx-draw-p,html.vx-js .vx-draw-p[data-vx-draw]:not(.vx-in){stroke-dashoffset:1}

/* ── data-vx-count：等宽数字，滚动时不抖 ── */
[data-vx-count]{font-variant-numeric:tabular-nums}

/* ── data-vx-bg：canvas 垫在容器内容之下，不抢正文 ── */
.vx-bgfx{position:relative;isolation:isolate}
.vx-bgfx>.vx-bg-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  opacity:var(--vx-bg-alpha,.6)}

/* ── data-vx-marquee：无缝横滚，悬停暂停；无 JS / 静帧 / 减少动效时退化为换行平铺 ── */
[data-vx-marquee]{display:flex;flex-wrap:wrap;gap:var(--vx-marquee-gap,48px);align-items:center}
[data-vx-marquee].vx-on{display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--vx-ink) 7%,var(--vx-ink) 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,var(--vx-ink) 7%,var(--vx-ink) 93%,transparent)}
[data-vx-marquee] .vx-marquee-track{display:flex;align-items:center;gap:var(--vx-marquee-gap,48px);width:max-content}
html.vx-js [data-vx-marquee].vx-on .vx-marquee-track{animation:vx-marquee var(--vx-dur,30s) linear infinite}
[data-vx-marquee].vx-on:hover .vx-marquee-track,[data-vx-marquee].vx-on:focus-within .vx-marquee-track{animation-play-state:paused}
@keyframes vx-marquee{to{transform:translateX(calc(-50% - var(--vx-marquee-gap,48px)/2))}}

/* ── data-vx-tilt / data-vx-spotlight：悬停要有颜色变化＋动作变化（备忘录 #34） ── */
[data-vx-tilt],[data-vx-spotlight]{position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
[data-vx-tilt]:hover,[data-vx-spotlight]:hover{border-color:var(--vx-brand);transform:translateY(-4px);
  box-shadow:0 16px 36px color-mix(in oklab,var(--vx-brand) 20%,transparent)}
html.vx-js [data-vx-tilt]:hover{transform:perspective(900px) rotateX(var(--vx-rx,0deg)) rotateY(var(--vx-ry,0deg)) translateY(-4px)}
[data-vx-tilt]::before,[data-vx-spotlight]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(380px circle at var(--vx-mx,50%) var(--vx-my,50%),color-mix(in oklab,var(--vx-brand) 16%,transparent),transparent 65%)}
[data-vx-tilt]:hover::before,[data-vx-spotlight]:hover::before{opacity:1}

/* ── 终态 ── */
@media (prefers-reduced-motion: reduce){
  html.vx-js [data-vx-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
  html.vx-js .vx-draw-p{stroke-dashoffset:0!important;transition:none!important}
  [data-vx-marquee] .vx-marquee-track{animation:none!important;flex-wrap:wrap;width:auto}
  [data-vx-marquee] .vx-marquee-clone{display:none}
  [data-vx-tilt]:hover,[data-vx-spotlight]:hover,html.vx-js [data-vx-tilt]:hover{transform:none}
}
html.vx-static [data-vx-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
html.vx-static .vx-draw-p{stroke-dashoffset:0!important;transition:none!important}
html.vx-static [data-vx-marquee] .vx-marquee-track{animation:none!important;flex-wrap:wrap;width:auto}
html.vx-static [data-vx-marquee] .vx-marquee-clone{display:none}
html.vx-static [data-vx-marquee].vx-on{-webkit-mask-image:none;mask-image:none}