/* 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. (13 Nov 2026: the keys confused the people
   Hari showed it to, so the reel presses Sorted's button instead. Still no
   gliding pointer: the pressed state carries its own, in place.)

   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
     keyg      the button pressed is Hidden categories, not Pick for me (with keys)
     cats      the category browser is open; catgo presses the chosen one
     oncat     the page is the category it opened (the grid flags below:
               sorted, arrived, loading, done, loaded, top)
     panel     the filter panel is open
     fading    everything under the bar has faded back
     keys      Sorted's button in the corner 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; }
.reel-stage .nrx-filterp-sub { margin: 2px 0 0; }
.reel-stage .nrx-filterp-gsub { margin: 4px 0 0; }
.reel-stage .nrx-pick-empty-body { margin: 10px 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 press 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; }

/* The press: Sorted's own button in the corner, lit above the dimmed page and
   pushed once (stage.js sets data-reel-press while the flag keys is on). Until
   13 Nov 2026 this was two key caps, Shift + P, in the middle of the page. The
   pointer is part of the pressed state and appears where it is; nothing glides. */
.reel-stage[data-flags~="keys"] .nrx-launcher { z-index: 6; }
.reel-stage .nrx-launcher > .nrx-launcher-item[data-reel-press] {
  position: relative;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16));
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 2px rgba(244, 244, 245, .95), 0 0 0 9px rgba(244, 244, 245, .16), 0 18px 40px -14px rgba(0, 0, 0, .9);
  animation: reel-press .9s ease both;
}
.reel-stage .nrx-launcher > .nrx-launcher-item[data-reel-press]::after {
  content: ""; position: absolute; left: 47%; top: 62%; width: 32px; height: 32px; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l14.5 9-6.6 1.2 3.7 6.9-2.7 1.4-3.7-6.9-5 4.4z' fill='%23fff' stroke='%230d0e10' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .7));
  animation: reel-point .9s ease both;
  pointer-events: none;
}
@keyframes reel-press {
  0%, 38% { transform: none; }
  52%, 72% { transform: scale(.955); }
  100% { transform: none; }
}
@keyframes reel-point {
  0% { opacity: 0; transform: translate(10px, 12px); }
  30%, 38% { opacity: 1; transform: none; }
  52%, 72% { opacity: 1; transform: translate(-2px, -2px) scale(.92); }
  100% { opacity: 1; transform: none; }
}

/* 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; }
/* pick.css keeps the panel's top edge at half the window less 250px; on the
   stage that is half the STAGE, so the panel sits where it does on Netflix. */
.reel-stage .nrx-pick-panel { top: max(16px, calc(50% - 250px)); 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-pick { transition: none !important; }

/* ---- a page with no billboard (the scenes) ------------------------------------ */
.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; }
/* A title in the open Top 10 is hidden where it stands while the grid is
   ranked, as sort.js lifts it: the grid below the box is the rest. */
.reel-grid .reel-card[data-lifted] { display: none; }
/* The Top 10 box (ext/sort.css draws it). Five to a row on the stage, as the
   product lays it out in a window under 1,240px: the stage is 600 wide
   whatever the window is, and the extension's own rule answers the window. */
.reel-stage .nrx-sort-top { animation: reel-rise .38s cubic-bezier(.2, .8, .2, 1) both; }
.reel-stage .nrx-sort-top-list { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 12px; }
.reel-stage .nrx-sort-top-note { display: none; }
/* The stage's posters are portrait; the box crops them to Netflix's 16:9 from
   near the top, where the faces are. */
.reel-stage .nrx-sort-top-art img { object-position: 50% 22%; }
.reel-stage .nrx-sort-top-card { cursor: default; }
/* Load all's progress: the product's pill, at the foot of the stage. */
.reel-stage .nrx-sort-load { position: absolute; z-index: 6; animation: reel-pill .3s cubic-bezier(.2, .8, .2, 1) both; }
/* Its own rise: sort.css centres it with translateX(-50%), which a plain rise
   would replace. */
@keyframes reel-pill { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.reel-stage .nrx-sort-load-stop { cursor: default; }

/* ---- the hero's category page (its Rank beat) ----------------------------------- */
/* Over the home page, under the nav, and a cut both ways: Hidden categories
   opens a new page, it does not scroll to one. On the wide stage the grid is
   eight across and the Top 10 one row of ten, as the product lays it out in a
   window that wide. */
.reel-catview { position: absolute; inset: 0; z-index: 1; display: none; padding-top: 68px; background: #141414; }
.reel-stage[data-flags~="oncat"] .reel-catview { display: block; }
.reel-stage[data-flags~="oncat"] .reel-nav { background-color: #141414; background-image: none; }
.reel-catview .reel-gridpage { padding: 10px 40px 0; }
.reel-stage:not(.is-narrow) .reel-catview .reel-grid { grid-template-columns: repeat(8, 1fr); }
.reel-stage:not(.is-narrow) .reel-catview .nrx-sort-top-list { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.reel-stage.is-narrow .reel-catview .reel-gridpage { padding: 10px 28px 0; }
.reel-stage[data-flags~="catgo"] .nrx-genre-option[data-active="true"] { animation: reel-tap .3s ease both; }

/* ---- 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 hero, once the visitor has it (Shift+P, Shift+G, a button) ------------ */
/* The product's own override: pointing at a faded card brings it straight back
   (.nrx-dimmed:hover in content.css). */
.reel-stage.is-live[data-flags~="fading"] .reel-card[data-below]:hover { opacity: 1; filter: none; transition-duration: .15s; }
/* Clicking the dimmed page behind the pick closes it, as on Netflix. */
.reel-stage.is-live[data-flags~="picked"] .reel-scrim,
.reel-stage.is-live[data-flags~="cta"] .reel-scrim { pointer-events: auto; cursor: pointer; }
/* "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; }

/* ---- 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(6, minmax(0, 1fr)); gap: 10px;
  max-width: 600px; 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); } }
/* Held: the visitor has the frame, so no clock is filling the step. */
.reel-steps.is-held .reel-step[data-state="now"] .reel-step-bar::after { animation: none; 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; }
button.reel-try { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.reel-note kbd:not([class]) { font-size: .85em; }

@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); }
}