/* ==========================================================================
   Scene hero (hero-scene.html only)
   Race-morning sky over green hills, runners on the route, a marshal in hi-vis.
   Scrolling moves the sky from sunlit morning to dusk (--p: 0 → 1, set by js/scene.js).
   ========================================================================== */

.scene-stage { --p: 0; }
/* --glow: lights, reflective stripes and head torches fade in over the second half of the scroll */
.scene-stage, .signup-scene { --glow: calc((var(--p) - .5) * 2.2); }

/* ---------- Sky ---------- */
.sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky > div { position: absolute; }
.sky-day, .sky-sunset, .sky-dusk, .stars { inset: 0; }
.sky-day {
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #A6DAF6 0%, #C6E8F9 24%, #E6F4FB 46%, #F7F9F6 62%, #FFE9CC 80%, #FFCF9C 100%);
}
/* Day → night as you scroll. No orange sunset in between. */
.sky-sunset { display: none; }
.sky-dusk {
  background: linear-gradient(180deg, #0F172B 0%, #1B2150 36%, #2C3A6B 64%, #4E6390 86%, #7487AE 100%);
  opacity: calc((var(--p) - .05) * 2.2);
}
.stars {
  bottom: 40%;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%, #fff 99%, transparent),
    radial-gradient(1px 1px at 17% 48%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 26% 12%, #fff 99%, transparent),
    radial-gradient(1px 1px at 34% 36%, #fff 99%, transparent),
    radial-gradient(2px 2px at 44% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 55% 42%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 63% 10%, #fff 99%, transparent),
    radial-gradient(1px 1px at 72% 30%, #fff 99%, transparent),
    radial-gradient(2px 2px at 81% 16%, #fff 99%, transparent),
    radial-gradient(1px 1px at 90% 40%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 96% 8%, #fff 99%, transparent);
  opacity: calc((var(--p) - .45) * 1.8);
}

/* ---------- Sun sits behind the far hills and sinks as you scroll ---------- */
.sun {
  /* Pure radial glow: no disc edge or shadow ring, it fades to nothing */
  position: absolute; z-index: 0; left: 30%; bottom: clamp(40px, 5vw, 90px);
  width: clamp(240px, 24vw, 360px); aspect-ratio: 1; margin-left: calc(clamp(240px, 24vw, 360px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    #FFFDF2 0%, #FFF6D6 22%, rgba(255, 233, 168, .85) 32%, rgba(255, 214, 140, .45) 50%,
    rgba(255, 200, 120, .18) 72%, rgba(255, 190, 110, 0) 100%);
  transform: translateY(calc(var(--p) * 150px));
  pointer-events: none;
}
.scene-stage .sun { opacity: calc(1 - var(--p) * 1.4); }

/* Sun peeks out beside the big left-hand hill; nudged inwards where the hills are cropped on phones */
@media (max-width: 767px) { .sun { left: 40%; } }

/* ---------- Hero sits on the sky ---------- */
.scene-stage .hero { padding-bottom: clamp(160px, 22vw, 320px); }
.scene-stage .hero-text { position: relative; z-index: 2; }
.scene-stage .hero .lead { color: #1E293B; }
.scene-stage .hero .micro { color: #1E293B; }
.scene-stage .hl { color: #FF6A00; }
.scene-stage .hl path { stroke: #FF6A00; }
.scene-stage .h1, .scene-stage .hero .lead, .scene-stage .hero .micro, .scene-stage .hl { transition: color .35s; }
.scene-stage .hl path { transition: stroke .35s; }
/* Once the sky turns, text flips to light for contrast */
.scene-stage.dusk .h1 { color: #FFFFFF; }
.scene-stage.dusk .hero .lead, .scene-stage.dusk .hero .micro { color: #E2E8F0; }
.scene-stage.dusk .hl { color: #FF6A00; }
.scene-stage.dusk .hl path { stroke: #FF6A00; }

/* "View demo" sits beside the primary CTA on the sky */
.view-demo { box-shadow: 0 6px 16px -10px rgba(15, 23, 43, .3); }
.view-demo .arrow-down { transform: rotate(90deg); transition: transform .2s var(--ease-out); }
.view-demo:hover .arrow-down { transform: rotate(90deg) translateX(3px); }

/* ---------- Hills ---------- */
.hills {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  width: 100%; height: clamp(230px, 26vw, 380px);
  pointer-events: none;
}
.hills .shade { opacity: calc(var(--p) * .55); }
.hills .lights { opacity: var(--glow); }
.hills .figures { filter: brightness(calc(1 - var(--p) * .4)); }

/* Parallax: far hills drift slower than near ones as you scroll */
.scene-stage .layer-far  { transform: translateY(calc(var(--p) * 44px)); }
.scene-stage .layer-far2 { transform: translateY(calc(var(--p) * 28px)); }
.scene-stage .layer-mid  { transform: translateY(calc(var(--p) * 12px)); }

/* ---------- Scrolling down: every marshal checks in ---------- */
/* !important beats the SMIL fill animation on the pins */
/* .mpin-pop wraps each whole pin (shape + number) with its origin at the pin tip, so the pop scales it as one piece */
.scene-stage .hills .mpin { transition: fill .3s var(--d, 0ms); }
.scene-stage.all-in .hills .mpin { fill: #15803D !important; }
.scene-stage.all-in .hills .mpin-pop { animation: pin-pop .6s var(--ease-spring, ease-out) var(--d, 0ms) both; }
.scene-stage.all-in .hills .mpin-n { opacity: 0 !important; }
.scene-stage.all-in .hills .mpin-ok { opacity: 1 !important; }
@keyframes pin-pop { 0% { scale: 1; } 45% { scale: 1.6; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .scene-stage.all-in .hills .mpin-pop { animation: none; } }

/* ---------- Rob is a link into the live demo ---------- */
.marshal-hot {
  position: absolute; z-index: 4; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 14px; background: transparent; cursor: pointer;
}
.marshal-hot:focus-visible { outline: 2px solid #0F172B; outline-offset: 2px; }
.dusk .marshal-hot:focus-visible { outline-color: #FF6A00; }
.marshal-tip {
  position: absolute; z-index: 5; width: 220px; padding: 12px 14px; border-radius: 14px;
  background: #fff; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float);
  font-size: 13px; line-height: 1.4; text-align: left; pointer-events: none;
  opacity: 0; transform: translate(-50%, calc(-100% + 6px)); transition: opacity .18s, transform .2s var(--ease-out);
}
.marshal-tip::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px;
  background: #fff; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg);
}
.marshal-tip .k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.marshal-tip b { display: block; font-family: var(--font-display); font-size: 16px; }
.marshal-tip .st { display: flex; color: var(--ink); font-weight: 700; margin: 2px 0 6px; }
.marshal-tip .go { display: block; color: var(--action); font-weight: 700; }
.marshal-hot:hover + .marshal-tip, .marshal-hot:focus-visible + .marshal-tip { opacity: 1; transform: translate(-50%, -100%); }
@media (hover: none) { .marshal-tip { display: none; } }

/* ---------- Ground: the demo sits on the grass ---------- */
.scene-ground {
  --ink-muted: #E2E8F0;
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #2E6A36 0%, #2B6333 45%, #1F4A26 100%);
  margin-top: 0;
  border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
}
.scene-ground::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: #0F172B; opacity: calc(var(--p) * .55);
}
.scene-ground::after { display: none; }
.scene-stage .demo-stage { margin-top: calc(clamp(48px, 5vw, 80px) * -1); position: relative; z-index: 3; }
.scene-stage .demo-stage::before {
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 214, 150, .35), rgba(255, 214, 150, 0) 72%);
}
.scene-ground .scan-copy b { color: #FFFFFF; }
.scene-ground .scan:hover .scan-copy b { color: #FFB27A; }
.scene-ground .demo-foot { border-top-color: rgba(255, 255, 255, .16); }
.scene-ground .logos img { border-color: transparent; }

/* ---------- Sign-up: sunset over the same hills ---------- */
.signup-scene {
  background: linear-gradient(180deg, #FF6A00 0%, #FF7D24 38%, #FF9E50 64%, #FFC284 86%, #FFD9A8 100%);
  padding-bottom: calc(var(--section-y) + clamp(130px, 15vw, 230px));
}
.signup-scene::before { display: none; }
.signup-scene .signup-grid { position: relative; z-index: 2; }
.hills-signup { height: clamp(210px, 23vw, 340px); }
.signup-scene { --p: .22; }
.sun-low {
  position: absolute; z-index: 0; left: 22%; bottom: clamp(30px, 4vw, 70px);
  width: clamp(240px, 24vw, 360px); aspect-ratio: 1; margin-left: calc(clamp(240px, 24vw, 360px) / -2);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side,
    #FFF7E0 0%, #FFE7B0 22%, rgba(255, 214, 140, .8) 34%, rgba(255, 190, 110, .4) 54%, rgba(255, 170, 90, 0) 100%);
}
@media (max-width: 767px) { .sun-low { left: 30%; } }

@media (prefers-reduced-motion: reduce) {
  .sun, .scene-stage .layer { transform: none; }
  }