/* ==========================================================================
   block2.css — what rides on the second block's own scroll (js/block2.js).

   PART 1: two columns of type either side of centre, travelling up through the
   white block. Figma 14528:14029 — 10px / -0.4px / uppercase / line-height .5
   in #393939, a 91px left column and a 71px right one, 64px apart, each under a
   6px mark, the pair centred on the viewport.

   The same four type values css/ui.css's .cols already uses, and line-height .5
   is load-bearing here for the same reason it is there: at 1 the 6px row gaps
   stop reading as gaps.
   ========================================================================== */

/* THE TWO COLUMN WIDTHS ARE VARIABLES because the logo's centring is derived
   from them. They are not the same width — 91 and 71 — so the GAP between the
   columns is not centred on the pair: it sits (91-71)/2 = 10px to the right of
   it. Anything placed at the frame's dead centre therefore lands 10px left of
   the middle of the gap, which is exactly what the mark was doing. Written
   once here and read in both places, so changing a column width moves the mark
   with it instead of leaving a stale number behind. */
.b2{
  --b2-col-l: 91px;
  --b2-col-r: 71px;
  position: fixed; inset: 0; z-index: 41;
  pointer-events: none;
  font-size: var(--ui-10); letter-spacing: -0.4px; line-height: .5;
  text-transform: uppercase; color: #393939;
  /* Off until the white has arrived. #393939 over the black block would be
     invisible anyway; this makes that explicit rather than accidental. */
  opacity: 0; transition: opacity .3s linear;
}
.b2.is-on{ opacity: 1; }
.b2 p{ margin: 0; }

/* ---------------- the travelling pair ------------------------------------- */
/* CENTRED, then displaced. The centring is a transform on this element and the
   travel is a second transform inside it, so the two never have to be composed
   by hand — retune the travel and the rest position is still exactly centre. */
.b2__cols{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 64px; align-items: flex-start;
}
.b2__colsinner{
  display: flex; gap: 64px; align-items: flex-start;
  /* js/block2.js writes both of these every frame. */
  transform: translateY(var(--b2-cols-y, 75vh));
  opacity: var(--b2-cols-a, 0);
  will-change: transform, opacity;
}

.b2__col{ display: flex; flex-direction: column; gap: 6px; }
.b2__col--l{ width: var(--b2-col-l); align-items: flex-start; }
.b2__col--r{ width: var(--b2-col-r); align-items: flex-end; text-align: right; }
.b2__list{ display: flex; flex-direction: column; gap: 6px; width: 100%; }
.b2__col--l .b2__list p{ width: 71px; }

/* The mark above each column — the same 6 x 6.667 plus the bar and the work
   page's columns use, at the same 50%. */
.b2__mark{ width: 6px; height: 6.667px; opacity: .5; display: block; }

/* ---------------- the corner labels --------------------------------------- */
/* Figma pins these at 10,10 and 115,10/21/33, and mirrors the pair on the
   right. Static chrome: they do not travel with the columns. */
.b2__corner{ position: absolute; top: 10px; display: grid; row-gap: 6px; }
.b2__corner--l{ left: 10px; }
.b2__corner--r{ right: 10px; text-align: right; }
.b2__corner .a{ position: absolute; top: 0; }
.b2__corner--l .a{ left: 0; }
.b2__corner--r .a{ right: 0; }
/* How far the stack of three sits in from the outer word. ONE VARIABLE, two
   mirrored rules: it was a bare 105 in both, and two copies of a number are two
   numbers the day one of them is edited. js/block2.js writes it. */
.b2__corner .b{ margin-left: var(--b2-corner-gap, 105px); }
.b2__corner--r .b{ margin-left: 0; margin-right: var(--b2-corner-gap, 105px); }

/* ---------------- the logo, between the columns ---------------------------
   .wfig gives it its size and its centring (css/figure-host.css); this only
   says WHICH box it is centred in. .b2__colsinner is the pair of columns, so
   the mark lands exactly between them — which is where Figma draws it, and it
   stays there when the columns move rather than being pinned to the viewport
   and drifting out of the gap.

   NO `position: relative` IS NEEDED and none is set: .b2__colsinner already
   carries a transform, and a transform makes an element the containing block
   for its absolutely positioned descendants on its own. Adding one would read
   as load-bearing when it is not.

   IT MUST NOT EAT THE POINTER. Block 02 shows "hover to reveal" and tracks the
   cursor across this whole area; a box that swallowed a pointermove would
   punch a hole in that. .wfig is already pointer-events:none — this note is to
   say that is load-bearing here, not decoration. */
.b2__logo{ z-index: 3; }

/* RIDING WITH THE TEXT INSTEAD, if that is what is wanted. --b2-cols-y is the
   columns' own travel and js/block2.js writes it on .b2, so it inherits down
   here and this stays in step with them for free — no second subscription to
   the scroll, and nothing to keep synchronised.

   The 50vh is the reference: when the columns' top is at mid-screen the mark
   is at the centre, exactly where the fixed version sits, and it moves one for
   one with them from there. */
.b2__logo.is-with-text{
  transform: translate(-50%, -50%)
             translate(var(--wfig-dx, 0px), var(--wfig-dy, 0px))
             /* Into the middle of the GAP rather than the middle of the pair.
                See the note by --b2-col-l. */
             translateX(calc((var(--b2-col-l) - var(--b2-col-r)) / 2))
             translateY(calc(var(--b2-cols-y, 50vh) - 50vh));
}

/* ---------------- part 2's caption layer ---------------------------------- */
/* HIDDEN, like .mask-body and .work-blobs, and for the identical reason: on
   this page the canvas is not something the compositor shows, it is a texture
   js/mask-scroll.js samples into the white block between the ASCII ground and
   the head. `visibility` rather than `display`, so it keeps its size and its
   backing store. */
.b2-cap{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  visibility: hidden;
  pointer-events: none;
}

/* THE COLUMNS' ENTRANCE, held until the white block is actually on screen.
   js/block2.js adds this at mount and removes it once the transition lands —
   the same mechanism css/loader.css uses for the loader and js/about-text.js
   uses for the copy, and for the same reason: an animation that plays where
   nobody is looking has not happened. */
.b2.is-held .anim-line{ animation-play-state: paused; }

/* The corner labels fade on their own clock — js/block2.js writes this — because
   they belong to the reading part of the block and not to the footer. */
.b2__corner{ opacity: var(--b2-corner-a, 1); }

/* ---------------- the cursor's label -------------------------------------- */
/* Follows the pointer while block 02 has the screen. Fixed rather than inside
   .b2's transform stack so it is positioned in viewport coordinates — the same
   coordinates a pointer event reports, which means no conversion and nothing to
   get wrong when the block scrolls underneath it.

   Note it does NOT inherit .b2's opacity: this has its own show/hide, because
   "the block is on screen" and "the pointer is over the block" are two
   different questions and only the second one governs a cursor. */
.b2__hint{
  position: fixed; left: 0; top: 0; z-index: 61;
  margin: 0; pointer-events: none;
  font-size: var(--ui-10); letter-spacing: -0.4px; line-height: .5;
  text-transform: uppercase; color: #393939;
  white-space: nowrap;
  opacity: 0; transition: opacity .14s linear;
  will-change: transform;
}
.b2__hint.is-on{ opacity: 1; }