/* chrome/strip.css — the looping text strip between the hero and #intro.
   Spec: 146 §2, as amended by 148 §2 and §4. Decision: 145 §5.3, Xinlu's.

   ⚠️ PAGE-LEVEL, NOT A SECTION. It creates no ScrollTrigger, is not in
   main.js's SECTIONS, and changes no pin budget — the same standing the bar
   has (092 §1). C-3a asserts the trigger count is unchanged against v0.12.0.

   ⚠️ NOT SVG, AND THE REASON IS THAT XINLU REMOVED THE CURVE (146 §2.2). The
   React reference draws on an SVG <textPath> because it supports a curve; at
   curveAmount 0 the path is a straight line and <textPath> buys nothing while
   costing real things — text size coupled to viewport through the viewBox,
   xml:space handling, getComputedTextLength() racing font load, and a
   min-height:100vh demo wrapper that is not a thin strip. One track div,
   translated on X. If the curve ever comes back, SVG comes back with it.

   Three boxes:
     .strip           the band; owns the background, the height and touch-action
       .strip__track  absolutely positioned, translated on X by strip.js
         .strip__unit one copy of the twelve phrases; cloned to fill */

.strip {
  /* ⚠️ 85 AND 51 WERE SET BY LOOKING, NOT DERIVED (152 §1.1/§1.2). Xinlu tuned
     both on hardware with ?striph=. They are not a ratio of anything and there
     is no formula to re-derive them from.

     ⚠️ 51 IS LARGER THAN THE 48 IT REPLACES, AND THAT IS THE DECISION. He
     reasoned beforehand that a white band is over-prominent in portrait and
     should drop about a fifth, to ~38. Looking put him at 51. The looking wins:
     000 §5 records his reported experience being right where the reasoning was
     not. Do not "fix" this toward 38.

     His goal is still met by the other end — desktop goes 7.11% -> 9.44% of
     viewport height while mobile only moves 5.69% -> 6.04%, so the
     desktop-to-mobile ratio widens 1.25x -> 1.56x. The restraint came from not
     growing mobile, not from shrinking it. */
  --strip-h: 85px;                              /* ?striph= — 152 §1.1 */
  --strip-gap: 2.5em;                           /* ?stripgap= */
  /* ⚠️ THE 0.40 IS UNCHANGED AND MUST STAY UNCHANGED (152 §2). Text is derived
     from the band, so raising --strip-h carries the text with it: 34.0 px
     desktop, 20.4 px mobile. Moving the ratio as well would compound the two
     changes, which is the error 152 exists partly to avoid. */
  --strip-size: calc(var(--strip-h) * 0.40);    /* ?stripsize= */
  /* ⚠️ NOT FLAG-DRIVEN AS OF 2026-09-03. ?stripweight= went with the 200 face
     (152 §4) — one light face left means the flag could only ever resolve to
     this value while reporting itself as read. This declaration is now the
     single source and .strip__track below is its only reader. */
  --strip-weight: 300;

  height: var(--strip-h);
  background: #fff;      /* the hero title's colour — hero.css:194 */
  color: #05060d;        /* #hero's own near-black */
  overflow: hidden;
  position: relative;
  user-select: none;
  -webkit-user-select: none;

  /* ⚠️ THE ONE LINE THAT DECIDES WHETHER THIS WORKS ON A PHONE (146 §2.6).
     Without it a vertical thumb-scroll that begins on the strip is captured by
     our pointerdown and the page does not move. With it the browser keeps the
     vertical axis and hands us horizontal movement only.

     THIS IS THE BADGE'S DECISION WITH THE OPPOSITE ANSWER. badge.css takes
     touch-action: none because the card must own the gesture; the strip must
     NEVER own the vertical axis, because it spans the full width between two
     sections and a visitor scrolling past it is the common case. The browser
     fires pointercancel when it claims the gesture — strip.js treats that as a
     release. C-2e tests both axes with trusted input. */
  touch-action: pan-y;
  cursor: grab;
}
.strip:active { cursor: grabbing; }

.strip__track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;

  font-family: 'Blinker Subset', sans-serif;
  font-weight: var(--strip-weight);
  font-size: var(--strip-size);
  line-height: 1;
  text-transform: uppercase;                    /* ?stripcase=title removes it */
  letter-spacing: 0.02em;
}

/* ⚠️ `display: flex`, NOT `inline-flex`. An earlier draft said inline-flex;
   a flex item's display is blockified, so it computed to flex anyway and the
   authored value was dead (147 §3.5). Saying what actually happens.

   No flex: none and no width: max-content here, deliberately. The track is
   absolutely positioned with width:auto, so it shrink-to-fits — and because
   every unit is white-space: nowrap, each one's automatic minimum size is its
   full text width, so shrink-to-fit resolves to the PREFERRED width and the
   units never compress. Measured at 10,373 px against a 1,440 px containing
   block (147 §3.5). If white-space ever leaves .strip__track, this stops being
   true and the units will squash. */
.strip__unit { display: flex; }

.strip__phrase { margin-right: var(--strip-gap); }

/* ?stripcase=title — set on .strip__track by strip.js. */
.strip__track.is-title { text-transform: none; }

/* ?stripdrag=0 — strip.js sets this; the band is then not draggable and must
   not claim to be. */
.strip.is-nodrag,
.strip.is-nodrag:active { cursor: default; }

/* 152 §1.2 — set by looking, see the note at --strip-h above. Was 48px. */
@media (max-width: 767px) { .strip { --strip-h: 51px; } }

/* ⚠️ NO REDUCED-MOTION RULE HERE, AND THAT IS NOT AN OMISSION. Under
   prefers-reduced-motion strip.js does not add the ticker; the strip sits
   still at x = 0 — a stated value, not whatever the first frame happened to
   be (036 §7.5) — and stays readable and draggable. There is nothing for CSS
   to still, and a rule here would be a second source of truth for a decision
   the module already makes. C-2f asserts both arms. */