/* ============================================================
   HANBOTIX — ANIMATIONS STYLESHEET
   Keyframes, scroll-reveal states, hover/motion effects
   ============================================================ */

/* ---------- REVEAL ON SCROLL (JS toggles .in) ---------- */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-stagger > *{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.in > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.19s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.33s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.40s; }
.reveal-stagger.in > *:nth-child(7){ transition-delay:.47s; }
.reveal-stagger.in > *:nth-child(8){ transition-delay:.54s; }
.reveal-stagger.in > *:nth-child(9){ transition-delay:.60s; }
.reveal-stagger.in > *:nth-child(10){ transition-delay:.66s; }
.reveal-stagger.in > *:nth-child(11){ transition-delay:.72s; }
.reveal-stagger.in > *:nth-child(12){ transition-delay:.78s; }

/* ---------- FLOAT ---------- */
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
.float{ animation:float 6s ease-in-out infinite; }

/* ---------- PULSE GLOW ---------- */
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 var(--accent-glow); }
  50%{ box-shadow:0 0 40px 4px var(--accent-glow); }
}
.pulse-glow{ animation:pulseGlow 3.2s ease-in-out infinite; }

/* ---------- TILT CARDS (JS sets transform via inline style on mousemove) ---------- */
.tilt-card{ transform-style:preserve-3d; will-change:transform; }

/* ---------- MAGNETIC BUTTONS (JS sets transform) ---------- */
.magnetic{ will-change:transform; }

/* ---------- STAT COUNT-UP ---------- */
.stat-number span[data-count]{ display:inline-block; }

/* ---------- PARTICLES LAYER (final CTA) ---------- */
.particles-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.particle{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--accent); opacity:0.6;
  animation:particleRise linear infinite;
}
@keyframes particleRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:0.7; }
  90%{ opacity:0.4; }
  100%{ transform:translateY(-260px) translateX(var(--drift,0px)); opacity:0; }
}

/* ---------- CURSOR GLOW (desktop only, JS positions) ---------- */
.cursor-glow{
  position:fixed; top:0; left:0; width:420px; height:420px; z-index:2;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(182,255,59,0.06) 0%, transparent 70%);
  transform:translate(-50%,-50%);
  will-change:transform; opacity:0; transition:opacity .4s var(--ease);
}
.cursor-glow.active{ opacity:1; }

.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:9998; mix-blend-mode:difference;
  transform:translate(-50%,-50%); will-change:transform;
  transition:opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease);
  opacity:0;
}
.cursor-dot.active{ opacity:1; }
.cursor-dot.hovered{ width:38px; height:38px; background:var(--accent); opacity:0.15; mix-blend-mode:normal; }

/* ---------- LOADER PROGRESS ---------- */
@keyframes loaderPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.5; }
}
.loader-logo{ animation:loaderPulse 1.6s ease-in-out infinite; }

/* ---------- HERO GLOW DRIFT ---------- */
@keyframes glowDrift{
  0%,100%{ transform:translateX(-50%) translateY(0) scale(1); }
  50%{ transform:translateX(-50%) translateY(20px) scale(1.06); }
}
.hero-glow{ animation:glowDrift 10s ease-in-out infinite; }

/* ---------- GRADIENT BORDER ANIMATION ---------- */
@keyframes gradientShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.gradient-border::before{
  background-size:200% 200%;
  animation:gradientShift 6s ease infinite;
}

/* ---------- PAGE TRANSITION ---------- */
.page-fade{ animation:pageFadeIn .6s var(--ease) both; }
@keyframes pageFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}