/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS: the section the landing screen becomes.

   Nothing on this screen is new. The V is the hero's own `#hero-mark`, still
   fixed to the viewport, moved into the upper-right background by the
   variables scripts/process/journey.js writes on it; the terrain is the
   hero's wave, still fixed at the foot of the window and let through by a
   transparent ground; the orbit and its four nodes are drawn from the same
   point shader the wave is, on this section's own canvas; and the type is the
   page's: the kicker is the hero's kicker, the heading is the studio
   section's lit metal, the link is the hero's text link. What this file adds
   is where they stand and how they arrive.

   Two layouts, and the default is the plain one:

     · a stacked column: kicker, heading, copy, link, then the four stages as
       a list with a lit node beside each. This is what a narrow, short or
       portrait window gets, what a page without scripts gets, and what forced
       colours get. It reads without a single variable being written.

     · the composition: only under `(scripting: enabled)` on a frame wide
       enough to hold it (the same boundary scripts/process/journey.js runs
       on): a travel box three screens tall with a stage pinned for two of
       them, the editorial block absolute on the left, the labels absolute
       under their nodes, and every arrival a function of the playhead.

   Layering inside the stage, back to front: the scrim, the canvas, the copy
   and the labels. Behind all of it, through the transparent ground, the V
   and the wave. Nothing here is hit-tested but the link.
   ═════════════════════════════════════════════════════════════════════════ */

.process {
  position: relative;
  z-index: 2;
  min-height: auto;
  overflow: visible;
  padding: clamp(72px, 14vw, 120px) var(--gutter) clamp(64px, 10vw, 110px);
  background: transparent;
}

.process-scroll,
.process-stage { position: relative; }

.process-scrim,
.process-canvas,
.process-objects { display: none; }

/* ── the editorial block ──────────────────────────────────────────────── */

.process-copy {
  position: relative;
  z-index: 2;
  max-width: 40ch;
}

/* The hero's kicker, restated: the process is the hero's argument continued. */
.process-kicker {
  font-family: var(--font-mono);
  font-size: clamp(8.5px, .67vw, 11px);
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--signal-hot);
  margin: 0 0 clamp(18px, 2.4vh, 30px);
}

/* Lit metal on the studio section's terms, a size down: this is a statement
   in a composition with a drawing, not the section's whole screen. */
.process-heading {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 4.7vw, 4.9rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.012em;
  text-transform: uppercase;
  background: linear-gradient(177deg,
    #ffffff 2%, #eef4f7 20%, #b9c6cd 48%, #8894a0 68%, #b3c2ce 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.process-body {
  margin: clamp(20px, 2.8vh, 34px) 0 0;
  font-size: clamp(.95rem, 1.15vw, 1.06rem);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 40ch;
}

.process-link {
  display: inline-block;
  margin-top: clamp(22px, 3.2vh, 38px);
}

/* ── the four stages ──────────────────────────────────────────────────── */

.process-stages {
  position: relative;
  z-index: 2;
  margin-top: clamp(44px, 7vh, 72px);
  border-top: 1px solid var(--paper-line);
}

.process-stage-item {
  position: relative;
  padding: 22px 0 22px 40px;
  border-bottom: 1px solid var(--paper-line);
}

.process-num {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--signal-hot);
}

.process-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-1);
}

.process-desc {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}

/* The node, drawn by the stylesheet: a lit point and the ring around it. In
   the composition these are the canvas's to draw and these two are switched
   off the frame it is lit (`.is-lit`); everywhere else, the column, a page
   without scripts, a machine with no canvas at all, they are the node. */
.process-stage-item::before,
.process-stage-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  border-radius: 50%;
  pointer-events: none;
}
.process-stage-item::before {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 5px;
  background: var(--cyan-l3);
  box-shadow: 0 0 10px var(--cyan-l3-glow), 0 0 2px var(--cyan-l3);
}
.process-stage-item::after {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -3.5px;
  border: 1px solid rgba(34, 230, 255, 0.34);
}

/* ═══ THE COMPOSITION ═══════════════════════════════════════════════════
   One frame condition, stated once, and the complement of the compact
   breakpoint experience.css and swarm.css share, so a window is always in
   exactly one of the two layouts. */
