/* ==========================================================================
   Launch Labs — Section 2 ("hub") scroll EXTENSION: hold the laptop top-aligned,
   then reveal two supporting lines beneath it, one after another, and hold.

   The laptop does NOT zoom. This file adds ONLY the pinned reveal sequence; it
   does not touch the existing entrance (css/hub.css / js/hub.js), which still
   plays as the section scrolls in. Everything here is gated behind
   .hub.hub-zoom-on, which js/hub-zoom.js adds ONLY when the sequence is active
   (GSAP present, motion allowed). Reduced-motion / no-JS visitors keep the
   original static hub, where the same two lines rise in via plain CSS.

   To revert: delete this file, js/hub-zoom.js and their <link>/<script> lines.
   ========================================================================== */

/* Make the section exactly fill the viewport and top-align its content so the
   laptop sits high with room beneath it for the revealed lines.
   `overflow: clip` guards against any stray horizontal scrollbar without
   creating a scroll container (so it won't disturb the arch overlap above).
   min-height:100vh keeps the pinned scene as the ONLY thing on screen — without
   it, css/hub.css's negative diagram margin shrank the section under 100vh and
   the next (near-black) section showed through the lower viewport. In the live
   experience the hub heading is hidden (html.ht-on .hub__heading{display:none});
   the disc overlay carries it instead. */
.hub.hub-zoom-on {
  overflow: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Top-aligned (was centred) so the laptop sits high in the section, just
     below the title, rather than floating in the middle with a big gap.
     TUNE: padding-top sets how far down from the top the laptop starts —
     raise/lower it to move the laptop up or down relative to the title. */
  justify-content: flex-start;
  /* Lowered further so the laptop sits higher, tucked closer beneath the title
     rather than dropping with a gap. Raise this if the laptop ever crowds the
     title; lower it (toward 0) to pull the laptop up more. */
  padding-top: clamp(0.5rem, 2.5vh, 2rem);
  padding-bottom: clamp(1rem, 2.5vw, 2rem);
}

/* The laptop no longer zooms. It rests top-aligned and the paragraph's three
   title + paragraph are revealed beneath it during the pin (js/hub-zoom.js).
   Keep them invisible until GSAP reveals them so they don't flash in before the
   pin. */
.hub.hub-zoom-on .hub__title,
.hub.hub-zoom-on .hub__para { opacity: 0; }

/* While js/hub-zoom.js measures the connector geometry it adds .hub-measuring for
   a single frame, forcing the sources + laptop to their SETTLED (untransformed)
   position so the lines are computed for where things come to rest — not where
   they momentarily are mid-reveal. No gsap writes, so it can't fight the timeline. */
.hub.hub-measuring .hub__sources,
.hub.hub-measuring .hub__laptop { transform: none !important; }

.hub.hub-zoom-on .hub__diagram {
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-inline: auto;
  /* In the live experience GSAP (js/hub-zoom.js) owns the whole graphic reveal,
     so cancel the static CSS fly and keep the container itself visible — its
     CHILDREN (laptop, cards, connectors) are what GSAP reveals in stages. */
  animation: none;
  opacity: 1;
  transform: none;
}
/* Hidden a11y + LAYOUT SLOT. In live mode the visible title is the single moving
   .hero-transition__lead (kept off-screen accessible-only here via visibility:
   hidden in css/hero-transition.css). This still reserves the slot at the top so
   the graphic sits BELOW where the moving title comes to rest — so its font-size
   is sized to match the lead's resting size (~3 lines). Cancel the static CSS
   entrance since it never visibly animates. */
.hub.hub-zoom-on .hub__heading {
  position: relative;
  z-index: 1;
  animation: none;
  margin: 0 auto;
  max-width: 60rem;
  font-size: clamp(1.4rem, 3vh, 2.3rem);
  transform-origin: 50% 0%;
}

/* Compress the graphic so the sources + laptop + revealed paragraph all fit the
   pinned viewport, and cap the laptop's height while keeping it the dominant
   element. Tune the max-height if the paragraph ever crowds on short screens. */
.hub.hub-zoom-on .hub__grid { gap: clamp(1rem, 3vh, 2rem); }
.hub.hub-zoom-on .hub__graphic { gap: clamp(1.25rem, 3.5vh, 2.5rem); }
.hub.hub-zoom-on .hub__laptop-img {
  width: auto;
  max-width: 100%;
  max-height: 36vh;
}

/* "choose you" — the two words that scale up at the end of the sequence and are
   zoomed through into the next (black) section. inline-block so the transform
   applies cleanly; origin at its own centre so we zoom through the MIDDLE of the
   words. In the static / reduced-motion fallback these are just normal words. */
.hub.hub-zoom-on .hub__zoom {
  display: inline-block;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
}

/* Cinematic hand-off plate. A single TOP-LEVEL, position:fixed black layer that
   bridges the two separately-pinned scenes (.hub -> .approach). Unlike an in-hub
   absolute overlay (which scrolled away when the hub un-pinned, exposing the
   section boundary and the approach sliding up from below), this stays locked to
   the viewport across the un-pin / re-pin, so the whole hand-off reads as one
   continuous black beat with no visible travel. js/hub-zoom.js fades it in as
   the words zoom; js/approach.js holds it, then fades it out to reveal the next
   content. Inert (invisible, non-interactive) until GSAP drives it, so the
   static / reduced-motion fallback never sees it. */
.scene-blackout {
  position: fixed;
  inset: 0;
  z-index: 9990;
  /* Midnight-navy (matching the sections it hands off between) rather than pure
     black, so the zoom hand-off never flashes black between the navy sections. */
  background: #05070f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}