/* ============================================================
   NATEXAN PILOT AI — ANIMATIONS CSS
   ============================================================ */

/* ─── KEYFRAMES ────────────────────────────────────────────── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 64px 64px; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.3); }
  50%       { box-shadow: 0 0 50px rgba(201,168,76,0.6), 0 0 80px rgba(201,168,76,0.2); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes counter-up {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── HERO ENTRANCE ────────────────────────────────────────── */
.hero-badge    { animation: fade-up 0.7s var(--ease) 0.1s both; }
.hero-title    { animation: fade-up 0.8s var(--ease) 0.25s both; }
.hero-subtitle { animation: fade-up 0.8s var(--ease) 0.4s both; }
.hero-actions  { animation: fade-up 0.8s var(--ease) 0.55s both; }
.hero-note     { animation: fade-up 0.8s var(--ease) 0.65s both; }

/* ─── STAT COUNTER ─────────────────────────────────────────── */
.stat-number.animated { animation: counter-up 0.8s var(--ease) both; }

/* ─── SHIMMER ON GRADIENT TEXT ─────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-light) 40%,
    #fff 50%,
    var(--gold-light) 60%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ─── FLOAT ANIMATION ──────────────────────────────────────── */
.float { animation: float 6s ease-in-out infinite; }

/* ─── GLOW PULSE ───────────────────────────────────────────── */
.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* ─── STAGGER HELPERS ──────────────────────────────────────── */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }