/* ============================================================
   HOME -> ABOUT HANDOFF
   Home only. About is a section of this document now, not a page
   of its own, and it has to arrive out of the end of the depth
   sequence rather than after it.

   The problem this solves is a layout one. The hero is pinned for
   115% of the viewport (90% on a phone), and ScrollTrigger's pin
   spacing makes the spacer as tall as the hero plus that duration.
   So when the depth finished, the hero came back into flow and
   scrolled away for one more whole viewport - with its copy already
   faded to nothing - before anything else appeared. That trailing
   viewport was the blank.

   Two things remove it:

     - About is moved up to the frame where the depth ends, measured
       against the pin rather than assumed from the hero's height
     - it cross-dissolves in over the last quarter of the pin, so the
       building resolves into the company story instead of being
       scrolled past

   Both are driven by --handoff, which runs 1 -> 0 across the end of
   the depth.

   Nothing below applies until .handoff-ready is on the body, which
   the script adds only once it has found the pin and placed About
   against it. That gate matters most on a phone, where the hero can
   take a second or two to boot: until then About is an ordinary
   section, fully visible, exactly where the flow puts it. An
   unstyled page is a fine thing to be for a moment. A page with
   About hidden by a handoff that never arrives is not.
   ============================================================ */

body[data-page="home"].handoff-ready .about{
  /* The correction. About's natural top is the hero plus the length of
     the pin; pulling back the hero leaves exactly the pin, which is the
     scroll position where the depth ends. --hero-h is measured once and
     re-measured only when the hero's height actually changes; the svh
     fallback is the same number expressed in CSS, for the frame before
     the script has read it. */
  margin-top:calc(-1 * var(--hero-h, 100svh));

  /* over the hero's leftover box, and opaque so none of it shows through */
  position:relative;
  z-index:2;
  background:var(--bg);

  opacity:calc(1 - var(--handoff, 0));
  transform:translate3d(0, calc(var(--handoff, 0) * 64px), 0);
}

/* Everything below About shares the raised plane, so the hero can
   never paint over the start of the next section. */
body[data-page="home"].handoff-ready .vision-band,
body[data-page="home"].handoff-ready .who{ position:relative; z-index:2; }

/* Invisible is not the same as absent. While About is dissolving in
   it still covers the hero's buttons, so it must not take the clicks
   meant for them. */
body[data-page="home"].handoff-ready .about.handoff-armed{ pointer-events:none; }

/* ...and before the dissolve has even started, it should not be there
   at all. A translate3d promotes an element to its own compositing
   layer whether or not anything can be seen through it, and on a phone
   this section is 375 x 1325 CSS px - about 17 MB of backing store at
   3x, carried for the whole depth sequence to show nothing. iOS is
   tight on layer memory and evicts tiles under pressure, which is
   re-rasterising during exactly the scroll that has to stay smooth.

   visibility:hidden takes it out of painting and compositing entirely;
   transform:none stops the promotion. Neither touches layout, so the
   margin correction that puts About at the end of the depth still
   applies and BLANK stays 0. The moment the dissolve begins this comes
   off, at an opacity of about 0.001 - nothing to see in the handover.
   Scoped to the phone deliberately. Desktop is smooth as it is and has
   the memory to spare, and the brief was to change nothing there. */
@media (max-width:900px){
  body[data-page="home"].handoff-ready .about.handoff-idle{
    visibility:hidden;
    transform:none;
  }
}

/* The hero has nothing left to say once the depth has finished and
   About has taken the frame; letting it keep compositing underneath
   costs a full-screen layer for no picture. */
body[data-page="home"].handoff-ready .hero.handoff-done{ visibility:hidden; }

/* Less travel on a phone. The dissolve happens over the tail of a
   shorter pin - 90% of the viewport rather than 115% - so the same
   64px of rise reads as a longer, slower drift against much less
   scroll. 40px keeps the gesture proportional to the runway. */
@media (max-width:900px){
  body[data-page="home"].handoff-ready .about{
    transform:translate3d(0, calc(var(--handoff, 0) * 40px), 0);
  }
}

@media (prefers-reduced-motion: reduce){
  body[data-page="home"].handoff-ready .about{
    opacity:1 !important;
    transform:none !important;
  }
}


/* ============================================================
   HERO COPY ON A PORTRAIT PHONE
   The phone hero is its own picture, composed for this shape: the
   towers occupy the upper two thirds and the ground below them is
   where the copy belongs - under the building, as the reference has
   it, not across its glass.

   The block is anchored to the bottom of the hero, so the only way
   to start it lower is to make it shorter. The type comes down a
   little and the gaps come in; the wording, the line breaks and the
   order are untouched.

   Portrait phones only: landscape and desktop keep their own rules.
   ============================================================ */
@media (max-aspect-ratio: 1/1) and (max-width: 900px){
  body[data-page="home"] .hero{
    padding-top:calc(var(--nav-h, 68px) + 20px);
    padding-bottom:40px;
  }
  body[data-page="home"] .hero-eyebrow{
    font-size:.56rem;
    margin-bottom:10px;
  }
  body[data-page="home"] .hero-title{
    /* The reference breaks after TECHNICAL. At this size the whole first
       line would otherwise fit, so the measure is capped to put the break
       back - as a share of the column, so it holds at any phone width. */
    max-width:82%;
    font-size:clamp(1.5rem, 6.6vw, 2.1rem);
    line-height:.97;
  }
  body[data-page="home"] .hero-sub{
    font-size:.78rem;
    line-height:1.42;
    margin-top:12px;
  }
  body[data-page="home"] .hero-actions{
    margin-top:14px;
  }
}

/* The scroll cue is absolutely positioned 36px off the bottom, which the
   lowered copy now runs into. On a portrait phone it sits right at the edge
   with a shorter rule, so it reads below the copy as it does in the
   reference rather than through it. */
@media (max-aspect-ratio: 1/1) and (max-width: 900px){
  body[data-page="home"] .scroll-indicator{
    bottom:8px;
  }
  body[data-page="home"] .scroll-line{
    height:22px;
  }
}