/* ==========================================================================
   FX — 参考 React Bits 的动效组件（原生实现）：
   BlurText · ShinyText · GradientText · RotatingText · DecryptedText · CountUp
   SpotlightCard · MagicBento(边框光晕/粒子) · GlareHover · StarBorder · Magnet
   LogoLoop · ClickSpark · TiltedCard
   ========================================================================== */

/* BlurText：逐词模糊上浮 */
.blur-text .bw{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.35em);transition:opacity .7s var(--ease-out),filter .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i) * 70ms + var(--base,0ms))}
.blur-text.in .bw,.hero-slide.active .blur-text .bw{opacity:1;filter:none;transform:none}

/* ShinyText：文字高光扫过 */
.shiny{background:linear-gradient(110deg,currentColor 35%,hsl(0 0% 100%) 50%,currentColor 65%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shiny 3.6s linear infinite}
.shiny-on-light{background-image:linear-gradient(110deg,hsl(var(--muted-foreground)) 35%,hsl(var(--primary)) 50%,hsl(var(--muted-foreground)) 65%)}
@keyframes shiny{from{background-position:120% 0}to{background-position:-120% 0}}

/* GradientText：流动渐变 */
.grad-flow{background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--cyan)),hsl(230 100% 66%),hsl(var(--primary)));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gflow 8s linear infinite}
@keyframes gflow{to{background-position:300% 0}}

/* RotatingText：轮播词 */
.rotating{display:inline-grid;vertical-align:bottom;overflow:hidden;padding:0 .08em;border-radius:.18em}
.rotating>span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .7s var(--ease-out),opacity .5s;white-space:nowrap}
.rotating>span.on{transform:none;opacity:1}
.rotating>span.out{transform:translateY(-110%);opacity:0}
.rotating.pill{background:hsl(var(--primary));color:#fff;padding:0 .3em}

/* DecryptedText：等宽占位，防止抖动 */
.decrypt{font-variant-numeric:tabular-nums}
.decrypt .enc{color:hsl(var(--primary)/.65)}
.dark .decrypt .enc,.hero .decrypt .enc{color:hsl(var(--cyan)/.8)}

/* MagicBento：跟随指针的边框光晕 + 内部聚光 */
.magic{--mx:50%;--my:50%;--glow:0}
.magic::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(240px circle at var(--mx) var(--my),hsl(var(--primary)/.85),hsl(var(--cyan)/.4) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--glow);transition:opacity .35s;pointer-events:none;z-index:30}
.magic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx) var(--my),hsl(var(--primary)/.06),transparent 60%);opacity:var(--glow);transition:opacity .35s;pointer-events:none;z-index:29}
.bento-spot{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(closest-side,hsl(var(--primary)/.10),transparent);opacity:0;transition:opacity .4s;mix-blend-mode:multiply}
.spark-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:hsl(var(--primary));pointer-events:none;z-index:31;box-shadow:0 0 8px hsl(var(--primary)/.8)}

/* GlareHover：光泽扫过 */
.glare{position:relative;overflow:hidden}
.glare>.glare-l{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(-45deg,transparent 60%,hsl(0 0% 100%/.35) 70%,transparent 80%);background-size:250% 250%;background-position:-100% -100%;transition:background-position .9s var(--ease-out)}
.glare:hover>.glare-l{background-position:100% 100%}

/* StarBorder：沿边流动的星光描边按钮 */
.star-border{position:relative;display:inline-flex;border-radius:12px;padding:1px;overflow:hidden;isolation:isolate}
.star-border::before,.star-border::after{content:"";position:absolute;width:300%;height:50%;border-radius:50%;opacity:.9;z-index:-1;background:radial-gradient(circle,hsl(var(--cyan)),transparent 12%)}
.star-border::before{left:-250%;bottom:-12px;animation:starB 5s linear infinite alternate}
.star-border::after{right:-250%;top:-12px;animation:starT 5s linear infinite alternate}
.star-border>.btn{border:1px solid hsl(0 0% 100%/.12)}
@keyframes starB{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}
@keyframes starT{0%{transform:translateX(0);opacity:1}100%{transform:translateX(100%);opacity:0}}

/* LogoLoop：无缝滚动 */
.logo-loop{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logo-loop .track-l{display:flex;gap:16px;width:max-content;animation:marq 36s linear infinite}
.logo-loop:hover .track-l{animation-play-state:paused}

/* TiltedCard：3D 倾斜 */
.tilt{transform-style:preserve-3d;transition:transform .5s var(--ease-out);will-change:transform}

/* ClickSpark */
.click-spark{position:fixed;inset:0;pointer-events:none;z-index:150}

/* Aurora 背景（用于 CTA / 深色区） */
.aurora{position:absolute;inset:-20%;z-index:-1;filter:blur(60px);opacity:.75;background:conic-gradient(from 180deg at 50% 50%,hsl(222 100% 50%/.0),hsl(205 100% 55%/.55),hsl(230 100% 60%/.35),hsl(192 100% 50%/.45),hsl(222 100% 50%/.0));animation:aurora 18s linear infinite}
@keyframes aurora{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .blur-text .bw{opacity:1;filter:none;transform:none}
  .shiny,.grad-flow,.aurora,.logo-loop .track-l,.marq-row{animation:none}
}