/* ============= NOW STREAMING — poster rows in motion ============= */
/*
   Design grammar:
   • Hero: a tilted river of 2:3 poster rows gliding at different speeds in
     alternating directions — seamless marquee (track = two identical reels,
     translateX 0 → -50%). Dimmed under a --bg scrim; name floats enormous.
   • Bands below: Featured shelf, numbers-as-a-sentence, Now playing,
     distribution prose, flex zone, contact.
   All selectors scoped to .pg-streaming. Tokens only.
*/

.pg-streaming {
  background: var(--bg);
  color: var(--ink);
  overflow: hidden; /* belt & braces: the tilted river never leaks sideways */
}

/* ── shared band geometry ─────────────────────────────────────────────── */

.pg-streaming .ns-band {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(2.4rem, 6cqw, 4.6rem) clamp(1.4rem, 5cqw, 4rem);
  box-sizing: border-box;
}

.pg-streaming .ns-kicker {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}

/* ── HERO — the river ─────────────────────────────────────────────────── */

.pg-streaming .ns-hero {
  position: relative;
  min-height: clamp(560px, 96cqh, 1200px);
  overflow: hidden;
  display: flex;
  background: var(--bg);
}

/* Tilted rows fill past the hero edges so the rotation never shows a corner */
.pg-streaming .ns-rows {
  position: absolute;
  inset: -14cqh -6cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.4cqw, 20px);
  transform: rotate(-3deg);
}

.pg-streaming .ns-row { flex: none; }

/* The marquee: two identical reels; 0 → -50% is exactly one reel width */
.pg-streaming .ns-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ns-glide var(--ns-dur, 180s) linear infinite;
  animation-delay: var(--ns-delay, 0s);
}

/* Alternate direction row by row — same keyframes, played backwards */
.pg-streaming .ns-row:nth-child(even) .ns-track { animation-direction: reverse; }

@keyframes ns-glide { to { transform: translateX(-50%); } }

.pg-streaming .ns-reel {
  display: flex;
  gap: clamp(10px, 1.4cqw, 20px);
  padding-right: clamp(10px, 1.4cqw, 20px); /* = gap, so the wrap seam is invisible */
}

/* Fixed 2:3 slots — nothing jumps while posters load */
.pg-streaming .ns-poster {
  flex: none;
  width: clamp(96px, 10.5cqw, 156px);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: color-mix(in srgb, var(--ink) 8%, var(--bg));
}

/* Scrim: dims the current; heavier at the foot where the name lives */
.pg-streaming .ns-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--bg) 26%, transparent) 38%,
      color-mix(in srgb, var(--bg) 55%, transparent) 72%,
      color-mix(in srgb, var(--bg) 94%, transparent) 100%
    ),
    color-mix(in srgb, var(--bg) 34%, transparent);
}

/* Film grain over the river only */
.pg-streaming .ns-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pg-streaming .ns-hero--flat::after { display: none; }

/* Foreground */
.pg-streaming .ns-hero-front {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 4.5cqw, 3.2rem) clamp(1.4rem, 5cqw, 4rem);
  box-sizing: border-box;
}

.pg-streaming .ns-logo {
  max-height: 44px;
  max-width: 170px;
  object-fit: contain;
}

/* Channel-bug initials chip */
.pg-streaming .ns-mark {
  display: inline-block;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  padding: 8px 10px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent);
  color: var(--ink);
}

.pg-streaming .ns-badge {
  display: flex;
  align-items: center;
  gap: .6em;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.pg-streaming .ns-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.pg-streaming .ns-name {
  font: 400 clamp(2.9rem, 10.5cqw, 8.2rem)/.94 var(--font-black);
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 14ch;
  margin: 0;
}

.pg-streaming .ns-tag {
  font: 500 clamp(10px, 1.3cqw, 13px)/1.6 var(--font-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 76%, var(--bg));
  margin: 1.1rem 0 0;
}

/* Thin-data hero: typographic cut, ghost initials, accent glow */
.pg-streaming .ns-hero--flat {
  min-height: clamp(480px, 78cqh, 900px);
  background:
    radial-gradient(120% 90% at 82% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, var(--bg)), var(--bg) 70%);
}

.pg-streaming .ns-ghost {
  position: absolute;
  right: -.06em;
  bottom: -.18em;
  z-index: 0;
  font: 400 clamp(14rem, 42cqw, 34rem)/1 var(--font-black);
  letter-spacing: -.06em;
  color: color-mix(in srgb, var(--ink) 6%, transparent);
  pointer-events: none;
  user-select: none;
}

/* ── THE NUMBERS — one confident sentence ─────────────────────────────── */

.pg-streaming .ns-numbers { border-bottom: 1px solid var(--line); }

.pg-streaming .ns-numbers-line {
  font: 400 clamp(1.5rem, 3.8cqw, 2.8rem)/1.3 var(--font-serif);
  letter-spacing: .002em;
  color: color-mix(in srgb, var(--ink) 82%, var(--bg));
  max-width: 30ch;
  text-wrap: balance;
  margin: 0;
}

.pg-streaming .ns-stat { white-space: nowrap; }
.pg-streaming .ns-stat-v { font-weight: 400; color: var(--accent); }
.pg-streaming .ns-stat-l { text-transform: lowercase; }

/* ── FEATURED — the shelf ─────────────────────────────────────────────── */

.pg-streaming .ns-band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.pg-streaming .ns-band-meta {
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0 0 1.4rem;
}

.pg-streaming .ns-shelf {
  display: flex;
  gap: clamp(12px, 1.8cqw, 24px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .9rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ink) 30%, var(--bg)) transparent;
}

