/* Client strip — V0.1 Home band at y870, 1280×150, full bleed. Label pill: x50 y47,
   57 tall, Ekstra 21.4 on black (the band artwork is exported without it; ours is live).
   --u is one artwork pixel: the band scales with the viewport, and never gets thinner
   than 120px (below that it crops from the right, keeping the pill side). */
.block--client-strip { container-type: inline-size; overflow: hidden; background: var(--color-black); }
.block--client-strip .client-strip__stage {
  --u: max(100cqw / 1280, 0.8px);
  position: relative;
  height: calc(var(--u) * 150);
}

.block--client-strip .client-strip__band {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--color-black); /* opaque: the band under it never shows through */
  visibility: hidden; /* bands cut, no wipe (Nick, 11-03 review) */
}
.block--client-strip .client-strip__band.is-active { visibility: visible; }
.block--client-strip .client-strip__art { position: absolute; inset: 0; }
.block--client-strip .client-strip__art > :is(img, video) {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center;
}
@media (min-width: 768px) { .block--client-strip .client-strip__art--phone { display: none; } }
@media (max-width: 767px) { .block--client-strip .client-strip__art--wide { display: none; } }

/* Grid bands (review 10-29, W5/W6): one column grid for every band, so the wipe never
   shows edges jumping. --g is one grid pixel; desktop shares the artwork's --u (1280×150),
   phones get their own taller band (390×200) and their own 3-column flow of the same tiles,
   the third cut by the edge.
   Five equal columns, 20 gap, the outer two bleeding 30 off each side. Each column's track
   holds its stack twice and slides up by one copy (-50%) at a constant speed, so what
   leaves the top comes back in at the bottom; duration = copy height / speed. It runs only
   on the band on show while the strip is on screen (client-strip.js sets .is-running). */
