/* ==========================================================================
   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.
   ========================================================================== */

.b2{
  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: 91px; align-items: flex-start; }
.b2__col--r{ width: 71px; 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))
             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; }