/* Act A - First tee. Inline SVG is the complete, load-safe static poster.
   Overscan includes the full travel and near-plane scale, with no new image requests.
   The hero remains in natural flow; only decorative descendants move. */
.hero-course {
  position: absolute;
  inset: auto 0 0;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-plane {
  position: absolute;
  inset: -72px -80px;
  width: calc(100% + 160px);
  max-width: none;
  height: calc(100% + 144px);
  transform-origin: 70% 100%;
}
/* The engine's 1.8-viewport entry timeline begins one viewport before the
   document-top hero. Remap that interval to the first .8 viewport of real scroll. */
.hero[data-scroll-ready] {
  --tee-p: clamp(0, calc((var(--p) * 1.8 - 1) / .8), 1);
  --tee-hills: -12px;
  --tee-fairway: -28px;
  --tee-turf: -56px;
  --tee-veil: -8px;
}
.hero[data-scroll-ready] .hero-hills { transform: translateY(calc(var(--tee-p) * var(--tee-hills))); }
.hero[data-scroll-ready] .hero-fairway { transform: translateY(calc(var(--tee-p) * var(--tee-fairway))); }
.hero[data-scroll-ready] .hero-turf {
  transform: translateY(calc(var(--tee-p) * var(--tee-turf))) scale(calc(1 + var(--tee-p) * .04));
}
.hero[data-scroll-ready] .hero-veil { transform: translateY(calc(var(--tee-p) * var(--tee-veil))); }
@media (min-width: 601px) {
  /* Include the 72px overscan when keeping the glow clear of the top crop. */
  .hero-sky ellipse { transform: translateY(80px); }
}
@media (min-width: 1441px) {
  /* Keep the authored sky and ridgelines inside their tested SVG crop.
     A fixed-height, full-width slice would cut through them on wide monitors.
     Fade the bounded scene into the existing navy ground at either side. */
  .hero-course {
    width: 1440px;
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
}
@media (max-width: 600px) {
  /* Phone direction: crop outer hills/sky; turf sits behind the scorecard,
     below headline and CTA. Keep the existing type and localized natural height.
     Finish within .35 viewport, with half the desktop translation and scale. */
  .hero-course { height: 560px; }
  .hero-plane { inset-inline: -200px; width: calc(100% + 400px); }
  .hero-sky { opacity: .5; }
  .hero[data-scroll-ready] {
    --tee-p: clamp(0, calc((var(--p) * 1.8 - 1) / .35), 1);
    --tee-hills: -6px;
    --tee-fairway: -14px;
    --tee-turf: -28px;
    --tee-veil: -4px;
  }
  .hero[data-scroll-ready] .hero-turf {
    transform: translateY(calc(var(--tee-p) * var(--tee-turf))) scale(calc(1 + var(--tee-p) * .02));
  }
}
@media (prefers-reduced-motion: reduce), print {
  .hero .hero-plane { transform: none !important; }
}