@media (scripting: enabled) and (min-width: 901px) and (min-height: 640px) and (min-aspect-ratio: 1/1) {

  .process { padding: 0; }

  /* The travel. Three screens: the first is the hero leaving and the stage
     sliding up under it; the stage then holds for two while the orbit forms.
     `svh`, like every travel box on this page, so a sliding URL bar does not
     restate the length of the shot. scripts/process/orbit.js's TRAVEL is
     this number, and tests/process.mjs holds the two together. */
  .process-scroll { height: 300svh; }

  /* Held at the top for the length of the travel. `overflow: clip` is on THIS
     element rather than on the section for the same reason the build stage
     carries it: a clipping ancestor between a sticky box and the scroller
     breaks the stick. `.section`'s own `overflow: hidden` is undone above. */
  .process-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: clip;
  }

  /* The wash under the copy: the hero's own left-hand scrim, arriving with the
     block it keeps legible and never touching the right of the frame where
     the drawing is. */
  .process-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
      rgba(2, 6, 11, 0.86) 0%, rgba(2, 6, 11, 0.62) 22%,
      rgba(2, 6, 11, 0.18) 44%, transparent 60%);
    opacity: var(--ed, 1);
  }

  .process-canvas {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transition: opacity 900ms var(--ease-soft);
  }
  /* Lit on the frame the first one is drawn (scripts/process/journey.js). */
  .process.is-lit .process-canvas { opacity: 1; }

  /* The objects behind the nodes (scripts/process/objects.js): a second
     canvas the script adds after the orbit's, on the same layer, so it is
     over the drawing by document order and under every word by z-index, and
     transparent until a hand is on a node. It carries no box of its own,
     no background and no edge: what appears on it appears in the scene. */
  .process-objects {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
  }
  /* ...and the stylesheet's own nodes step aside for the canvas's. */
  .process.is-lit .process-stage-item::before,
  .process.is-lit .process-stage-item::after { display: none; }

  /* The block, on the hero's own gutter, arriving as one thing: opacity, a
     short rise and a softness that clears, all on the same number. It is
     never re-laid-out: the composition it settles into is the one it left. */
  .process-copy {
    position: absolute;
    left: var(--gutter);
    top: 40%;
    z-index: 2;
    width: min(38vw, 560px);
    max-width: none;
    opacity: var(--ed, 1);
    /* ...and from a little further off: the block resolves forward to its
       place as the camera arrives, three per cent from its own left edge,
       the mirror of the hero's copy leaving (styles/swarm.css), so the two
       are one plane the lens passed and one it came to rest on. */
    transform: translate3d(0, calc((1 - var(--ed, 1)) * 26px), 0)
               scale(calc(1 - (1 - var(--ed, 1)) * 0.05));
    transform-origin: 0% 50%;
    filter: blur(calc((1 - var(--ed, 1)) * 3px));
  }
  .process-copy > * { pointer-events: auto; }
  /* A keyboard reaches the link before the scroll has brought the block in:
     the browser scrolls the control into view, not the stage's composition.
     Focus within the block is the block at full strength, whatever the
     playhead says: a focused control that cannot be seen is a defect. */
  .process-copy:focus-within { opacity: 1; transform: none; filter: none; }

  /* The labels hang under their nodes at the positions the geometry gives
     them (`--lx`, `--ly`, in the stage's own pixels), and each arrives only
     on its own number: written once its node has established itself. */
  .process-stages {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    border: 0;
    pointer-events: none;
  }
  .process-stage-item {
    position: absolute;
    left: var(--lx, 50%);
    top: var(--ly, 60%);
    width: min(11.5vw, 184px);
    padding: 0;
    border: 0;
    text-align: center;
    transform: translate3d(-50%, calc((1 - var(--n, 1)) * 10px), 0);
    opacity: var(--n, 1);
  }
  .process-stage-item:nth-child(1) { --n: var(--n1, 1); }
  .process-stage-item:nth-child(2) { --n: var(--n2, 1); }
  .process-stage-item:nth-child(3) { --n: var(--n3, 1); }
  .process-stage-item:nth-child(4) { --n: var(--n4, 1); }

  /* The label is an instrument reading, and it resolves like one: the index
     arrives tracked wide and closes to its set width as it lands, lit by a
     little of its own colour; the name arrives on a hairline that draws
     from the node's own axis outward. Both on the label's number, so a
     scrubbed frame is the frame, and at `--n` 1 the label is exactly the
     label it always was. */
  .process-num {
    margin-bottom: 8px;
    letter-spacing: calc(.18em + (1 - var(--n, 1)) * .34em);
    text-shadow: 0 0 10px rgba(34, 230, 255, calc(0.18 + (1 - var(--n, 1)) * 0.5));
  }
  .process-name {
    position: relative;
    padding-top: 6px;
  }
  .process-name::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 28px;
    height: 1px;
    margin-left: -14px;
    background: linear-gradient(90deg, transparent, rgba(34, 230, 255, 0.5) 30%, rgba(34, 230, 255, 0.5) 70%, transparent);
    transform: scaleX(var(--n, 1));
    transform-origin: 50% 50%;
  }

  /* Where the canvas never lights (no renderer at all) the stylesheet's
     nodes stand where the canvas's would, on the same numbers. */
  .process-stage-item::before,
  .process-stage-item::after {
    left: 50%;
    top: -30px;
  }
  .process-stage-item::before { margin: -3.5px 0 0 -3.5px; }
  .process-stage-item::after { margin: -12px 0 0 -12px; }

  /* A reader who asked for less motion is given the destination without the
     journey: one screen, the stage in place, the V repositioned into its role
     and the four stages already on their path. journey.js steps the playhead
     to match, and the .18s the page allows every transition is what remains. */
  @media (prefers-reduced-motion: reduce) {
    .process-scroll { height: auto; }
    .process-stage { position: relative; height: 100svh; }
    .process-copy { filter: none; }
  }
}

/* Forced colours asks for a page made of system colours; a lit drawing is the
   opposite of that. The section keeps its type and its list. */
@media (forced-colors: active) {
  .process-scrim,
  .process-canvas,
  .process-objects { display: none !important; }
  .process-scroll { height: auto !important; }
  .process-stage { position: relative !important; height: auto !important; }
  .process-stage-item::before { background: CanvasText; box-shadow: none; }
  .process-stage-item::after { border-color: CanvasText; }
}

/* The document, in order, in ink: no travel, no pin, no drawing, every label. */
@media print {
  .process { padding: 48px 0 !important; }
  .process-scroll { height: auto !important; }
  .process-stage { position: static !important; height: auto !important; overflow: visible !important; }
  .process-scrim, .process-canvas, .process-objects { display: none !important; }
  .process-copy, .process-stages, .process-stage-item {
    position: static !important;
    width: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    text-align: left !important;
  }
  .process-heading { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; }
}