/* The hero reel: three hundred titles down to one, then the film.

   No pointer. An earlier reel simulated a mouse — a fake cursor gliding on CSS
   transitions, orchestrated by timers — and it produced five separate bugs,
   every one of them a pointer that jumped. It was also the wrong metaphor: the
   product is two keys, not a mouse.

   The stage never changes size, and every state of the reel is COMPLETE: a set
   of flags on the stage (data-flags), each of which switches one thing on. A
   change on screen is only ever a transition from one finished state to the
   next, so there is never anything mid-flight to be stranded. The flags, in
   the order the reel turns them on:

     scrolled  the page has scrolled from the billboard to the rows
     rated     every card wears its IMDb rating
     panel     the filter panel is open
     fading    everything under the bar has faded back
     keys      Shift+P is being pressed
     picked    the picker is up
     go        Watch is being pressed
     playing   the film is on; then skip, skipped, controls, fast, toast, big

   The extension's own panels (ext/*.css) dress themselves; this file only
   places them, shows and hides them, and draws the page they sit on. */

.hero-reel { max-width: var(--max, 1180px); margin: clamp(24px, 2.4vw, 32px) auto 0; }

.reel-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #141414;
  box-shadow: 0 70px 120px -60px rgba(11, 12, 15, .55), 0 24px 50px -30px rgba(11, 12, 15, .35), 0 0 0 1px rgba(11, 12, 15, .06);
}

/* Authored at a fixed size and scaled DOWN only. Enlarging a pixel-authored
   interface is what made an older one look soft. The stage's transform is also
   what pins the panels' position:fixed to the stage rather than the window. */
