/* =========================================================
   ANIMATIONS — fade, slide, hover, reveal, counters
   ========================================================= */

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeInDown{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:translateY(0); } }
@keyframes slideInLeft{ from{ opacity:0; transform:translateX(-32px); } to{ opacity:1; transform:translateX(0); } }
@keyframes slideInRight{ from{ opacity:0; transform:translateX(32px); } to{ opacity:1; transform:translateX(0); } }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 0 20px rgba(0,229,255,.25); } 50%{ box-shadow:0 0 40px rgba(124,58,237,.35); } }
@keyframes gradientShift{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.animate-fade-in{ animation:fadeIn var(--transition-slow) ease both; }
.animate-fade-up{ animation:fadeInUp var(--transition-slow) ease both; }
.animate-float{ animation:floaty 5s ease-in-out infinite; }
.animate-spin{ animation:spin 1s linear infinite; }
.animate-pulse-glow{ animation:pulseGlow 3s ease-in-out infinite; }

/* Scroll reveal (JS toggles .in-view via IntersectionObserver) */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-left{ opacity:0; transform:translateX(-36px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left.in-view{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(36px); transition:opacity .7s ease, transform .7s ease; }
.reveal-right.in-view{ opacity:1; transform:translateX(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .6s ease, transform .6s ease; }
.reveal-scale.in-view{ opacity:1; transform:scale(1); }

/* Stagger children delay via inline style --d, fallback nth-child */
.reveal-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.03s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.09s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.21s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.27s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.33s; }
.reveal-stagger.in-view > *:nth-child(n+7){ transition-delay:.38s; }

/* Hover lift utility */
.hover-lift{ transition:transform var(--transition-base), box-shadow var(--transition-base); }
.hover-lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* Spinner */
.spinner{ width:20px; height:20px; border:2px solid var(--color-border); border-top-color:var(--accent-cyan); border-radius:50%; animation:spin .7s linear infinite; }

/* Marquee for trending tags / logos */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:14px; width:max-content; animation:marquee 30s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }