/* ==========================================================================
   tscroll.css — the strip of text you scroll through, Figma 14719:22210.

   WHERE IT SITS. Inside .b2, so it belongs to the white block and inherits
   its fade: before the head lands there is nothing here to show, and this
   type over the black block would be invisible anyway. js/block2.js drives
   --b2-ts-y the same way it drives --b2-cols-y, so the strip, the columns and
   the white texts are one phase moving on one clock rather than three layers
   agreeing to move at the same speed.

   1644px TALL AND IT PASSES. Not pinned, not held — the block's own height is
   the distance you scroll through it, and js/block2.js adds exactly that to
   everything after it so the columns start where the strip ends.
   ========================================================================== */
/* A SIBLING OF .b2, NOT A CHILD, and that is the whole point of this rule.
   .b2 is held at opacity 0 until the white has FULLY arrived and then fades
   in over .3s — correct for the columns, which belong to what comes after the
   transition, and wrong for this, which has to be on the white the moment the
   white is there. Inside that gate the type could only ever appear after the
   block did. Out here it carries the white's own progress instead, so the two
   arrive together and there is nothing left to watch turn up. */
.ts{
  position: fixed; left: 0; right: 0; top: 0;
  z-index: 41;
  pointer-events: none;
  opacity: var(--b2-ts-a, 0);
  height: 1644px;
  transform: translateY(var(--b2-ts-y, 100vh));
  will-change: transform;
  color: #393939;
  font-size: var(--ui-10);
  line-height: 11px;
  letter-spacing: -0.4px;
  text-transform: uppercase;
}
.ts__c{ position: absolute; inset: 0; }

/* THE TOP HALF IS THE BOTTOM HALF, TURNED. See the note in index.html — the
   origin is the file's own centre of symmetry, x as a share of its 1900 frame
   and y in the pixels the line pitch is measured in. */
.ts__c--flip{ transform-origin: 50.4158% 824.5px; transform: rotate(180deg); }

.ts__t, .ts__slash, .ts__bc, .ts__dots, .ts__brk, .ts__num, .ts__mark{ position: absolute; }

/* ONE LINE, ALWAYS. Measured, not assumed: rendered at the file's own 70px
   box, ROAMING AROUND, MYSTERY OF LIFE and NON-FUNCTIONAL each broke onto a
   second line and took every baseline under them with it. */
.ts__t{ white-space: nowrap; }
.ts__t p{ margin: 0; height: 11px; }

.ts__slash{ font-size: 64px; line-height: .9; letter-spacing: -0.06em; }

.ts__bc{
  background: repeating-linear-gradient(to bottom,
    currentColor 0 2px, transparent 2px 4px,
    currentColor 4px 5px, transparent 5px 9px,
    currentColor 9px 12px, transparent 12px 14px);
}

.ts__dots{ display: flex; flex-direction: column; gap: 2px; }
.ts__dots i{ width: 3px; height: 3px; background: currentColor; }

/* THE FILE'S OWN CORNER, TURNED FOUR WAYS. These were four divs with two
   borders each — close, and not the same drawing: the supplied arrow has an
   asymmetric foot that a border pair cannot produce. assets/tscroll/arrow.svg
   is drawn as the TOP-RIGHT corner, so the other three are quarter turns of
   it and the order below follows the markup. */
.ts__brk img{ position: absolute; display: block; }
.ts__brk img:nth-child(1){ right: 0; top: 0; }
.ts__brk img:nth-child(2){ right: 0; bottom: 0; transform: rotate(90deg); }
.ts__brk img:nth-child(3){ left: 0; bottom: 0; transform: rotate(180deg); }
.ts__brk img:nth-child(4){ left: 0; top: 0; transform: rotate(270deg); }

/* THE NUMERAL IS THE FILE'S VECTOR, not type. It shipped as text in a
   substitute face first, which is a different drawing wearing the same
   digits. 91 wide, 10 of gap, the figure bottom-aligned beside it. */
.ts__num{ display: flex; align-items: flex-end; gap: 10px; }
.ts__digits{ display: block; }
/* 32x64 on the page, 64x128 of buffer — the same 2x the rest of the site's
   small canvases use, so it is sharp on a retina screen and cheap on any. */
.ts__fig{ display: block; width: 32px; height: 64px; }

/* THE MARK IN THE MIDDLE, as drawn. It was assembled here from a cross, a
   label and four corners; the supplied file is one drawing and replaces all
   of that. Rebuilding artwork from parts is how a mark ends up nearly right. */
.ts__mark img{ display: block; }

/* ---------------- it arrives, it is not already there ----------------------
   The brief's one hard requirement. Every label uses the site's own reveal,
   held at frame zero until the strip is actually on screen and released once
   — so the visitor watches it resolve rather than scrolling into finished
   text. Paused rather than hidden: an animation that starts from `display`
   or opacity would replay from the wrong place on the way back up. */
/* ---------------- it does not arrive, it is simply there -------------------
   The block is reached, not entered: by the time it is on screen the type has
   to be finished, not finishing. It was the site's own reveal, held and then
   released — and at thirty labels that reads as a wait however short it is
   made, because the visitor is already looking at the place it will appear.

   The markup keeps .anim-line: the class is what block 01's copy uses and
   the labels are generated by the same code path. Neutralised here rather
   than stripped from sixty elements, so the two blocks stay one description.

   `animation: none` ON ITS OWN TOOK THE TEXT AWAY, and the reason is worth
   keeping. .anim-line is not a plain element that an animation moves: its
   BASE state in css/ui.css is `opacity: 0` plus a blur, and the animation is
   what brings it to 1. Remove the animation and the base state is all that is
   left — the labels were still there, laid out, and invisible. So the two
   properties the animation was undoing have to be undone here instead. */
.ts .anim-line{
  animation: none;
  opacity: 1;
  filter: none;
}