/* ============================
   ZettaHub — animations.css
   ============================ */

/* --- Particle stars background --- */
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%       { opacity: 0.9;  transform: scale(1.4); }
}

@keyframes float-particle {
  0%   { transform: translateY(0px) translateX(0px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

@keyframes drift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%       { transform: translateX(12px) translateY(-8px); }
  50%       { transform: translateX(-6px) translateY(14px); }
  75%       { transform: translateX(-14px) translateY(-5px); }
}

/* --- Logo glow pulse --- */
@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 255, 163, 0.6)); }
  50%       { filter: drop-shadow(0 0 24px rgba(0, 255, 163, 1)); }
}

@keyframes logo-breathe {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.04); }
}

/* --- Hero headline reveal --- */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* --- CTA button neon pulse --- */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 163, 0.4), 0 0 30px rgba(0, 255, 163, 0.15); }
  50%       { box-shadow: 0 0 20px rgba(0, 255, 163, 0.8), 0 0 60px rgba(0, 255, 163, 0.35), 0 0 100px rgba(0, 255, 163, 0.1); }
}

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

/* --- Pricing cards scroll reveal --- */
@keyframes card-pop-in {
  from { opacity: 0; transform: translateY(50px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Speed icon animation --- */
@keyframes speed-dash {
  0%   { stroke-dashoffset: 100; opacity: 0.3; }
  50%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0.3; }
}

@keyframes speed-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Popular badge pulse --- */
@keyframes badge-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.5);
    background: linear-gradient(135deg, #00FFA3, #00C982);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 163, 0.9), 0 0 40px rgba(0, 255, 163, 0.3);
    background: linear-gradient(135deg, #00C982, #00FFA3);
  }
}

/* --- Test plan badge --- */
@keyframes test-badge-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); }
  50%       { box-shadow: 0 0 20px rgba(59, 130, 246, 0.9), 0 0 40px rgba(59, 130, 246, 0.3); }
}

/* --- Coming soon loader --- */
@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinner-dash {
  0%   { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
  100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}

/* --- Typewriter effect for "Coming soon" --- */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink-cursor {
  0%, 100% { border-color: #00FFA3; }
  50%       { border-color: transparent; }
}

/* --- Pulse dot (popular indicator) --- */
@keyframes ping {
  0%   { transform: scale(1); opacity: 1; }
  75%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* --- Section headings underline grow --- */
@keyframes underline-grow {
  from { width: 0; }
  to   { width: 80px; }
}

/* --- Neon border shimmer --- */
@keyframes border-shimmer {
  0%, 100% { border-color: rgba(0, 255, 163, 0.4); }
  50%       { border-color: rgba(0, 255, 163, 0.9); }
}

/* --- Hero grid lines --- */
@keyframes grid-scroll {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

/* --- Scroll indicator bounce --- */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}

/* --- Stats counter --- */
@keyframes count-up {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Mobile menu slide --- */
@keyframes menu-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Green glow ring (hero decoration) --- */
@keyframes ring-expand {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ============================
   Apply animations — utility classes
   ============================ */

.anim-logo-glow    { animation: logo-glow 2.5s ease-in-out infinite; }
.anim-logo-breathe { animation: logo-breathe 3s ease-in-out infinite; }
.anim-slide-up     { animation: slide-up 0.8s ease-out both; }
.anim-fade-in      { animation: fade-in 1.2s ease both; }
.anim-neon-pulse   { animation: neon-pulse 2s ease-in-out infinite; }
.anim-badge-glow   { animation: badge-glow 2s ease-in-out infinite; }
.anim-test-badge   { animation: test-badge-pulse 2s ease-in-out infinite; }
.anim-ping         { animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }
.anim-bounce       { animation: bounce-down 1.5s ease-in-out infinite; }
.anim-border-shimmer { animation: border-shimmer 2.5s ease-in-out infinite; }

/* Staggered card reveals */
/* Scroll reveal — enters from below, exits upward (reverse) */
.card-reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
              transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.card-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.card-reveal.exit-up {
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.card-reveal:nth-child(2) { transition-delay: 0.07s; }
.card-reveal:nth-child(3) { transition-delay: 0.14s; }
.card-reveal:nth-child(4) { transition-delay: 0.21s; }
.card-reveal:nth-child(5) { transition-delay: 0.28s; }
.card-reveal:nth-child(6) { transition-delay: 0.35s; }
.card-reveal:nth-child(7) { transition-delay: 0.42s; }
.card-reveal:nth-child(8) { transition-delay: 0.49s; }
.card-reveal:nth-child(9) { transition-delay: 0.56s; }


/* ── FAQ open content animation (keyframe only — styles live in style.css) ── */
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Coming soon typing animation */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #00FFA3;
  width: 0;
  animation: typing 2s steps(12) 1s both, blink-cursor 0.7s step-end infinite;
}

/* Grid scroll for hero */
.anim-grid-scroll { animation: grid-scroll 4s linear infinite; }

/* Particle items */
.particle {
  position: absolute;
  border-radius: 50%;
  background: #00FFA3;
  animation: float-particle linear infinite;
}