/**
 * samples.css — the public Samples page (ON RECORD world, on top of onrecord.css).
 * Compositions: the intro + count plate, the sticky BRAND BAR, one REEL SECTION
 * per brand (slate header + contact sheet: a grid on desktop, a swipeable strip
 * on phones), and the REEL PLAYER (a full-screen <dialog>: one vertical,
 * snap-scrolling track, a progress bar, a "now showing" brand card).
 * Motion is camera grammar: corners pull focus, REC blinks, slates stamp, rules
 * wipe. Every animation stands down under prefers-reduced-motion. The player's
 * transport never mirrors (design.md §10: media controls are a fixed
 * convention); its text does.
 */

/* ── intro ──────────────────────────────────────────────────────────────── */

.samples-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
}
.samples-intro__text {
  flex: 1 1 420px;
}
.deck-body {
  max-inline-size: 62ch;
  margin-block-start: 18px;
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: var(--text-body-lat-leading);
}
:lang(ar) .deck-body {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-body-ar-size);
  line-height: var(--text-body-ar-leading);
}
.deck__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 30px;
}
.samples-count {
  display: flex;
  margin: 0;
  border: var(--seam-size) solid var(--color-rule);
  background: var(--color-bg-deep);
}
.samples-count__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 22px;
}
.samples-count__cell + .samples-count__cell {
  border-inline-start: var(--seam-size) solid var(--color-rule);
}
.samples-count__n {
  margin: 0;
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-callsheet-lat);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.samples-count__label {
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
:lang(ar) .samples-count__label {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  text-transform: none;
}

/* ── the brand bar ──────────────────────────────────────────────────────── */

.brand-bar {
  position: sticky;
  z-index: calc(var(--z-nav) - 1);
  /* sits right under the sticky nav (chrome.css --ch-bar-h: 56px on phones,
     64px from 600px), whose height scales with --ui-zoom */
  inset-block-start: calc(var(--ch-bar-h) * var(--ui-zoom));
  /* the page's own background, near-opaque (follows light/dark like the nav) */
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  border-block: var(--seam-size) solid var(--color-seam);
}
.brand-bar__track {
  display: flex;
  gap: 8px;
  /* the decks' column (onrecord.css .deck__inner) */
  max-inline-size: calc(var(--ch-max) + 2 * var(--ch-g));
  margin-inline: auto;
  padding: 10px var(--ch-g);
  overflow-x: auto;
  scrollbar-width: none;
  zoom: var(--ui-zoom);
}
.brand-bar__track::-webkit-scrollbar {
  display: none;
}
.brand-chip {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-block-size: var(--target-min);
  padding: 0 14px;
  border: var(--seam-size) solid var(--color-line);
  color: var(--color-ink-soft);
  text-decoration: none;
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--dur-hover) var(--ease-micro),
    border-color var(--dur-hover) var(--ease-micro);
}
:lang(ar) .brand-chip {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
/* the fill sweeps in from the reading edge when the chip goes live */
.brand-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-wipe) var(--ease-morph);
}
:dir(rtl) .brand-chip::before {
  transform-origin: right;
}
.brand-chip__n {
  color: var(--color-ink-faint);
  font-family: var(--font-stack-mono);
}
.brand-chip:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
}
.brand-chip.is-active {
  color: var(--color-chip-text);
  border-color: var(--color-accent);
}
.brand-chip.is-active::before {
  transform: scaleX(1);
}
.brand-chip.is-active .brand-chip__n {
  color: var(--color-chip-text);
}
.brand-chip:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* ── a brand's reel section ─────────────────────────────────────────────── */