.reel-fit { position: relative; width: 100%; overflow: hidden; }
.reel-stage {
  position: absolute; left: 0; top: 0;
  width: 1180px; height: 640px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #141414;
  color: #e5e5e5;
  /* The hero centres its text; a streaming page does not. */
  text-align: left;
  font-family: var(--nrx-font, Inter, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.reel-stage [hidden] { display: none !important; }
.reel-stage p { margin: 0; }
/* ...except where the extension's own panels set one: without them the
   categories note ran to the panel's edges and the pick's synopsis and the
   filter hint sat hard against the line above (genres.css, pick.css,
   filters.css hold the originals). */
.reel-stage .nrx-genre-note { margin: 6px 14px 10px; }
.reel-stage .nrx-pick-synopsis { margin: 12px 0 0; }
.reel-stage .nrx-filterp-hint { margin: 2px 0 0; }

/* ---- the home page --------------------------------------------------------- */
.reel-app { position: absolute; inset: 0; }
.reel-scroll { transition: transform 1.35s cubic-bezier(.55, 0, .2, 1); }
/* Rows start at 362; this puts the first row's title just under the bar. */
.reel-stage[data-flags~="scrolled"] .reel-scroll { transform: translateY(-294px); }

.reel-nav {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 56px; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  background-color: rgba(20, 20, 20, 0);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  transition: background-color .6s ease;
}
/* Solid as soon as the page moves, or the billboard's title slides up under the
   links and the two read as one smudge. */
.reel-stage[data-flags~="scrolled"] .reel-nav { background-color: #141414; transition-duration: .45s; transition-delay: .12s; }
.reel-nav-links { display: flex; gap: 22px; font-size: 14px; color: #c9c9c9; }
.reel-nav-links .is-here { color: #fff; font-weight: 700; }
.reel-nav-end { display: flex; align-items: center; gap: 20px; color: #fff; }
.reel-avatar { width: 30px; height: 30px; border-radius: 5px; background: linear-gradient(135deg, #4f7cf7, #9b5cf6); }

.reel-billboard { position: relative; height: 420px; overflow: hidden; }
.reel-bb-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
.reel-billboard::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .94) 0, rgba(20, 20, 20, .62) 30%, rgba(20, 20, 20, 0) 58%),
    /* Solid where the first row overlaps it: a faded card is see-through, and
       the billboard showing through it made the fade look like a smear. */
    linear-gradient(0deg, #141414 0, #141414 15%, rgba(20, 20, 20, 0) 52%);
}
.reel-bb-copy { position: absolute; left: 48px; top: 86px; z-index: 1; width: 390px; }
.reel-bb-logo { display: block; width: 150px; height: auto; }
.reel-bb-meta { margin-top: 14px !important; font-size: 13px; font-weight: 600; color: #bdbdbd; }
.reel-bb-line { margin-top: 8px !important; font-size: 15px; line-height: 1.45; color: #ececec; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.reel-bb-buttons { display: flex; gap: 10px; margin-top: 16px; }
.reel-btn {
  display: inline-flex; align-items: center; padding: 9px 22px 9px 18px; border-radius: 4px;
  font-size: 15px; font-weight: 700; white-space: pre;
  background: rgba(109, 109, 110, .72); color: #fff;
}
.reel-btn-play { background: #fff; color: #000; }

.reel-rows { position: relative; z-index: 1; margin-top: -58px; }
.reel-row + .reel-row { margin-top: 24px; }
.reel-row-title { margin: 0 0 10px 40px; font-size: 17px; font-weight: 700; line-height: 20px; letter-spacing: -.005em; color: #e5e5e5; }
.reel-track { display: flex; gap: 10px; padding-left: 40px; }

.reel-card {
  position: relative;
  flex: 0 0 112px;
  aspect-ratio: 5 / 7;
  border-radius: 5px;
  overflow: hidden;
  background: #222;
  /* The product's own dim: .nrx-dimmed in content.css, opacity and saturation
     only, the same values. The delay is per card, lowest rating first. */
  transition: opacity .55s ease var(--fd, 0ms), filter .55s ease var(--fd, 0ms);
}
.reel-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-stage[data-flags~="fading"] .reel-card[data-below] { opacity: .35; filter: saturate(.6); }

/* The badge is the extension's (.nrx-badge, drawn by content.css). Here it only
   arrives: as a wave across the page, not as a switch being thrown. */
.reel-stage .nrx-badge {
  opacity: 0;
  transform: scale(.55);
  transition: opacity .28s ease var(--bd, 0ms), transform .5s cubic-bezier(.3, 1.6, .5, 1) var(--bd, 0ms);
}
.reel-stage[data-flags~="rated"] .nrx-badge { opacity: 1; transform: none; }

/* ---- the real corner ------------------------------------------------------- */
/* Pinned to stage size, so vw, vh and the extension's own narrow-window rules
   never reach it. Under the scrim and the picker, as in the product. */
.reel-stage .nrx-launcher { z-index: 3; max-width: none; transition: opacity .35s, visibility .35s; }
.reel-stage .nrx-launcher-key { display: inline-block; }
.reel-stage .nrx-filterp-root { display: none; }
.reel-stage[data-flags~="panel"] .nrx-filterp-root { display: block; animation: reel-rise .34s cubic-bezier(.2, .8, .2, 1) both; }
.reel-stage .nrx-filterp { left: auto; right: auto; bottom: auto; width: 340px; max-height: 392px; }
.reel-stage[data-flags~="playing"] .nrx-launcher { opacity: 0; visibility: hidden; }
@keyframes reel-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- the keys and the pick -------------------------------------------------- */
.reel-scrim {
  position: absolute; inset: 0; z-index: 4;
  background: rgba(0, 0, 0, .62);
  opacity: 0; transition: opacity .45s ease;
  pointer-events: none;
}
.reel-stage[data-flags~="keys"] .reel-scrim { opacity: .45; }
.reel-stage[data-flags~="picked"] .reel-scrim { opacity: 1; }

.reel-keys {
  position: absolute; left: 50%; top: 46%; z-index: 6;
  display: flex; align-items: center; gap: 12px;
  transform: translate(-50%, -50%) scale(.92);
  opacity: 0;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.reel-stage[data-flags~="keys"] .reel-keys { opacity: 1; transform: translate(-50%, -50%); }
.reel-key {
  display: grid; place-items: center;
  min-width: 76px; height: 76px; padding: 0 18px; box-sizing: border-box;
  border-radius: 16px; border-bottom: 7px solid #b9bcc2;
  background: #f4f4f5; color: #0d0e10;
  font: 700 40px/1 var(--font, Inter, system-ui, sans-serif);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
}
.reel-key-wide { font-size: 22px; }
.reel-plus { color: #f4f4f5; font: 600 26px/1 var(--font, Inter, system-ui, sans-serif); }
.reel-stage[data-flags~="keys"] .reel-key { animation: reel-keydown .9s ease both; }
@keyframes reel-keydown {
  0%, 38% { transform: none; border-bottom-width: 7px; }
  52%, 72% { transform: translateY(5px); border-bottom-width: 2px; }
  100% { transform: none; border-bottom-width: 7px; }
}

/* The pick layer fills the stage so the picker's own position:fixed centring
   (pick.css) centres it on the stage. */
.reel-pick {
  position: absolute; inset: 0; z-index: 5;
  opacity: 0; visibility: hidden;
  transform: scale(.97);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility .45s;
}
.reel-stage[data-flags~="picked"] .reel-pick { opacity: 1; visibility: visible; transform: none; }
.reel-stage .nrx-pick-panel { width: 580px; max-height: calc(100% - 32px); }
.reel-stage[data-flags~="go"] .nrx-pick-go { animation: reel-tap .45s ease both; }
/* A press is a dip and a return. It changes nothing else: the chip's own
   pressed state (aria-pressed, glass.css) is what says it is now on. */
@keyframes reel-tap { 0% { transform: none; } 40% { transform: scale(.9); } 100% { transform: none; } }

/* ---- the film --------------------------------------------------------------- */
.reel-player {
  position: absolute; inset: 0; z-index: 8;
  overflow: hidden;
  background: #000;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.reel-stage[data-flags~="playing"] .reel-player { opacity: 1; visibility: visible; }
/* A slow push-in, so a still reads as a film running. Its resting state is its
   END state: when the film is left the animation is simply removed, and there
   is nothing to snap back. */
.reel-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-stage[data-flags~="playing"] .reel-still { animation: reel-drift 7.5s linear both; }
@keyframes reel-drift { from { transform: scale(1.07); } to { transform: none; } }
.reel-player::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .8));
}
.reel-player > * { z-index: 2; }

.reel-subs {
  position: absolute; left: 50%; bottom: 128px;
  width: max-content; max-width: 76%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  text-align: center;
  font-size: 26px; font-weight: 500; line-height: 1.25; color: #fff;
  text-shadow: 0 0 6px #000, 0 2px 3px #000;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.reel-stage[data-flags~="big"] .reel-subs { transform: translateX(-50%) scale(1.3); }

.reel-skip {
  position: absolute; right: 40px; bottom: 104px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 4px;
  background: rgba(42, 42, 42, .6); color: #fff;
  font-size: 15px; font-weight: 600;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease, background-color .12s, color .12s;
}
.reel-stage[data-flags~="skip"] .reel-skip { opacity: 1; transform: none; transition-delay: .5s; }
/* Sorted presses it, so it goes white for a moment and then it is gone. */
.reel-stage[data-flags~="skipped"] .reel-skip {
  background: #fff; color: #000; transform: scale(.95);
  transition: background-color .1s, color .1s, transform .15s, opacity .3s ease .35s;
}

.reel-player-bottom { position: absolute; left: 40px; right: 40px; bottom: 24px; }
.reel-player-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px !important; }
.reel-player-title b { font-size: 20px; color: #fff; }
.reel-player-title span { font-size: 13px; color: #bdbdbd; }
.reel-progress { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.reel-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 1%; border-radius: 2px; background: #fff; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.reel-progress-dot { position: absolute; top: 50%; left: 1%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transition: left .7s cubic-bezier(.2, .8, .2, 1); }
.reel-stage[data-flags~="skipped"] .reel-progress-fill { width: 8%; }
.reel-stage[data-flags~="skipped"] .reel-progress-dot { left: 8%; }
.reel-times { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: #d0d0d0; font-variant-numeric: tabular-nums; }

/* Sorted's player panel (player.css) and its speed toast. */
.reel-stage .nrx-player { top: 20px; right: 20px; }
.reel-stage .nrx-player-toast { position: absolute; }
.reel-stage[data-flags~="toast"] .nrx-player-toast { opacity: 1; visibility: visible; }
.reel-stage[data-flags~="big"] [aria-label="Larger subtitles"] { animation: reel-tap .4s ease both; }
.reel-stage[data-flags~="fast"] [data-rate="1.5"] { animation: reel-tap .4s ease both; }

/* ---- the narrow stage (reel.js picks it below 700px) ------------------------- */
/* The same page at 600 wide: four and a bit cards a row instead of nine, and
   type that survives being scaled to a phone. */
.reel-stage.is-narrow { width: 600px; height: 700px; }
.reel-stage.is-narrow .reel-nav { padding: 0 28px; }
.reel-stage.is-narrow .reel-nav-links span:nth-child(n+4) { display: none; }
.reel-stage.is-narrow .reel-bb-art { object-position: 72% 22%; }
.reel-stage.is-narrow .reel-bb-copy { left: 28px; width: 300px; }
.reel-stage.is-narrow .reel-bb-line { display: none; }
.reel-stage.is-narrow .reel-billboard::after {
  background:
    linear-gradient(90deg, rgba(20, 20, 20, .9) 0, rgba(20, 20, 20, .5) 45%, rgba(20, 20, 20, 0) 75%),
    linear-gradient(0deg, #141414 0, #141414 15%, rgba(20, 20, 20, 0) 52%);
}
.reel-stage.is-narrow .reel-row-title { margin-left: 28px; font-size: 19px; }
.reel-stage.is-narrow .reel-track { padding-left: 28px; }
.reel-stage.is-narrow .nrx-badge { font-size: 17px; padding: 2px 8px; }
.reel-stage.is-narrow .nrx-pick-panel { width: 568px; }
.reel-stage.is-narrow .reel-subs { font-size: 32px; }
.reel-stage.is-narrow .reel-player-bottom { left: 28px; right: 28px; }
.reel-stage.is-narrow .reel-skip { right: 28px; }
/* filters.css drops this label below 640px of WINDOW; the stage is not the window. */
.reel-stage .nrx-filterp-fade-label { display: inline; }

/* Leaving the film for the top of the page is a cut: nothing on the page
   animates back while the film fades out over it. */
.reel-stage.is-cut .reel-app, .reel-stage.is-cut .reel-app *,
.reel-stage.is-cut .nrx-launcher, .reel-stage.is-cut .nrx-launcher *,
.reel-stage.is-cut .reel-scrim, .reel-stage.is-cut .reel-keys, .reel-stage.is-cut .reel-pick { transition: none !important; }

/* ---- a page with no billboard (the scenes and the playground) --------------- */
.reel-stage.no-billboard .reel-rows { margin-top: 0; padding-top: 68px; }
.reel-stage.no-billboard .reel-nav { background-color: #141414; background-image: none; }

/* ---- a category page as Netflix's grid, with Sorted's sort bar (the "sort"
   scene). The bar is the extension's own (ext/sort.css); only the page is ours. */
.reel-gridpage { padding: 14px 28px 0; }
.reel-grid-title { margin: 0 0 14px; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.reel-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 10px; }
.reel-grid .reel-card { flex: none; }
.reel-stage .nrx-sort-bar { font-size: 13px; }
.reel-stage .nrx-sort-btn { cursor: pointer; }
.reel-stage .nrx-sort-btn[aria-pressed="true"] { cursor: default; }

/* ---- the category browser (genres.css), hung above the launcher -------------- */
.reel-stage .nrx-genre-root { display: none; }
.reel-stage[data-flags~="cats"] .nrx-genre-root { display: block; }
.reel-stage .nrx-genre-backdrop { position: absolute; z-index: 4; animation: reel-fade .3s ease both; }
.reel-stage .nrx-genre-root > .nrx-genre-panel {
  z-index: 5;
  width: 400px;
  bottom: calc(var(--nrx-launcher-h, 150px) + 32px);
  max-height: calc(100% - var(--nrx-launcher-h, 150px) - 52px);
  animation: reel-rise .34s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes reel-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- the product's hover tooltip (content.css), placed on the stage ---------- */
.reel-stage .nrx-tip { position: absolute; z-index: 7; animation: reel-fade .18s ease both; }
.reel-stage .nrx-tip[hidden] { display: none; }

/* ---- the pick's body swapping to a new title (Pick again) --------------------- */
.reel-stage .nrx-pick-body.d-in { animation: reel-swap .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes reel-swap { 0% { opacity: .15; filter: blur(3px); } 100% { opacity: 1; filter: none; } }

/* ---- the playground ------------------------------------------------------------ */
/* Nothing here is on a clock, so nothing waits: a card answers the slider at
   once, as it does on Netflix. */
.reel-stage.is-play .reel-card { transition: opacity .3s ease, filter .3s ease; }
.reel-stage.is-play .nrx-badge { cursor: default; }
/* The product's own override: pointing at a faded card brings it straight back
   (.nrx-dimmed:hover in content.css). */
.reel-stage.is-play[data-flags~="fading"] .reel-card[data-below]:hover { opacity: 1; filter: none; transition-duration: .15s; }
.reel-stage.is-play[data-flags~="picked"] .reel-scrim,
.reel-stage.is-play[data-flags~="cta"] .reel-scrim { pointer-events: auto; cursor: pointer; }
.reel-stage.is-play:not([data-flags~="picked"]):not([data-flags~="cta"]) .reel-pick { pointer-events: none; }
/* "Show it on the page": the card the pick came from, pulsed once. */
.reel-card.is-spot { animation: reel-spot 1.6s ease both; }
@keyframes reel-spot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
  20%, 60% { box-shadow: 0 0 0 3px #fff, 0 0 28px rgba(255, 255, 255, .45); }
}
.reel-stage[data-flags~="cta"] .reel-scrim { opacity: 1; }
.reel-stage[data-flags~="cta"] .reel-pick { opacity: 0; visibility: hidden; }
.play-cta-card {
  position: absolute; left: 50%; top: 50%; z-index: 9;
  width: 440px; padding: 30px 32px 24px; box-sizing: border-box;
  border-radius: 18px;
  background: #fff; color: #0b0c0f; text-align: center;
  font-family: var(--font, Inter, system-ui, sans-serif);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -46%) scale(.97);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility .35s;
}
.reel-stage[data-flags~="cta"] .play-cta-card { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.play-cta-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.play-cta-text { margin-top: 8px !important; font-size: 15.5px; line-height: 1.5; color: #45464c; }
.play-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 20px; padding: 14px 24px; border-radius: 999px;
  background: #0b0c0f; color: #fff; font-size: 16px; font-weight: 650; text-decoration: none;
}
.play-cta-btn:hover { background: #26272c; }
.play-cta-note { margin-top: 10px !important; font-size: 13px; color: #6e6f75; }
.play-cta-back {
  margin-top: 14px; padding: 6px 10px; border: 0; background: none;
  font: 600 13px/1 var(--font, Inter, system-ui, sans-serif); color: #45464c; cursor: pointer;
}
.play-cta-back:hover { color: #0b0c0f; text-decoration: underline; }
/* On a phone the panel sits under the rows instead of over them. */
.reel-stage.is-play.is-narrow .nrx-launcher { right: 20px; bottom: 20px; }

/* ---- under the frame -------------------------------------------------------- */
.reel-caption {
  margin: 20px 0 0; min-height: 1.4em;
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 640; letter-spacing: -.01em;
  text-align: center; color: var(--ink, #0b0c0f);
}
.reel-steps {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  max-width: 520px; margin: 14px auto 0; padding: 0; list-style: none;
}
.reel-step {
  display: flex; flex-direction: column; gap: 7px; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 560 12.5px/1.2 var(--font, Inter, system-ui, sans-serif);
  color: var(--text-3, #6e6f75); text-align: left;
  transition: color .2s;
}
.reel-step[data-state="now"] { color: var(--ink, #0b0c0f); }
.reel-step-bar { position: relative; display: block; height: 3px; border-radius: 3px; background: rgba(11, 12, 15, .14); overflow: hidden; }
.reel-step-bar::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ink, #0b0c0f);
  transform-origin: left; transform: scaleX(0);
}
.reel-step[data-state="done"] .reel-step-bar::after { transform: scaleX(1); }
.reel-step[data-state="now"] .reel-step-bar::after { animation: reel-fill var(--dur, 3s) linear both; }
@keyframes reel-fill { to { transform: scaleX(1); } }
.reel-note { margin: 12px 0 0; font-size: 13.5px; color: var(--text-3, #6e6f75); text-align: center; }
.reel-try { color: var(--ink, #0b0c0f); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .reel-stage *, .reel-stage *::after { transition: none !important; animation: none !important; }
  .reel-step[data-state="now"] .reel-step-bar::after { animation: none; transform: scaleX(1); }
}