/* ==========================================================================
   Launch Labs — "Choice" transition ("many choices -> one obvious choice")
   A full-viewport WHITE, pinned, scroll-scrubbed sequence: ~30 thin black
   sticks are scattered across the frame with one small red dot among them;
   as you scroll they orient toward the dot, travel INTO it, leaving a single
   red dot isolated on white, which then expands until the whole viewport is
   Launch red — becoming the red canvas of .finale directly below (identical
   #D92632, so the handoff is seamless, no fade, no flash).

   All motion lives in js/choice.js (GSAP + ScrollTrigger, already loaded for
   the hero + el-scroll sequences — no new library). Palette is strictly
   white #FFFFFF / near-black #010202 / Launch red #D92632. Nothing here
   writes to any other section. To revert: delete this file, js/choice.js,
   the .choice markup in index.html and their <link>/<script> lines (and, if
   wanted, restore the old photo-panel .finale).

   Sticks are created by js/choice.js and given an inline base transform on
   creation, so even with JS/GSAP absent (or reduced motion) the scattered
   composition + red dot still render as a static editorial still.
   ========================================================================== */

.choice {
  position: relative;
  background: #FFFFFF;
}

.choice__stage {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #FFFFFF;
}

.choice__field {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* One thin editorial stick. Length (width) and base position (left/top %)
   are set inline per-stick by js/choice.js; height stays hairline-thin and
   scales gently with the viewport. transform is owned by GSAP at runtime
   (or the inline base transform when GSAP is absent). */
.choice__stick {
  position: absolute;
  height: clamp(1.5px, 0.2vmin, 3px);
  background: #010202;
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}

/* The red dot — small enough at rest to read as just one more element in
   the field; sits above the sticks so they travel underneath it and vanish
   INTO it. js/choice.js scales it up in the final phase until it covers the
   whole viewport. */
.choice__dot {
  position: absolute;
  left: 46%;
  top: 44%;
  width: max(1.1vmin, 9px);
  height: max(1.1vmin, 9px);
  border-radius: 50%;
  background: #D92632;
  z-index: 2;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
}

/* ==========================================================================
   Reduced motion — js/choice.js declines to pin/animate, so the section is
   just a white frame holding the static scattered composition + red dot.
   Keep a real height so the absolutely-positioned field has room to show.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .choice__stage {
    height: 100vh;
    min-height: 34rem;
  }
}