.brand-reel {
  /* anchor jumps land below the nav + brand bar */
  scroll-margin-block-start: calc(170px * var(--ui-zoom));
}
.brand-reel__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  margin-block-end: clamp(22px, 3vw, 36px);
  padding-block-end: 16px;
}
.brand-reel__index {
  padding: var(--hud-plate-pad);
  background: var(--color-accent);
  color: var(--color-chip-text);
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: center;
}
:lang(ar) .brand-reel__index {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.brand-reel__name {
  margin: 0;
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-h2-lat);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
:lang(ar) .brand-reel__name {
  font-family: var(--font-stack-display-ar);
  font-weight: 700;
  font-size: var(--text-h2-ar);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}
.brand-reel__count {
  margin-inline-start: auto;
  font-family: var(--font-stack-mono);
  font-size: var(--text-label-lat);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
:lang(ar) .brand-reel__count {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
/* the slate's base rule: a yellow head on a grey line. On phones the brand's
   takes are one horizontal strip, and the head becomes that strip's scroll
   meter: it grows as you swipe forward and shrinks as you swipe back
   (--sheet-progress, written by initSamples from the strip's scroll position:
   the share of the strip seen so far, from the first screenful to 1). */
.brand-reel__rule {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2px;
  overflow: hidden;
  background: var(--color-rule);
}
.brand-reel__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 72px;
  background: var(--color-accent);
}
@media (max-width: 767px) {
  .brand-reel__rule {
    block-size: 3px;
  }
  .brand-reel__fill {
    inline-size: 100%;
    transform: scaleX(var(--sheet-progress, 0.2));
    transform-origin: left center;
    transition: transform 90ms linear;
  }
  :dir(rtl) .brand-reel__fill {
    transform-origin: right center;
  }
}

/* ── the contact sheet ──────────────────────────────────────────────────── */

/* reveal stagger across each row of six (the CSP forbids inline style
   attributes, so the delay index lives here, not on the element) */
.take:nth-child(6n + 2) {
  --i: 1;
}
.take:nth-child(6n + 3) {
  --i: 2;
}
.take:nth-child(6n + 4) {
  --i: 3;
}
.take:nth-child(6n + 5) {
  --i: 4;
}
.take:nth-child(6n + 6) {
  --i: 5;
}

.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(44%, 210px), 1fr));
  gap: clamp(14px, 2vw, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* phones: each brand is one swipeable strip, so a 17-take brand is one row,
   not a page of scrolling */
@media (max-width: 767px) {
  .sheet {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--ch-g) * -1);
    padding-inline: var(--ch-g);
    padding-block-end: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ch-g);
    scrollbar-width: none;
  }
  .sheet::-webkit-scrollbar {
    display: none;
  }
  .take {
    flex: 0 0 58%;
    scroll-snap-align: start;
  }
}
.take__btn {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.take__frame {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--color-bg-deep);
  border: var(--seam-size) solid var(--color-rule);
  transition:
    border-color var(--dur-hover) var(--ease-micro),
    transform var(--dur-lift) var(--ease-micro),
    box-shadow var(--dur-lift) var(--ease-micro);
}
.take__poster,
.take__preview {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-enter);
}
.take__preview {
  opacity: 0;
  transition:
    opacity var(--dur-hover) var(--ease-micro),
    transform 900ms var(--ease-enter);
}
.take__preview.is-playing {
  opacity: 1;
}
/* bottom + top scrims keep the slate and time legible on any frame */
.take__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(11 13 15 / 0.72),
    transparent 32%,
    transparent 70%,
    rgb(11 13 15 / 0.5)
  );
  pointer-events: none;
}
/* viewfinder corners — physical, never mirrored (camera furniture, §10); they
   pull inward like a focus lock on hover/focus */