.pg-streaming .ns-card {
  flex: 0 0 clamp(150px, 16.5cqw, 226px);
  scroll-snap-align: start;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.pg-streaming .ns-card:hover { transform: translateY(-5px); }

.pg-streaming .ns-card-art {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, var(--bg));
  display: grid;
  place-items: center;
}

.pg-streaming .ns-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.pg-streaming .ns-card:hover .ns-card-art img { transform: scale(1.045); }

/* No poster? A typographic title card — mono number on a graded ground */
.pg-streaming .ns-card-ghost {
  font: 400 clamp(2.6rem, 5cqw, 4rem)/1 var(--font-mono);
  color: color-mix(in srgb, var(--ink) 22%, var(--bg));
  border-top: 2px solid var(--accent);
  padding-top: .35em;
}

.pg-streaming .ns-card-cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  padding-top: .75rem;
}

.pg-streaming .ns-card-n {
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--accent);
}

.pg-streaming .ns-card-t {
  font: 600 .92rem/1.35 var(--font-sans);
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pg-streaming .ns-shelf-more {
  font: 400 italic clamp(1rem, 2.2cqw, 1.2rem)/1.5 var(--font-serif);
  color: var(--muted);
  margin: 1rem 0 0;
}

/* ── TRAILER ──────────────────────────────────────────────────────────── */

.pg-streaming .ns-trailer { padding-top: 0; }

/* ── NOW PLAYING — full-width surface band ────────────────────────────── */

.pg-streaming .ns-playing {
  background: color-mix(in srgb, var(--ink) 4%, var(--bg));
  border-block: 1px solid var(--line);
}

.pg-streaming .ns-tracks { border-top: 0; }

.pg-streaming .ns-tracks .track-row strong {
  font-family: var(--font-sans);
}

@container page (min-width: 980px) {
  .pg-streaming .ns-tracks {
    columns: 2;
    column-gap: clamp(2.4rem, 5cqw, 4.5rem);
  }
  .pg-streaming .ns-tracks .track-row { break-inside: avoid; }
}

/* ── SYNOPSIS + DISTRIBUTION ──────────────────────────────────────────── */

.pg-streaming .ns-dossier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5cqw, 4.5rem);
}

.pg-streaming .ns-bio {
  font: 400 .98rem/1.75 var(--font-body);
  color: color-mix(in srgb, var(--ink) 84%, var(--bg));
  max-width: 52ch;
  margin: 0;
}

.pg-streaming .ns-dist-line {
  font: 400 clamp(1.3rem, 3cqw, 2.1rem)/1.42 var(--font-serif);
  color: var(--muted);
  text-wrap: pretty;
  margin: 0;
}

.pg-streaming .ns-place,
.pg-streaming .ns-pub { color: var(--ink); }

.pg-streaming .ns-count {
  color: var(--accent);
  font-style: italic;
}

/* ── flex zone (user sections) ────────────────────────────────────────── */

.pg-streaming .ns-xsec {
  max-width: 1240px;
  margin-inline: auto;
  padding: 0 clamp(1.4rem, 5cqw, 4rem) clamp(1.6rem, 4cqw, 3rem);
  box-sizing: border-box;
}

/* ── FOOTER ───────────────────────────────────────────────────────────── */

.pg-streaming .ns-footer {
  border-top: 1px solid var(--line);
  padding-bottom: 2.2rem;
}

.pg-streaming .ns-foot-title {
  font: 400 clamp(2rem, 6cqw, 4.2rem)/1.02 var(--font-serif);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 1.4rem;
  text-wrap: balance;
}

.pg-streaming .ns-mail {
  display: inline-block;
  font: 500 clamp(1rem, 2.6cqw, 1.35rem)/1 var(--font-sans);
  color: var(--ink);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  padding-bottom: 4px;
  margin-bottom: 1.2rem;
  transition: color .18s ease;
}

.pg-streaming .ns-mail:hover { color: var(--accent); }

.pg-streaming .ns-soc {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  margin-bottom: 2.4rem;
}

.pg-streaming .colophon {
  font: 400 9px/1 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.6rem 0 0;
}

/* ── selection tint ───────────────────────────────────────────────────── */

.pg-streaming ::selection { background: var(--accent); color: var(--bg); }

/* ── motion discipline ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .pg-streaming .ns-badge-dot { animation: ns-pulse 2.6s ease-in-out infinite; }
}
@keyframes ns-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-streaming .ns-track { animation: none; }
  .pg-streaming .ns-card,
  .pg-streaming .ns-card-art img { transition: none; }
}

/* ── narrow container: 3 rows × 12 posters, stacked bands ─────────────── */

@container page (max-width: 620px) {
  /* all 4 rows stay; 12 posters per reel → 48 in the phone wall */
  .pg-streaming .ns-reel .ns-poster:nth-child(n + 13) { display: none; }

  .pg-streaming .ns-hero { min-height: clamp(520px, 92cqh, 760px); }
  .pg-streaming .ns-poster { width: clamp(92px, 27cqw, 122px); }

  .pg-streaming .ns-name { font-size: clamp(2.3rem, 12.5cqw, 3.4rem); }
  .pg-streaming .ns-tag { letter-spacing: .18em; }

  .pg-streaming .ns-dossier { grid-template-columns: 1fr; }
  .pg-streaming .ns-card { flex-basis: clamp(132px, 40cqw, 170px); }
  .pg-streaming .ns-numbers-line { max-width: none; }
}

/* TOO FEW FOR A RIVER. Under eight pictures there is nothing to glide, so the
   ones that exist hold the hero as a still — better than initials on a slab. */
.pg-streaming .ns-still {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  gap: 2px;
  overflow: hidden;
}
.pg-streaming .ns-still img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}