/**
 * Hero lead bulge + settle (header.hero > p, not .hero-year / .hero-eyebrow).
 * Transform/opacity only — layout slot reserved (no CLS).
 * Default: fully visible (no-JS safe). JS adds .hero-lead-bulge when IO + motion OK.
 */

header.hero > p.hero-lead-bulge {
  transform-origin: 50% 50%;
  /* Cancel page-local heroIn when JS owns this lead */
  animation: none;
  opacity: 1;
  transform: none;
}

header.hero > p.hero-lead-bulge.is-bulging {
  animation: hero-lead-bulge-settle 0.82s cubic-bezier(0.22, 1.15, 0.36, 1) both;
  animation-delay: var(--hero-lead-delay, 0ms);
  will-change: transform, opacity;
}

header.hero > p.hero-lead-bulge.is-settled {
  opacity: 1;
  transform: none;
  animation: none;
  will-change: auto;
}

@keyframes hero-lead-bulge-settle {
  0% {
    opacity: 0.78;
    transform: scale(0.985);
  }
  38% {
    opacity: 1;
    transform: scale(1.06);
  }
  68% {
    transform: scale(0.992);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  header.hero > p.hero-lead-bulge,
  header.hero > p.hero-lead-bulge.is-bulging,
  header.hero > p.hero-lead-bulge.is-settled {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}