:root {
  --search-w: 260px;
  --hero-min: 620px;
  --hero-min-sm: 460px;
  --hero-pad-top: clamp(var(--sp-40), 8vw, 96px);
  --hero-pad-bottom: 48px;
  --hero-inset: clamp(var(--sp-20), 3.5vw, 50px);
  --hero-gap: clamp(var(--sp-20), 4vw, 56px);
  --hero-title: clamp(44px, 8vw, 104px);
  --hero-poster-w: 250px;
  --hero-blur: 36px;
  --hero-bleed: -40px;
  --hero-shadow: 0 30px 80px var(--shadow);
  --rows-min: 100vh;
  --dot-w: 44px; --dot-h: 24px;
  --card-w: clamp(132px, 15.5vw, 200px);
  --card-shadow: 0 18px 40px var(--shadow);
  --edge-icon: 40px;
  --skeleton-title-w: 220px;
  --skeleton-beat: 1.4s;
}

.search { flex: 0 1 var(--search-w); }

.hero {
  /* An inset rounded panel rather than a full-bleed band: the page margin frames it. */
  position: relative; isolation: isolate; overflow: hidden;
  margin: var(--sp-12) var(--gutter) 0; border-radius: var(--radius-hero);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--hero-gap); align-items: center;
  padding: var(--hero-pad-top) var(--hero-inset) var(--hero-pad-bottom);
  min-height: min(78vh, var(--hero-min));
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg {
  position: absolute; inset: var(--hero-bleed);
  background-size: cover; background-position: center 20%;
  filter: blur(var(--hero-blur)) saturate(1.3); opacity: .55;
}
/* A 16:9 frame scaled to cover the hero, whatever the hero's own shape is. */
.trailer-frame {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: max(100%, 177.78vh); height: max(100%, 56.25vw); aspect-ratio: 16 / 9;
  border: 0; pointer-events: none; opacity: 0; transition: opacity .8s;
  /* Most trailers are wider than 16:9 and arrive with black bars; zoom past them. */
  scale: 1.35;
}
.playing > .trailer-frame { opacity: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--bg) 4%, var(--bg-fade) 45%, transparent 75%),
    linear-gradient(0deg, var(--bg-fade) 0%, transparent 35%);
}
.hero h1 {
  font: var(--hero-title)/.9 var(--display); letter-spacing: .01em;
  text-wrap: balance; margin: var(--sp-12) 0;
}
.hero .meta { color: var(--text-soft); font-weight: 700; }
.hero .synopsis {
  max-width: 52ch; margin: var(--sp-14) 0 var(--sp-24); color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.actions { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.hero > .poster {
  width: min(100%, var(--hero-poster-w)); justify-self: center;
  box-shadow: var(--hero-shadow); rotate: 2deg; transition: opacity .6s;
}
/* Once the trailer plays it is the artwork; the still poster steps aside. */
.hero:has(.playing) > .poster { opacity: 0; }
.hero-dots { display: flex; gap: var(--sp-8); margin-top: var(--sp-28); }
.hero-dots button { width: var(--dot-w); height: var(--dot-h); border: 0; background: transparent; padding: var(--sp-10) 0; }
.hero-dots button::before { content: ""; display: block; height: var(--sp-4); border-radius: var(--sp-2); background: var(--dot); }
.hero-dots button[aria-current="true"]::before { background: var(--gold); }

/* Rows arrive after the catalog loads: reserve the space so nothing below jumps. */
.rows { margin-top: var(--sp-28); padding-bottom: var(--sp-64); min-height: var(--rows-min); }
.row { position: relative; }
.row h2 { font: 700 var(--fs-24)/1.3 var(--body); padding: 0 var(--gutter); }

.track {
  display: grid; grid-auto-flow: column; gap: var(--sp-8);
  grid-auto-columns: var(--card-w);
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: var(--sp-12) var(--gutter) var(--sp-28); scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }

/* Paging arrows sit on the row's edges and only show while the row is in use. */
.edge {
  position: absolute; top: var(--sp-40); bottom: var(--sp-28); width: var(--gutter); z-index: 3;
  border: 0; color: var(--text); font-size: var(--edge-icon); line-height: 1;
  background: var(--bg-fade); opacity: 0; transition: opacity .2s;
}
.edge.prev { left: 0; }
.edge.next { right: 0; }
.row:hover .edge, .edge:focus-visible { opacity: 1; }
/* Nothing further in that direction: the arrow goes away instead of sitting there inert. */
.edge:disabled { visibility: hidden; }

/* Placeholder rows shown until the catalog arrives, in the exact shape of the real ones. */
.skeleton h2 { width: var(--skeleton-title-w); border-radius: var(--radius-sm); background: var(--surface-2); color: transparent; }
.skeleton .poster { border-radius: var(--radius-card); animation: pulse var(--skeleton-beat) ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .45; } to { opacity: 1; } }
@media (hover: none) { .edge { display: none; } }

.card {
  position: relative; scroll-snap-align: start;
  border: 0; padding: 0; background: none; text-align: left;
  border-radius: var(--radius);
  transition: transform .25s ease-out;
}
.card .info {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-40) var(--sp-10) var(--sp-10);
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(0deg, var(--caption) 55%, transparent);
  opacity: 0; transition: opacity .2s;
}
.card .info strong { display: block; font-size: var(--fs-15); line-height: 1.2; }
.card .info span { color: var(--text-soft); font-size: var(--fs-13); }
.card .poster { border-radius: var(--radius-card); }
/* With a pointer, resting on a card opens the preview panel (preview.js), so the card itself
   only lifts slightly. Keyboard focus still shows the caption. */
.card:hover, .card:focus-visible { transform: scale(1.04); z-index: 2; }
.card:focus-visible .info { opacity: 1; }
.card:hover .poster, .card:focus-visible .poster { box-shadow: var(--card-shadow); }
/* Touch screens have no hover: keep the caption visible. */
@media (hover: none) { .card .info { opacity: 1; } }

@media (max-width: 720px) { /* ds-allow-hardcode: media queries cannot read custom properties */
  .hero { grid-template-columns: 1fr; min-height: var(--hero-min-sm); }
  .hero > .poster { display: none; }
  .search { flex-basis: 100%; order: 5; }
}