/* strip.css - piece P3: strip mechanics. Owner: P3.
   Mechanics only - the card's look belongs to card.css (P4). Two modes written
   by strip.js: data-mode="drift" (desktop ring: no scroll container, one
   composited track transform, grab cursor, hover/focus pause) and
   data-mode="native" (below 768px: a plain touch scroller, no drift). */

/* ---- the seam: the band is a surface that slid up over the stage ----
   Top to bottom at full reveal (1440x900, desktop):
     stage lattice        the stage's last whole cell row ends cleanly
     --band-lip of ground app.js: from that row's bottom edge down to the
                          hairline (5px at 1440x900) - the sliced row and the
                          mesh line above it are covered, so nothing doubles
                          the rule
     1px hairline         THE seam: base.css border-top, --gray at 40%, one
                          full-width line. It sits OUTSIDE the band's 30svh
                          body (content-box below), so the body and the cards
                          are whole lattice rows (--band-h = --card-h = 272
                          at 900) and the box is --band-h + 1.
     the pictures         cards edge to edge on --ground rails (card.css)
   No head row, no tint, no shadow, no second rule: the edge is one line made
   of the same two tones as everything else.
   The band paints NO ground of its own: base.css's `.band[data-band]` lays
   the page's dot lattice on it, and the margin cell below shows that lattice
   bare, exactly as the stage's margin does above the seam.

   ---- the edges: the strip is FULL-BLEED, its ring rests on the type axis ----
   The strip is a conveyor, and a conveyor is cut by the viewport, never by a
   line inside the page: it runs from x=0 to the right edge with no margin,
   no outer padding and no hairline of its own (P3 GEOMETRY brief; mek's strip
   bleeds off 1440 the same way). An earlier build opened the strip as a
   window at the stage's left axis (x=96 @1440) with a hairline at x=95 -
   which put a 52px sliver of whatever card the drift had carried there
   INSIDE the page margin, cut by a rule that aligned with nothing, and read
   as an accident (blind critic, wave 1 round 1). Full bleed makes the same
   cut a card leaving through the viewport edge, which every eye reads as
   "the strip continues".
   The page's axis still governs the ring's REST: strip.js homes the ring
   with card 01's left edge on the stage's --stage-x (96 @1440 / 72 @1280 /
   48 @768), so at the moment the band reveals - and under reduced motion,
   for good - tile 01 hangs off the same vertical as the name, the kicker
   and the statement, and the margin [0, axis) shows the end of the last
   card: the conveyor arriving from off-screen. The drift carries it from
   there. Native mode (the phone) is full-bleed too, per the P8 brief. */
.band {
  box-sizing: content-box;          /* the hairline is outside the 30svh body */
}
.band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* the containing block is the padding box; -1px is the hairline's own top */
  top: calc(-1px - var(--band-lip, 0px));
  height: var(--band-lip, 0px);
  background: var(--ground);
  pointer-events: none;
}

/* reduced motion: base.css pre-reveals the band by pulling it up --band-h;
   the box is one hairline taller, so pull the box and the page stays 100svh */
@media (prefers-reduced-motion: reduce) {
  .band { margin-top: calc(-1 * var(--band-h) - 1px); }
}

/* ---- drift mode ---- */
.strip[data-mode="drift"] {
  margin: 0;                      /* full bleed: no margin, no padding, no edge line (see above) */
  padding: 0;
  border: 0;
  overflow: clip;                 /* a ring is not a scroll container: focus() cannot scroll it */
  touch-action: pan-y;            /* vertical page scroll stays native; horizontal is ours */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.strip[data-mode="drift"] .strip__track {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* a card's lap round the ring lives on `translate` (set by strip.js), so P5
   owns `transform`. No per-card will-change: a lap changes once per cycle. */

.strip[data-mode="drift"] .card__hit { cursor: pointer; }

.strip[data-mode="drift"] img,
.strip[data-mode="drift"] canvas {
  -webkit-user-drag: none;        /* media never starts a native drag; strip.js also cancels dragstart */
}

/* while a press is a drag: grabbing hand everywhere, no text selection */
html[data-strip-dragging],
html[data-strip-dragging] .strip[data-mode="drift"],
html[data-strip-dragging] .strip[data-mode="drift"] .card__hit {
  cursor: grabbing;
}
html[data-strip-dragging] {
  -webkit-user-select: none;
  user-select: none;
}

/* ---- centred card: the one red on the strip ---- */
.card[data-centered="true"] .card__index { color: var(--red); }

/* ---- ring clones are visual only ---- */
.card[data-clone] { pointer-events: none; }

/* ---- native mode (mobile): momentum scroll, no drift, no snap ---- */
.strip[data-mode="native"] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: none;
  cursor: auto;
}
.strip[data-mode="native"] .strip__track { transform: none; }
.strip[data-mode="native"] .card { translate: none; }