/* ============================================
   TheDoctorsHelp — Animations
   ============================================ */

/* ---- Page Load Sequence (CSS only) ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.03);
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Navbar entrance */
.anim-navbar {
  animation: slideDown 0.4s var(--ease-out) both;
}

/* Hero staggered entrance */
.anim-hero-eyebrow {
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 0.5s both;
}

.anim-hero-headline {
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 0.7s both;
}

.anim-hero-desc {
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 0.9s both;
}

.anim-hero-ctas {
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-out) 1.1s both;
}

.anim-hero-logo {
  opacity: 0;
  animation: scaleIn 0.8s var(--ease-out) 1.0s both;
}

.anim-hero-logo img {
  animation: breathe 6s ease-in-out infinite;
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ---- Hero geometric pattern ---- */
.hero__pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.08;
  pointer-events: none;
}

.hero__pattern::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  top: -50px;
  right: -80px;
}

.hero__pattern::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid var(--color-accent);
  top: 60%;
  left: 10%;
  transform: rotate(45deg);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}