/* ===== BAIKA PREMIUM ANIMATIONS ===== */

/* --- Custom Cursor --- */
.cursor-dot{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--neon-cyan);pointer-events:none;z-index:99999;transition:transform 0.1s ease;mix-blend-mode:screen}
.cursor-ring{position:fixed;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(0,183,255,0.4);pointer-events:none;z-index:99998;transition:width 0.2s ease,height 0.2s ease,border-color 0.2s ease,transform 0.08s ease}
.cursor-ring.expand{width:56px;height:56px;border-color:rgba(168,85,247,0.5)}
@media(max-width:900px){.cursor-dot,.cursor-ring{display:none!important}}

/* --- Scroll Reveal --- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 0.7s cubic-bezier(.16,1,.3,1),transform 0.7s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-right{opacity:0;transform:translateX(60px);transition:opacity 0.7s cubic-bezier(.16,1,.3,1),transform 0.7s cubic-bezier(.16,1,.3,1)}
.reveal-right.visible{opacity:1;transform:translateX(0)}
.reveal-left{opacity:0;transform:translateX(-60px);transition:opacity 0.7s cubic-bezier(.16,1,.3,1),transform 0.7s cubic-bezier(.16,1,.3,1)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(0.85);transition:opacity 0.7s cubic-bezier(.16,1,.3,1),transform 0.7s cubic-bezier(.16,1,.3,1)}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* --- Stagger Children --- */
.stagger > *{opacity:0;transform:translateY(30px);transition:opacity 0.5s cubic-bezier(.16,1,.3,1),transform 0.5s cubic-bezier(.16,1,.3,1)}
.stagger.visible > *{opacity:1;transform:translateY(0)}
.stagger.visible > *:nth-child(1){transition-delay:0s}
.stagger.visible > *:nth-child(2){transition-delay:0.08s}
.stagger.visible > *:nth-child(3){transition-delay:0.16s}
.stagger.visible > *:nth-child(4){transition-delay:0.24s}
.stagger.visible > *:nth-child(5){transition-delay:0.32s}
.stagger.visible > *:nth-child(6){transition-delay:0.4s}
.stagger.visible > *:nth-child(7){transition-delay:0.48s}
.stagger.visible > *:nth-child(8){transition-delay:0.56s}

/* --- Animated Gradient Text --- */
.text-gradient-anim{background:linear-gradient(90deg,#00b7ff,#a855f7,#10f5a0,#fbbf24,#00b7ff);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* --- Hero Mesh BG --- */
.hero-mesh{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(0,183,255,0.12),transparent),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(168,85,247,0.08),transparent);z-index:0}

/* --- Grid Overlay --- */
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px);background-size:60px 60px;z-index:0;animation:gridPulse 8s ease infinite}
@keyframes gridPulse{0%,100%{opacity:0.3}50%{opacity:0.6}}

/* --- Particle Effect --- */
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}25%{transform:translateY(-20px) translateX(10px)}50%{transform:translateY(-10px) translateX(-10px)}75%{transform:translateY(-30px) translateX(5px)}}
.particle{position:absolute;width:3px;height:3px;background:rgba(0,183,255,0.3);border-radius:50%;animation:float 6s ease-in-out infinite}

/* --- Pulse Dot --- */
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--neon-green);animation:pulse 2s ease infinite;display:inline-block}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,245,160,0.4)}50%{box-shadow:0 0 0 8px rgba(16,245,160,0)}}

/* --- Typing Cursor --- */
.typing-cursor::after{content:'|';color:var(--neon-cyan);animation:blink 1s step-end infinite;font-weight:300}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* --- Spotlight Card Effect --- */
.spotlight-card{position:relative;overflow:hidden}
.spotlight-card::before{content:'';position:absolute;width:200px;height:200px;background:radial-gradient(circle,rgba(0,183,255,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none;opacity:0;transition:opacity 0.3s ease;transform:translate(var(--spot-x,-50%),var(--spot-y,-50%))}
.spotlight-card:hover::before{opacity:1}

/* --- Gradient Border on Hover --- */
.glow-border{position:relative;overflow:hidden}
.glow-border::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:linear-gradient(135deg,#00b7ff,#a855f7,#10f5a0,#fbbf24);z-index:-1;opacity:0;transition:opacity 0.4s ease;animation:borderRotate 3s linear infinite}
.glow-border:hover::after{opacity:1}
@keyframes borderRotate{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

/* --- Ripple Effect on Buttons --- */
.btn{position:relative;overflow:hidden}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.25);transform:scale(0);animation:rippleAnim 0.6s ease-out}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* --- Magnetic Button Hover --- */
.btn-magnetic{transition:transform 0.2s cubic-bezier(.16,1,.3,1)}

/* --- Tilt Card --- */
.tilt-card{transition:transform 0.15s ease;will-change:transform}
.tilt-card:hover{transform:perspective(600px) rotateX(var(--tilt-x,0)) rotateY(var(--tilt-y,0)) scale(1.02)}

/* --- Counter Animation --- */
@keyframes countUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* --- Aurora Background --- */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0}
.aurora::before,.aurora::after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;filter:blur(120px);opacity:0.15}
.aurora::before{background:var(--neon-cyan);top:-200px;left:-100px;animation:auroraMove1 12s ease-in-out infinite}
.aurora::after{background:var(--neon-violet);bottom:-200px;right:-100px;animation:auroraMove2 14s ease-in-out infinite}
@keyframes auroraMove1{0%,100%{transform:translate(0,0)}33%{transform:translate(100px,50px)}66%{transform:translate(-50px,100px)}}
@keyframes auroraMove2{0%,100%{transform:translate(0,0)}33%{transform:translate(-100px,-60px)}66%{transform:translate(60px,-80px)}}

/* --- Shine Card Hover --- */
.shine-hover{position:relative;overflow:hidden}
.shine-hover::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to right,transparent 0%,rgba(255,255,255,0.03) 40%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.03) 60%,transparent 100%);transform:rotate(25deg) translateX(-100%);transition:transform 0.7s ease}
.shine-hover:hover::before{transform:rotate(25deg) translateX(100%)}

/* --- Logo Spin --- */
.logo-spin svg{animation:logoGlow 3s ease infinite}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(0,183,255,0.3))}50%{filter:drop-shadow(0 0 12px rgba(168,85,247,0.5))}}

/* --- Back to Top --- */
.back-to-top{position:fixed;bottom:32px;right:32px;width:44px;height:44px;border-radius:50%;background:rgba(7,18,36,0.9);border:1px solid var(--border);color:var(--neon-cyan);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:900;opacity:0;transform:translateY(20px);transition:all 0.3s ease;backdrop-filter:blur(12px)}
.back-to-top.visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:rgba(0,183,255,0.15);border-color:rgba(0,183,255,0.4);box-shadow:0 0 24px rgba(0,183,255,0.2)}

/* --- Progress Bar (top of page) --- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--gradient);z-index:10000;transition:width 0.1s linear}

/* --- Letter Reveal --- */
.letter-reveal span{display:inline-block;opacity:0;transform:translateY(20px);animation:letterIn 0.4s cubic-bezier(.16,1,.3,1) forwards}
@keyframes letterIn{to{opacity:1;transform:translateY(0)}}

/* --- Floating animation for elements --- */
@keyframes gentle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.float-anim{animation:gentle-float 4s ease-in-out infinite}

/* --- Skeleton Loading --- */
.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,rgba(255,255,255,0.05) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}