/* ─── GLOBAL KEYFRAMES ─── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(109,40,217,0.1)}50%{box-shadow:0 0 40px rgba(109,40,217,0.2)}}

/* ─── STAGGER CHILDREN ─── */
.stagger-children>*{opacity:0;transform:translateY(20px);transition:all .6s cubic-bezier(.16,1,.3,1)}
.stagger-children.visible>*:nth-child(1){transition-delay:.05s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(2){transition-delay:.1s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(3){transition-delay:.15s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(4){transition-delay:.2s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(5){transition-delay:.25s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(6){transition-delay:.3s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(7){transition-delay:.35s;opacity:1;transform:translateY(0)}
.stagger-children.visible>*:nth-child(8){transition-delay:.4s;opacity:1;transform:translateY(0)}

/* ─── HOVER MAGNETIC ─── */
.magnetic{transition:transform .3s cubic-bezier(.16,1,.3,1)}

/* ─── TEXT GRADIENT ANIMATION ─── */
.animate-gradient{background-size:200% 200%;animation:gradientShift 4s ease infinite}

/* ─── GLITCH TEXT ─── */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}
.glitch:hover::before{animation:glitch1 .3s ease;color:var(--accent-violet);opacity:.6;clip-path:inset(20% 0 30% 0)}
.glitch:hover::after{animation:glitch2 .3s ease;color:var(--accent-rose);opacity:.6;clip-path:inset(60% 0 10% 0)}
@keyframes glitch1{0%{transform:translate(0)}20%{transform:translate(-3px,3px)}40%{transform:translate(-3px,-3px)}60%{transform:translate(3px,3px)}80%{transform:translate(3px,-3px)}100%{transform:translate(0)}}
@keyframes glitch2{0%{transform:translate(0)}20%{transform:translate(3px,-3px)}40%{transform:translate(3px,3px)}60%{transform:translate(-3px,-3px)}80%{transform:translate(-3px,3px)}100%{transform:translate(0)}}

/* ─── TILT ─── */
.tilt-card{transition:transform .4s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
.tilt-card:hover{transform:perspective(800px) rotateX(0) rotateY(0) translateY(-8px)}

/* ─── PARTICLE DOTS ─── */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{position:absolute;width:4px;height:4px;background:var(--accent-violet);border-radius:50%;opacity:.2;animation:particleFloat 15s linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:.2}90%{opacity:.2}100%{transform:translateY(-100vh) rotate(720deg);opacity:0}}