/* =============================================================
   ZELIUM AI — ANIMATIONS
   Purposeful motion that reveals information and guides attention.
   Principle: 200–400ms micro-interactions; 600–900ms entrance reveals.
============================================================= */

/* -------------------------------------------------------------
   KEYFRAME DEFINITIONS
------------------------------------------------------------- */

/* Glow pulse — for radial halo backgrounds */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}

/* Primary CTA button pulse ring */
@keyframes btn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55), 0 4px 24px rgba(139, 92, 246, 0.3); }
  60%  { box-shadow: 0 0 0 14px rgba(139, 92, 246, 0), 0 4px 24px rgba(139, 92, 246, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0), 0 4px 24px rgba(139, 92, 246, 0.3); }
}

/* Demo widget live indicator dot */
@keyframes demo-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px #22C55E; }
  50%       { opacity: 0.5; box-shadow: 0 0 10px #22C55E; }
}

/* Gradient text sweep */
@keyframes grad-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Typing cursor blink */
@keyframes cursor-blink {
  0%, 100% { border-right-color: var(--color-accent); }
  50%       { border-right-color: transparent; }
}

/* Scroll-triggered fade-up — initial state */
@keyframes fade-up-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Score badge flash on change */
@keyframes score-flash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Shimmer scan effect for feed/code blocks */
@keyframes shimmer-scan {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Confetti burst particles */
@keyframes confetti-fly {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx, 40px), var(--ty, -80px)) rotate(var(--rot, 360deg)) scale(0); opacity: 0; }
}

/* Step connector travel dot */
@keyframes dot-travel {
  0%   { offset-distance: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Floating subtle bounce for demo card */
@keyframes float-card {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Number counter roll — handled by JS, but we define opacity transition */
@keyframes counter-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Score number change flash */
@keyframes score-number-change {
  0%   { opacity: 0.3; transform: scale(0.92); }
  60%  { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Halo for final CTA background */
@keyframes halo-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Nav entry — drop in */
@keyframes nav-enter {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* -------------------------------------------------------------
   SCROLL-TRIGGERED ENTRANCE ANIMATIONS
   JS adds .visible to elements with .fade-up once in viewport.
------------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.fade-up-delay   { transition-delay: 0.12s; }
.fade-up-delay-2 { transition-delay: 0.24s; }
.fade-up-delay-3 { transition-delay: 0.36s; }

/* -------------------------------------------------------------
   GRADIENT TEXT — animated sweep when visible
------------------------------------------------------------- */
.gradient-text {
  background-size: 200% 200%;
  animation: grad-sweep 5s ease infinite;
}

/* -------------------------------------------------------------
   HERO DEMO CARD — subtle float
------------------------------------------------------------- */
.hero-demo .demo-card {
  animation: float-card 6s ease-in-out infinite;
}

/* When animations are replaying, disable float briefly */
.hero-demo .demo-card.replaying {
  animation: none;
}

/* -------------------------------------------------------------
   SCORE NUMBER CHANGE ANIMATION
   Applied by JS when score animates
------------------------------------------------------------- */
.score-animating {
  animation: score-number-change 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Tier badge flash on score change */
.tier-badge-flash {
  animation: score-flash 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* -------------------------------------------------------------
   NAVIGATION
------------------------------------------------------------- */
#nav {
  animation: nav-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn-pulse {
    animation: none;
    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3);
  }

  .hero-demo .demo-card {
    animation: none;
  }

  .gradient-text {
    background-size: 100% 100%;
    animation: none;
  }

  .section-glow,
  .hero-bg-glow,
  .final-cta-glow {
    animation: none;
    opacity: 0.7;
  }
}