.take__corner {
  position: absolute;
  z-index: 1;
  inline-size: 18px;
  block-size: 18px;
  border: 0 solid var(--color-ink);
  opacity: 0.85;
  pointer-events: none;
  transition:
    translate var(--dur-corner) var(--ease-enter),
    border-color var(--dur-corner) var(--ease-micro);
}
.take__corner--ss {
  top: 10px;
  left: 10px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.take__corner--se {
  top: 10px;
  right: 10px;
  border-top-width: 2px;
  border-right-width: 2px;
}
.take__corner--es {
  bottom: 10px;
  left: 10px;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.take__corner--ee {
  bottom: 10px;
  right: 10px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.take__slate,
.take__time,
.take__rec {
  position: absolute;
  z-index: 2;
  padding: var(--hud-plate-pad);
  background: var(--scrim-hud);
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}
:lang(ar) .take__slate {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.take__slate {
  top: 16px;
  inset-inline-start: 16px;
}
.take__time {
  bottom: 16px;
  inset-inline-end: 16px;
}
/* REC plate — hidden until the take is live (hover / focus / previewing) */
.take__rec {
  top: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-micro);
}
.take__rec-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--color-accent-2);
}
.take__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-chip-text);
  opacity: 0;
  scale: 0.8;
  transition:
    opacity var(--dur-hover) var(--ease-micro),
    scale var(--dur-hover) var(--ease-micro);
}
.take__play svg {
  inline-size: 22px;
  block-size: 22px;
  margin-inline-start: 3px;
}
.take__title {
  font-size: var(--text-body-lat-size);
  line-height: 1.4;
  color: var(--color-ink-soft);
}
:lang(ar) .take__title {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
  line-height: 1.6;
}
/* ── the take goes live ── */
.take__btn:hover .take__frame,
.take__btn:focus-visible .take__frame {
  border-color: var(--color-accent);
  transform: translateY(var(--hover-lift));
  box-shadow: 0 18px 40px -18px rgb(255 200 25 / 0.35);
}
.take__btn:hover .take__poster,
.take__btn:hover .take__preview {
  transform: scale(var(--hover-media-scale));
}
.take__btn:hover .take__corner,
.take__btn:focus-visible .take__corner {
  border-color: var(--color-accent);
}
.take__btn:hover .take__corner--ss,
.take__btn:focus-visible .take__corner--ss {
  translate: 6px 6px;
}
.take__btn:hover .take__corner--se,
.take__btn:focus-visible .take__corner--se {
  translate: -6px 6px;
}
.take__btn:hover .take__corner--es,
.take__btn:focus-visible .take__corner--es {
  translate: 6px -6px;
}
.take__btn:hover .take__corner--ee,
.take__btn:focus-visible .take__corner--ee {
  translate: -6px -6px;
}
.take__btn:hover .take__rec,
.take__btn:focus-visible .take__rec {
  opacity: 1;
}
.take__btn:hover .take__rec-dot {
  animation: rec-blink var(--blink-rec) steps(1) infinite;
}
.take__btn:hover .take__play,
.take__btn:focus-visible .take__play {
  opacity: 1;
  scale: 1;
}
.take__btn:focus-visible {
  outline: none;
}
.take__btn:focus-visible .take__frame {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
/* touch screens: no hover, so the play mark is always there (smaller) */
@media (hover: none) {
  .take__play {
    inline-size: 44px;
    block-size: 44px;
    opacity: 0.92;
    scale: 1;
  }
  .take__play svg {
    inline-size: 18px;
    block-size: 18px;
  }
}

/* ── empty state ────────────────────────────────────────────────────────── */

.samples-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-inline-size: 640px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--color-surface-alt);
  border: var(--seam-size) dashed var(--color-marker);
}
.samples-empty__label {
  font-family: var(--font-stack-mono);
  font-size: var(--text-label-lat);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
:lang(ar) .samples-empty__label {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.samples-empty .deck-body {
  margin-block-start: 0;
}

/* ── the reel player ────────────────────────────────────────────────────── */

html.reel-open {
  overflow: hidden;
  /* the reserved scrollbar gutter (scrollbar-gutter: stable) sits outside the
     dialog; paint it the player's colour so no light strip shows at the edge.
     <html> is outside the reel's dark island, so name the dark value itself. */
  background: var(--graphite-950);
}
/* A modal <dialog> fills the viewport exactly: inset 0 with auto size (100vw
   would include the scrollbar gutter and push the controls off the edge), and
   overflow hidden so the UA's `dialog:modal { overflow: auto }` never adds a
   second scrollbar beside the track's own. */
.reel {
  position: fixed;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--color-bg-deep);
  color: var(--color-ink);
}
.reel::backdrop {
  background: var(--color-bg-deep);
}
.reel[open] {
  animation: reel-in var(--dur-plate) var(--ease-enter);
}
@keyframes reel-in {
  from {
    opacity: 0;
    clip-path: inset(8% 0 8% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
.reel__track {
  block-size: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  /* vertical drags scroll the track; horizontal ones reach the swipe handler */
  touch-action: pan-y;
}
.reel__track::-webkit-scrollbar {
  display: none;
}
/* Slides are exactly the track's height (not 100dvh), so every snap point and
   every "which slide is in view" reading lines up with what is on screen. */
.reel__slide {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.reel__video {
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: calc(100dvh * 9 / 16);
  object-fit: contain;
  background: var(--color-bg-deep);
}
/* Tall phone screens: the take fills the screen edge to edge, like every feed
   app, instead of floating between two empty bands. */
@media (max-aspect-ratio: 9/16) {
  .reel__video {
    max-inline-size: none;
    object-fit: cover;
  }
}
/* A sideways swipe slides the next take in from the side it was swiped from. */
.reel__slide.is-enter-next {
  animation: reel-enter-next var(--dur-plate) var(--ease-enter);
}
.reel__slide.is-enter-prev {
  animation: reel-enter-prev var(--dur-plate) var(--ease-enter);
}
@keyframes reel-enter-next {
  from {
    translate: 40% 0;
    opacity: 0.3;
  }
}
@keyframes reel-enter-prev {
  from {
    translate: -40% 0;
    opacity: 0.3;
  }
}
:dir(rtl) .reel__slide.is-enter-next {
  animation-name: reel-enter-prev;
}
:dir(rtl) .reel__slide.is-enter-prev {
  animation-name: reel-enter-next;
}
/* playback progress — the hazard line across the top */
.reel__progress {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  top: 0;
  block-size: 3px;
  background: rgb(242 243 239 / 0.12);
  pointer-events: none;
}
.reel__progress-bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
}
:dir(rtl) .reel__progress-bar {
  transform-origin: right;
}
.reel__info {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-inline-size: min(100%, calc(100dvh * 9 / 16));
  margin-inline: auto;
  /* the transport column is PHYSICALLY on the right in both languages, so the
     clearance for it is physical too — and it shrinks by the empty band beside
     a centred video (landscape, desktop), down to the plain 20px edge */
  padding-block: 72px 26px;
  padding-left: 20px;
  padding-right: max(20px, calc(76px - max(0px, (100% - 100dvh * 9 / 16) / 2)));
  background: linear-gradient(to top, rgb(11 13 15 / 0.82), transparent);
  pointer-events: none;
  /* Only the take that is playing shows its brand: neighbours stay blank, and
     every label hides while the track is moving, so a brand's name never
     sits over another brand's video. */
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-micro);
}
.reel__slide.is-current .reel__info {
  opacity: 1;
}
/* a paused take says so: a play mark in the middle (tap again to resume) */
.reel__paused {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  translate: -50% -50%;
  border: var(--seam-size) solid var(--color-line);
  background: var(--scrim-hud);
  color: var(--color-ink);
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  transition:
    opacity var(--dur-hover) var(--ease-micro),
    scale var(--dur-hover) var(--ease-micro);
  zoom: var(--ui-zoom);
}
.reel__paused svg {
  inline-size: 32px;
  block-size: 32px;
}
.reel__slide.is-current.is-paused .reel__paused {
  opacity: 1;
  scale: 1;
}
.reel.is-moving .reel__info {
  opacity: 0;
  transition-duration: 0s;
}
.reel__slate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
:lang(ar) .reel__slate {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.reel__rec {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--color-accent-2);
  animation: rec-blink var(--blink-rec) steps(1) infinite;
}
.reel__brand {
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-h3-lat);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
:lang(ar) .reel__brand {
  font-family: var(--font-stack-display-ar);
  font-weight: 700;
  font-size: var(--text-h3-ar);
  text-transform: none;
  letter-spacing: 0;
}
.reel__title {
  color: var(--color-ink-soft);
  font-size: var(--text-body-lat-size);
  line-height: 1.45;
}
:lang(ar) .reel__title {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-value-ar);
  line-height: 1.6;
}
/* "now showing" — the brand card that flashes when the reel crosses brands */
.reel__card {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 34px;
  translate: -50% -50%;
  background: var(--color-accent);
  color: var(--color-chip-text);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}
.reel__card.is-showing {
  animation: brand-card 1400ms var(--ease-enter) forwards;
}
@keyframes brand-card {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  22% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  75% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 100%);
  }
}
.reel__card-index {
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
:lang(ar) .reel__card-index {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
}
.reel__card-name {
  font-family: var(--font-stack-display-lat);
  font-weight: 500;
  font-size: var(--text-h2-lat);
  line-height: 1;
  text-transform: uppercase;
}
:lang(ar) .reel__card-name {
  font-family: var(--font-stack-display-ar);
  font-weight: 700;
  font-size: var(--text-h2-ar);
  line-height: 1.3;
  text-transform: none;
}
/* transport: a fixed column on the physical right, identical in both languages */
.reel__bar {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.reel__btn {
  display: grid;
  place-items: center;
  inline-size: var(--chip-height-secondary);
  block-size: var(--chip-height-secondary);
  border: var(--seam-size) solid var(--color-line);
  background: var(--scrim-hud);
  color: var(--color-ink);
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color var(--dur-hover) var(--ease-micro),
    color var(--dur-hover) var(--ease-micro);
}
.reel__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.reel__btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.reel__btn svg {
  inline-size: 22px;
  block-size: 22px;
}
.reel__btn[data-reel-prev] {
  margin-block-start: auto;
}
/* aria-pressed="true" = sound is on: show the speaker, hide the muted mark */
.reel__btn[aria-pressed="true"] .reel__icon-off,
.reel__btn[aria-pressed="false"] .reel__icon-on {
  display: none;
}
.reel__hint {
  position: absolute;
  z-index: 3;
  top: 22px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  translate: -50% 0;
  padding: var(--hud-plate-pad);
  background: var(--scrim-hud);
  font-family: var(--font-stack-mono);
  font-size: var(--text-key-lat);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  pointer-events: none;
  transition: opacity var(--dur-plate) var(--ease-micro);
}
.reel__hint svg {
  inline-size: 16px;
  block-size: 16px;
  animation: hint-nudge 1.1s var(--ease-micro) infinite;
}
@keyframes hint-nudge {
  0%,
  100% {
    translate: 0 -2px;
  }
  50% {
    translate: 0 3px;
  }
}
:lang(ar) .reel__hint {
  font-family: var(--font-stack-text-ar);
  font-size: var(--text-label-ar);
  letter-spacing: 0;
  text-transform: none;
}
.reel__hint.is-gone {
  opacity: 0;
}

/* large screens: the player's chrome scales with the rest of the content (§25 of
   onrecord.css); the info block is NOT zoomed — its width is in dvh. */
.reel__bar,
.reel__hint,
.reel__card,
.reel__info > * {
  zoom: var(--ui-zoom);
}

@media (prefers-reduced-motion: reduce) {
  .reel[open],
  .reel__slide.is-enter-next,
  .reel__slide.is-enter-prev,
  .reel__card.is-showing,
  .reel__hint svg,
  .reel__rec,
  .take__btn:hover .take__rec-dot {
    animation: none;
  }
  .reel__card.is-showing {
    opacity: 1;
    clip-path: none;
  }
  .reel__paused,
  .take__frame,
  .take__poster,
  .take__preview,
  .take__play,
  .take__corner,
  .brand-chip::before {
    transition: none;
  }
}