/* ============================================
   Horizon Medical — Animation Keyframes
   ============================================ */

/* ---- Page Load Orchestration ---- */
@keyframes heroBgReveal {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 0.85; transform: scale(1); }
}
@keyframes heroBrandIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 0.8; transform: translateY(0); }
}
@keyframes heroHeadlineIn {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSubtextIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 0.8; transform: translateY(0); }
}
@keyframes heroStatIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroCtaIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-load-bg     { animation: heroBgReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-load-brand  { animation: heroBrandIn 0.8s 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.hero-load-headline { animation: heroHeadlineIn 0.9s 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.hero-load-subtext  { animation: heroSubtextIn 0.8s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.hero-load-stat     { animation: heroStatIn 0.8s 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.hero-load-cta      { animation: heroCtaIn 0.7s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---- Impact pulse ---- */
@keyframes impactPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* ---- Waitlist button glow pulse (on ::after pseudo) ---- */
@keyframes waitlistGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(10, 88, 255, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(10, 88, 255, 0.15),
      0 4px 28px rgba(10, 88, 255, 0.25);
  }
}

@keyframes waitlistArrowBounce {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ---- Stroke reveal for how-it-works numbers ---- */
@keyframes strokeDraw {
  0%   { opacity: 0; -webkit-text-stroke-color: transparent; }
  40%  { opacity: 1; -webkit-text-stroke-color: var(--color-electricblue); }
  100% { opacity: 1; -webkit-text-stroke-color: var(--color-electricblue); }
}
.stroke-animate {
  animation: strokeDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

/* ============================================
   Responsive overrides
   ============================================ */
@media (max-width: 767px) {
  .hero-load-bg { animation-duration: 0.8s; }
  .hero-load-headline { animation-delay: 0.3s; animation-duration: 0.6s; }
  .hero-load-subtext  { animation-delay: 0.45s; animation-duration: 0.6s; }
  .hero-load-stat     { animation-delay: 0.55s; animation-duration: 0.6s; }
  .hero-load-brand    { animation-delay: 0.2s; animation-duration: 0.5s; }
  .hero-load-cta      { animation-delay: 0.48s; animation-duration: 0.6s; }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  [class*="hero-load-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .stroke-animate {
    animation: none !important;
    opacity: 1 !important;
  }
}