/* ===== Enhanced Animations ===== */
@keyframes pageEnter{0%{opacity:0;transform:translateY(20px) scale(.98);filter:blur(4px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes pageExit{0%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-10px);filter:blur(2px)}}
@keyframes cardReveal{0%{opacity:0;transform:translateY(28px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes typingWave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
@keyframes sendPulse{0%{transform:scale(1)}30%{transform:scale(.9)}60%{transform:scale(1.1);box-shadow:0 0 20px rgba(0,82,217,.4)}100%{transform:scale(1);box-shadow:0 4px 12px rgba(0,82,217,.35)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes navIndicatorSlide{0%{opacity:0;transform:scaleY(.5)}100%{opacity:1;transform:scaleY(1)}}
@keyframes wizStepEnter{0%{opacity:0;transform:translateX(40px) scale(.97)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes wizStepExit{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-30px) scale(.97)}}
@keyframes wizStepEnterRev{0%{opacity:0;transform:translateX(-40px) scale(.97)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes wizStepExitRev{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(30px) scale(.97)}}
@keyframes welcomeExit{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92) translateY(16px);filter:blur(6px)}}
@keyframes wizardSectionEnter{0%{opacity:0}100%{opacity:1}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes msgFadeUp{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
@keyframes msgUserLaunch{0%{opacity:0;transform:translateY(12px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* === Auth icon float & glow === */
@keyframes authIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes authIconGlow{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.12);opacity:1}}
@keyframes authIconRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* === 龙虾能量场 — 脉冲环扩散 === */
@keyframes energyPulse{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.6;border-color:rgba(0,82,217,.3)}
  40%{opacity:.35;border-color:rgba(61,128,255,.2)}
  100%{transform:translate(-50%,-50%) scale(1.8);opacity:0;border-color:rgba(163,196,255,.05)}
}
/* === 超远脉冲环 — 扩散更远、渐变到冰蓝 === */
@keyframes energyPulseFar{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.4;border-color:rgba(61,128,255,.2)}
  30%{opacity:.25;border-color:rgba(110,161,255,.15)}
  100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;border-color:rgba(163,196,255,.02)}
}
/* === 超远波纹 — 从中心辐射至面板边缘 === */
@keyframes farRipple{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:.35;border-color:rgba(0,82,217,.15)}
  30%{opacity:.2;border-color:rgba(61,128,255,.12)}
  60%{opacity:.1;border-color:rgba(163,196,255,.08)}
  100%{transform:translate(-50%,-50%) scale(1.8);opacity:0;border-color:rgba(163,196,255,.02)}
}
/* === 粒子轨道旋转 === */
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* === 底部倒影光斑联动浮动 === */
@keyframes reflectionPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1)}
  50%{opacity:.9;transform:translateX(-50%) scaleX(1.15)}
}
/* === Liquid Glass 边缘色散旋转 === */
@keyframes liquidEdgeShift{
  from{filter:hue-rotate(0deg)}
  to{filter:hue-rotate(360deg)}
}
/* === Caustics 光影斑驳 —— 自由漂浮轨迹 === */
@keyframes causticDrift1{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  25%{transform:translate(60px,40px) scale(1.1) rotate(5deg)}
  50%{transform:translate(30px,80px) scale(.95) rotate(-3deg)}
  75%{transform:translate(-40px,30px) scale(1.05) rotate(4deg)}
  100%{transform:translate(0,0) scale(1) rotate(0deg)}
}
@keyframes causticDrift2{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  30%{transform:translate(-50px,-30px) scale(1.08) rotate(-6deg)}
  60%{transform:translate(-20px,50px) scale(.92) rotate(3deg)}
  100%{transform:translate(0,0) scale(1) rotate(0deg)}
}
@keyframes causticDrift3{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  20%{transform:translate(40px,-50px) scale(1.12) rotate(8deg)}
  50%{transform:translate(-30px,-20px) scale(.9) rotate(-5deg)}
  80%{transform:translate(20px,40px) scale(1.06) rotate(3deg)}
  100%{transform:translate(0,0) scale(1) rotate(0deg)}
}
@keyframes causticDrift4{
  0%{transform:translate(0,0) scale(1)}
  35%{transform:translate(50px,-40px) scale(1.05)}
  65%{transform:translate(-30px,30px) scale(.95)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes causticDrift5{
  0%{transform:translate(0,0) scale(1) rotate(0deg)}
  30%{transform:translate(-35px,25px) scale(1.1) rotate(-4deg)}
  70%{transform:translate(25px,-35px) scale(.93) rotate(6deg)}
  100%{transform:translate(0,0) scale(1) rotate(0deg)}
}
@keyframes causticDrift6{
  0%{transform:translate(0,0) scale(1)}
  40%{transform:translate(45px,35px) scale(1.08)}
  70%{transform:translate(-25px,-20px) scale(.94)}
  100%{transform:translate(0,0) scale(1)}
}
/* === Caustics 呼吸明灭 —— 与能量场同步 4 秒周期 === */
/* 亮色模式默认振幅更大：0.35 → 1.0 */
@keyframes causticBreath{
  0%,100%{opacity:var(--cb-lo,.35)}
  50%{opacity:var(--cb-hi,1)}
}
/* === 按钮锚定光斑 —— 小幅环绕运动 === */
@keyframes kwOrbit1{
  0%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(0,0)}
  25%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(20px,-15px)}
  50%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(-10px,-25px)}
  75%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(-20px,10px)}
  100%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(0,0)}
}
@keyframes kwOrbit2{
  0%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(0,0)}
  25%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(-15px,-20px)}
  50%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(15px,-10px)}
  75%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(10px,18px)}
  100%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(0,0)}
}
@keyframes kwOrbit3{
  0%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(0,0)}
  25%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(18px,12px)}
  50%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(-12px,20px)}
  75%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(-18px,-8px)}
  100%{transform:translate(var(--kw-x,0),var(--kw-y,0)) translate(0,0)}
}
/* === AdClaw 自发光呼吸 === */
@keyframes brandGlowBreath{
  0%,100%{opacity:.35;filter:blur(12px)}
  50%{opacity:.65;filter:blur(16px)}
}
/* === 登录 → Onboarding 共享光影过渡 Keyframes === */
@keyframes authRightSlideOut{
  0%{transform:translateX(0);opacity:1}
  60%{opacity:0}
  100%{transform:translateX(100px);opacity:0}
}
@keyframes authBrandDissolve{
  0%{opacity:1;transform:scale(1);filter:blur(0)}
  100%{opacity:0;transform:scale(.88);filter:blur(12px)}
}
@keyframes authLeftFadeBg{
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes authFinalFade{
  0%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
/* Onboarding 入场：欢迎卡片从深处浮现 */
@keyframes obCardEmerge{
  0%{opacity:0;transform:scale(.9) translateY(30px);filter:blur(8px)}
  60%{filter:blur(0)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
.page-content.page-entering{animation:pageEnter .4s var(--ease-spring) both}
.page-content.page-exiting{animation:pageExit .2s var(--ease-spring) both}
.card-animated{animation:cardReveal .4s var(--ease-spring) both}
.card-animated:nth-child(1){animation-delay:0s}.card-animated:nth-child(2){animation-delay:.06s}.card-animated:nth-child(3){animation-delay:.12s}.card-animated:nth-child(4){animation-delay:.18s}.card-animated:nth-child(5){animation-delay:.24s}.card-animated:nth-child(6){animation-delay:.3s}