/* ═══════════════════════════════════════════════════════════
   animations.css — Keyframes & Reveal Animations
═══════════════════════════════════════════════════════════ */

/* ─── REVEAL ON SCROLL ─── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.7s var(--ease-expo),
    transform 0.7s var(--ease-expo);
}

.reveal.reveal-delay-1 {
  transition-delay: 0.10s;
}

.reveal.reveal-delay-2 {
  transition-delay: 0.20s;
}

.reveal.reveal-delay-3 {
  transition-delay: 0.32s;
}

.reveal.reveal-delay-4 {
  transition-delay: 0.46s;
}

.reveal.reveal-delay-5 {
  transition-delay: 0.62s;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── KEYFRAMES ─── */
@keyframes scrollPulse {

  0%,
  100% {
    opacity: 0.45;
    transform: scaleY(1) translateY(0);
  }

  50% {
    opacity: 1;
    transform: scaleY(1.1) translateY(4px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

  100% {
    background-position: 200% center;
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes mapPulse {

  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 6px 16px rgba(184, 151, 58, .55));
  }

  50% {
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 12px 24px rgba(184, 151, 58, .75));
  }
}

@keyframes goldGlow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(184, 151, 58, 0);
  }

  50% {
    box-shadow: 0 0 20px 4px rgba(184, 151, 58, .18);
  }
}

@keyframes borderDraw {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ─── HERO CONTENT entrance ─── */
.hero-badge {
  animation: fadeInUp 0.55s 0.15s both var(--ease-expo);
}

.hero-title {
  animation: fadeInUp 0.70s 0.30s both var(--ease-expo);
}

.hero-sub {
  animation: fadeInUp 0.70s 0.48s both var(--ease-expo);
}

.hero-actions {
  animation: fadeInUp 0.60s 0.62s both var(--ease-expo);
}

.hero-stats {
  animation: fadeInUp 0.60s 0.76s both var(--ease-expo);
}

/* Hero scroll hint */
.hero-scroll-hint {
  animation: fadeIn 0.8s 1.4s both;
}

/* Don't double-animate reveal elements in hero */
.hero .reveal {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ─── LOGO hover ─── */
.logo:hover .logo-symbol {
  animation: pulse 0.55s var(--ease-spring);
}

/* ─── CARD hover ripple ─── */
.service-card,
.doctor-card,
.contact-card,
.review-card {
  position: relative;
}

.service-card::before,
.doctor-card::before,
.contact-card::before,
.review-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      transparent 55%,
      rgba(184, 151, 58, .055) 100%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
  pointer-events: none;
  z-index: 0;
}

.service-card:hover::before,
.doctor-card:hover::before,
.contact-card:hover::before,
.review-card:hover::before {
  opacity: 1;
}

/* ─── SCROLL LINE ─── */
.scroll-line {
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ─── About section image subtle glow ─── */
.about-image-wrap:hover .about-badge-float {
  animation: goldGlow 1.5s ease-in-out infinite;
}