/* Deferred: hero, lifecycle, and UI animations. Loaded async to avoid blocking render. */
/* Hero orbs, grid, scan lines, glows – run only when .hero-in-view (IntersectionObserver) */
.hero-in-view .hero-orb{
  animation: heroOrbFloat 18s ease-in-out infinite;
}
.hero-in-view .hero-orb-1{ animation-duration: 22s; }
.hero-in-view .hero-orb-2{ animation-duration: 20s; animation-delay: -4s; }
.hero-in-view .hero-orb-3{ animation-duration: 24s; animation-delay: -8s; }
.hero-in-view .hero-orb-4{ animation-duration: 19s; animation-delay: -12s; }
.hero-in-view .hero-grid-lines{ animation: heroGridPulse 8s ease-in-out infinite; }
.hero-in-view .hero-scan-line-1{ animation: heroScan 4s ease-in-out infinite; }
.hero-in-view .hero-scan-line-2{ animation: heroScanUp 4s ease-in-out infinite; animation-delay: 2s; }
.hero-in-view .hero-glow{ animation: heroGlowPulse 6s ease-in-out infinite; }
.hero-in-view .hero-glow-2{ animation-delay: -3s; }

@keyframes heroOrbFloat{
  0%, 100%{ transform: translate(0, 0) scale(1); }
  25%{ transform: translate(20px, -30px) scale(1.05); }
  50%{ transform: translate(-15px, 20px) scale(0.95); }
  75%{ transform: translate(25px, 10px) scale(1.02); }
}
@keyframes heroGridPulse{
  0%, 100%{ opacity: 0.6; }
  50%{ opacity: 1; }
}
@keyframes heroScan{
  0%{ top: 0; opacity: 0.3; }
  50%{ top: 100%; opacity: 0.8; }
  100%{ top: 0; opacity: 0.3; }
}
@keyframes heroScanUp{
  0%{ bottom: 0; opacity: 0.3; }
  50%{ bottom: 100%; opacity: 0.8; }
  100%{ bottom: 0; opacity: 0.3; }
}
@keyframes heroGlowPulse{
  0%, 100%{ opacity: 0.25; transform: scale(1); }
  50%{ opacity: 0.45; transform: scale(1.1); }
}

/* Pill glow */
.hero-in-view .pill{ animation: pillGlow 3s ease-in-out infinite; }
[data-theme="dark"] .hero-in-view .pill{ animation: pillGlowDark 3s ease-in-out infinite; }
@keyframes pillGlow{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(31,79,138,.08); }
  50%{ box-shadow: 0 0 0 1px rgba(31,79,138,.15), 0 0 20px rgba(31,79,138,.06); }
}
@keyframes pillGlowDark{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(88,166,255,.12); }
  50%{ box-shadow: 0 0 0 1px rgba(88,166,255,.2), 0 0 24px rgba(88,166,255,.1); }
}

/* Header/footer chrome sweep */
.header::after,
.footer::after{
  animation: chromeSweep 12s ease-in-out infinite;
}
.footer::after{ animation-duration: 14s; }
@keyframes chromeSweep{
  from{ transform: translateX(0); }
  to{ transform: translateX(360%); }
}

/* Lifecycle track spin */
.lifecycle-track-glow{
  animation: orbitSpin 12s linear infinite;
}
@keyframes orbitSpin{
  from{ transform: translate(-50%, -50%) rotate(0deg); }
  to{ transform: translate(-50%, -50%) rotate(360deg); }
}

/* Button loading spinner */
.btn-loading::after{
  animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin{
  to{ transform: rotate(360deg); }
}
