/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance animations */
.hero-logo {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.05s;
}
.hero-eyebrow {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.15s;
}
.hero-title {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.25s;
}
.hero-subtitle {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.38s;
}
.hero-tagline {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.48s;
}
/* The hero form wrapper animates in last, after the tagline. */
.form-wrap {
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 0.58s;
}

/* Pain card hover accent */
.pain-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--green);
  transition: height 0.4s ease;
}
.pain-card:hover::before {
  height: 100%;
}
.pain-card:hover .pain-num {
  color: var(--green-light);
}

/* ── REDUCED MOTION ── */
/* Respect the user's OS preference to minimise motion. Collapse all animation
   and transition durations to near-zero so nothing visually moves. Reveal
   elements start visible so the IntersectionObserver has no perceptible effect. */
@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;
  }
}