.block--client-strip .client-strip__stage { --g: var(--u); --strip-h: 150; --col: 252; --gap: 20; --x0: -30; --speed: 12; }
@media (max-width: 767px) {
  .block--client-strip .client-strip__stage { --g: calc(100cqw / 390); --strip-h: 200; --col: 160; --gap: 10; --x0: -20; --speed: 9; }
}
.block--client-strip .client-strip__stage:has(.client-strip__band--grid, .client-strip__art--phone) { height: calc(var(--g) * var(--strip-h)); }
.block--client-strip .client-strip__grid {
  position: absolute; inset: 0;
  display: flex; gap: calc(var(--g) * var(--gap));
  margin-left: calc(var(--g) * var(--x0));
}
@media (min-width: 768px) { .block--client-strip .client-strip__grid--phone { display: none; } }
@media (max-width: 767px) { .block--client-strip .client-strip__grid--wide { display: none; } }
.block--client-strip .client-strip__col { flex: none; width: calc(var(--g) * var(--col)); }
.block--client-strip .client-strip__track {
  display: flex; flex-direction: column; gap: calc(var(--g) * var(--gap));
  padding-bottom: calc(var(--g) * var(--gap)); /* so two copies are exactly twice one: -50% is seamless */
  --dur: calc((var(--h) * var(--col) + var(--n) * var(--gap)) / (var(--speed) * var(--pace, 1)) * 1s);
  animation: client-strip-drift var(--dur) linear infinite paused;
  animation-delay: calc(var(--phase) * var(--dur) * -1);
}
.block--client-strip.is-running .client-strip__band.is-active .client-strip__track { animation-play-state: running; }
/* Up, down, up, down, up (Tucker, 10-29): even columns run the same loop backwards. */
.block--client-strip .client-strip__col:nth-child(even) .client-strip__track { animation-direction: reverse; }
@keyframes client-strip-drift { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .block--client-strip .client-strip__track { animation: none; } }
.block--client-strip .client-strip__tile {
  aspect-ratio: var(--r); overflow: hidden;
  border-radius: calc(var(--g) * 20); /* V0.1: radius-md at 1280, scaled with the band like the pill */
  background: var(--surface-chrome-inverse);
}
.block--client-strip .client-strip__tile > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Entrance "rise" (a strip-tile file setting; Tucker's RAMP-3 directive, 10-29): each time the
   band comes on, the tile's media rises from below its frame, overshoots 3% and settles,
   650ms, starting as the wipe uncovers its column (--at). A clip in it starts
   only after it lands (client-strip.js). The ground fills the frame behind it. */
.block--client-strip .client-strip__tile--rise { background: var(--ground, var(--surface-chrome-inverse)); }
.block--client-strip .client-strip__tile--rise > * { border-radius: inherit; } /* the media's own corners travel through the frame */
.block--client-strip .client-strip__band.is-arriving .client-strip__tile--rise > * {
  animation: client-strip-rise 650ms linear var(--at) both;
}
/* Travel on an ease-out cubic to 3% past centre, then settle back on an ease-in-out.
   (--ease-out, the site's expo, front-loads it: the card popped in ~100ms instead of sliding.) */
@keyframes client-strip-rise {
  from { transform: translateY(100%); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  70% { transform: translateY(-3%); animation-timing-function: var(--ease-in-out); }
  to { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .block--client-strip .client-strip__band.is-arriving .client-strip__tile--rise > * { animation: none; } }

/* Chain band (CSS-F3 5395:2010, the land state; its motion waits on M2's directives).
   V0.1 values, measured off the 2x render: the ground runs #7c5ce1 into the black by 1100 of
   1280; nodes 40 tall, 1px #636363 edge, 17 type; 52 wires, each ending in a 6 port. All of
   it scales with the pill (--u × --pill), so the chain starts where the live pill ends. */
.block--client-strip .client-strip__band--chain { background: #0b0b0b; }
.block--client-strip .client-strip__band--chain::before {
  content: ""; position: absolute; inset: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, #7c5ce1, #0b0b0b 86%); /* V0.1 */
}
.block--client-strip .client-strip__chain {
  --s: calc(var(--u) * var(--pill));
  position: absolute; left: var(--pill-x); top: calc(50% - var(--s) * 28.5);
  height: calc(var(--s) * 57);
  display: flex; align-items: center; white-space: nowrap;
}
.block--client-strip .client-strip__chain-label { /* holds the pill's place: same type and padding, unseen */
  padding: 0 calc(var(--s) * 21);
  font-family: var(--font-ui); font-size: calc(var(--s) * 21.44); letter-spacing: -0.05em;
  visibility: hidden;
}
.block--client-strip .client-strip__wire { position: relative; width: calc(var(--s) * 58); height: 1px; background: rgb(255 255 255 / 0.2); /* V0.1 */ }
.block--client-strip .client-strip__wire::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: calc(var(--s) * 6); aspect-ratio: 1; translate: 0 -50%;
  border: 1px solid rgb(255 255 255 / 0.45); border-radius: var(--radius-pill); /* V0.1 */
}
.block--client-strip .client-strip__node {
  display: grid; align-items: center;
  height: calc(var(--s) * 40); padding: 0 calc(var(--s) * 30);
  border: 1px solid #636363; border-radius: var(--radius-pill); /* V0.1 */
  background: rgb(255 255 255 / 0.06); /* V0.1 */
  color: var(--color-white); font-family: var(--font-body); font-size: calc(var(--s) * 17); /* V0.1 */
}
/* M2 (Dani, 5406:1427): "Gradient expands, cursor clicks and drags new nodes." Each time the band
   arrives, the cursor pulls the nodes out one by one along their wires and the ground grows behind
   them. It plays once per arrival (the bands are scroll-driven, not timed); the land state above is
   what no-JS, reduced motion and every other moment show. */
.block--client-strip .client-strip__node { position: relative; }
.block--client-strip .client-strip__node::after { /* the cursor that drags this node in */
  content: ""; position: absolute; left: calc(var(--s) * -6); top: 50%;
  width: calc(var(--s) * 30); aspect-ratio: 22 / 24; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath d='M2 2l17 8.5-7.4 2.1L8.4 21z' fill='%23fff' stroke='%230b0b0b' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .block--client-strip .client-strip__band--chain.is-arriving::before { animation: chain-ground 2.6s 0.35s var(--ease-out) both; }
  .block--client-strip .client-strip__band--chain.is-arriving .client-strip__wire { animation: chain-wire 0.45s calc(0.5s + var(--i) * 0.6s) var(--ease-out) both; }
  .block--client-strip .client-strip__band--chain.is-arriving .client-strip__node { animation: chain-node 0.6s calc(0.45s + var(--i) * 0.6s) cubic-bezier(0.34, 1.4, 0.64, 1) both; }
  .block--client-strip .client-strip__band--chain.is-arriving .client-strip__node::after { animation: chain-cursor 0.8s calc(0.45s + var(--i) * 0.6s) linear both; }
}
@keyframes chain-ground { from { transform: scaleX(0.42); } }
@keyframes chain-wire { from { clip-path: inset(-10px 100% -10px 0); } to { clip-path: inset(-10px 0 -10px 0); } }
@keyframes chain-node {
  from { transform: translateX(calc(var(--s) * -58)) scale(0.9); opacity: 0; }
  30% { opacity: 1; }
}
@keyframes chain-cursor { /* grips the node as it leaves the port, presses, rides the drag, lets go */
  0% { opacity: 0; transform: none; }
  10% { opacity: 1; transform: scale(0.82); }
  24%, 74% { opacity: 1; transform: scale(0.9); }
  84% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(calc(var(--s) * 8), calc(var(--s) * 6)); }
}

/* Pill: every label sits in one grid cell on top. Its black ground lives in each band
   (sized by a copy of that band's label), so it wipes in and out with its artwork, and is
   never wider than the label on show. */
/* Desktop pill: halved (Nick, 2026-09-26), then 20% back up (09-28), so 0.6 of the comp's,
   centred on the same line. The bands no longer carry a baked pill, so nothing shows around
   it. Phones keep the full size: the band is at its 120px floor there.
   The pill starts on the page's content edge, the line the logo and body copy share
   (Nick 09-28), not at the artwork's x50. */
.block--client-strip { --pill: 1; --pill-x: max(var(--gutter), (100cqw - var(--container)) / 2 + var(--gutter)); }
@media (min-width: 768px) { .block--client-strip { --pill: 0.6; } }
.block--client-strip .client-strip__pill,
.block--client-strip .client-strip__band > .client-strip__ground {
  position: absolute;
  left: var(--pill-x); top: calc(50% - var(--u) * 28.5 * var(--pill)); /* centred: 75 of 150, and on phones' taller grid band */
  width: auto; height: calc(var(--u) * 57 * var(--pill));
  display: grid; align-items: center;
  padding: 0 calc(var(--u) * 21 * var(--pill));
  font-family: var(--font-ui); font-size: calc(var(--u) * 21.44 * var(--pill)); line-height: 1; letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  max-width: calc(100% - 2 * var(--pill-x)); overflow: hidden; /* long labels clip inside the band */
}
.block--client-strip .client-strip__pill { z-index: 999; color: var(--color-white); }
.block--client-strip .client-strip__band > .client-strip__ground {
  color: transparent; background: var(--color-black); border-radius: var(--radius-pill);
}
.block--client-strip .client-strip__label {
  position: relative; grid-area: 1 / 1; justify-self: start; white-space: nowrap;
  visibility: hidden; /* cuts with its band */
}
.block--client-strip .client-strip__label.is-active { visibility: visible; }
.no-js .block--client-strip .client-strip__label:not(.is-active) { display: none; }

/* The tall Home first screen above the strip is page-hero's `hero` size (page-hero.css). */

/* Keep the strip's internal stacking (bands step their z-index up on every swap, the pill
   sits at 999) from escaping over the mobile menu or the sticky header. */
.block--client-strip { isolation: isolate; }

/* Pre-roll: covers the bands and the pill while the strip only peeks under the hero, and
   cuts away once it's fully in view (client-strip.js toggles .is-past-preroll), the same
   cut the bands use. Scrolling back up brings it back. */
.block--client-strip .client-strip__preroll {
  position: absolute; inset: 0; z-index: 100000; overflow: hidden;
  background: var(--color-black);
}
.block--client-strip.is-past-preroll .client-strip__preroll { visibility: hidden; }
.block--client-strip .client-strip__preroll > * { display: block; width: 100%; height: 100%; object-fit: cover; }
.no-js .block--client-strip .client-strip__preroll { display: none; }