/* ─── PARTICLE CANVAS ─── */
#particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; }

/* ─── CURSOR GLOW ─── */
.cursor-glow { position: fixed; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(20,180,157,.06) 0%, transparent 70%); pointer-events: none; z-index: 1; transform: translate(-50%,-50%); transition: opacity .3s; }

/* ─── COUNTER ANIMATION ─── */
.count-up { transition: all .1s; }

/* ─── GLITCH TEXT ─── */
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { color: var(--teal); animation: glitch1 3s infinite; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); }
.glitch::after { color: var(--purple); animation: glitch2 3s infinite; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); }
@keyframes glitch1 { 0%,90%,100%{transform:none;opacity:0} 92%{transform:translate(-2px,0);opacity:.6} 94%{transform:translate(2px,0);opacity:.6} 96%{transform:translate(-1px,0);opacity:.4} }
@keyframes glitch2 { 0%,90%,100%{transform:none;opacity:0} 93%{transform:translate(2px,0);opacity:.5} 95%{transform:translate(-2px,0);opacity:.5} 97%{transform:translate(1px,0);opacity:.3} }

/* ─── SHIMMER ─── */
.shimmer { position: relative; overflow: hidden; }
.shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 0%{left:-100%} 60%,100%{left:150%} }

/* ─── GRADIENT TEXT ─── */
.grad-text { background: linear-gradient(135deg, var(--teal), #a0f0e0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── PULSE DOT ─── */
.pulse-dot { display: inline-flex; align-items: center; gap: 6px; }
.pulse-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulseDot 2s ease-in-out infinite; box-shadow: 0 0 8px rgba(20,180,157,.8); }
@keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }

/* ─── BADGE FLOAT ─── */
.badge-float { animation: badgeFloat 4s ease-in-out infinite; }
@keyframes badgeFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-8px) rotate(1deg)} }

/* ─── NUMBER GLOW ─── */
.num-glow { text-shadow: 0 0 30px rgba(20,180,157,.5), 0 0 60px rgba(20,180,157,.2); }

/* ─── LINE DRAW ─── */
.line-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s ease; }
.line-draw.drawn { stroke-dashoffset: 0; }

/* ─── CARD 3D HOVER ─── */
.card-3d { transform-style: preserve-3d; transition: transform .3s ease; }
.card-3d:hover { transform: perspective(800px) rotateX(-3deg) rotateY(3deg); }

/* ─── SPINNER ─── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin .8s linear infinite; }

/* ─── STAGGER CHILDREN ─── */
.stagger-parent > * { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.stagger-parent.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.stagger-parent.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .15s; }
.stagger-parent.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .25s; }
.stagger-parent.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: .35s; }
.stagger-parent.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: .45s; }
.stagger-parent.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: .55s; }