/* Home scroll-hero — a self-contained, scroll-driven sequence that replaces the
   old #home-intro and hands off to the works mosaic below. Two beats inside one
   sticky full-viewport stage:
     1) the offset logo reveal — scattered stickers melt together and set as the
        lockup (/assets/js/logo-reveal.js, run in driven mode off this timeline)
     2) the pixel-lane image sequence rises from below and conceals the logo.
   All classes are ys- prefixed so nothing collides with the shared site CSS. */

.ys-hero {
  --p: 0;
  --rise2: 0;
  --conceal: 0;
  --fly: 0;

  /* The reveal paints its own ground; this is what shows behind it and under
     the sequence, and the driver keeps it in step with the version. */
  --ys-paper: #393933;
  --ys-text: #ffffff;
  /* the highlight block itself is .hl-block, in extra.css */
  --ys-logo: #f8fea8;

  position: relative;
  height: 445vh;
  background: var(--ys-paper);
  color: var(--ys-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-stretch: condensed;
}

/* The previous hero's #home-intro rules (id specificity) still match this section
   and would break the sticky stage — flex-centering collapses it to zero width and
   overflow:hidden disables the sticky. Neutralise those and restore our paper. */
#home-intro.ys-hero {
  display: block;
  align-items: initial;
  justify-content: initial;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: var(--ys-paper);
}

.ys-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  /* No block of type to keep room for any more — the stage is exactly the
     viewport and the reveal's own export fills it. */
  overflow: hidden;
  isolation: isolate;
  background: var(--ys-paper);
}

/* ---- Beat 1: the offset logo reveal ----
   A layer inside the stage rather than a scroll well of its own; the driver
   hands it a playhead. It fades under the sequence exactly as the old wordmark
   did, so the handoff below is unchanged. */
.ys-reveal {
  position: absolute;
  z-index: 8;
  inset: 0;
  /* --fly cuts rather than fades: the copy that leaves is identical and in the
     same place, so a fade would only double-expose the lockup. */
  opacity: calc((1 - var(--fly)) * (1 - var(--conceal)));
  will-change: opacity;
}

/* ---- the lockup in flight ----
   Fixed, so once it lands in the bar it stays there through everything below.
   Above the header while travelling; the bar's own mark takes over on landing. */
.ys-fly {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 51;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, width, height;
}

.ys-fly > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }


/* ---- Frame 4: the pixel-lane sequence layer (transparent, higher z) ---- */
.ys-incoming {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate3d(0, calc((1 - var(--rise2)) * 100svh), 0);
  will-change: transform;
}

.ys-seq-canvas {
  display: block;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  /* One screen, the reveal held on its finished lockup, no sequence. */
  .ys-hero { height: 100svh; }
  .ys-incoming { display: none; }
}