/* S5 — "Step 1 · Remy picks" (mock S5G). Headline top-left; below it a funnel runs left → right:
   a tilted wall of 24 buyer videos → light converging into Remy → three branches → three shorts, picked for you.
   Desktop geometry is drawn in "flow units" (--u = 1/1412 of the flow's width, via a container query unit), so the
   3D wall, the light lines and Remy keep their proportions at every desktop width.
   Resting state = the finished scene; js/app/slides/s5.js replays the story under .nx-s5.is-playing. */

/* ---------- layout: copy on top, the funnel across the full width ---------- */
.nx-s5.nx-slide{ padding-top: max(110px, 12vh); } /* the eyebrow clears the 82px fixed header by ≥28px */
.nx-s5 .nx-s5-layout{ display:block; }
.nx-s5 .nx-s5-copy{ max-width: 760px; position:relative; z-index:3; }
.nx-s5 .nx-h2{ font-size: clamp(2.6rem, min(5.25vw, 9.4vh), 5.4rem); margin-top: 20px; }
.nx-s5 .nx-lede{ font-size: clamp(1.02rem, min(1.36vw, 2.3vh), 1.32rem); max-width: 29.5em; margin-top: 18px; line-height: 1.42; }
.nx-s5 .nx-h2 .nx-grad{ background: linear-gradient(95deg, #ff4b3e 0%, #f0407a 22%, #d846b4 42%, #9b6cff 68%, #b8c4ff 100%); -webkit-background-clip:text; background-clip:text; }
.nx-s5 .nx-s5-visual{ margin-top: clamp(-44px, -2.8vw, -8px); margin-bottom: clamp(0px, 7vh, 80px); }
/* this slide's neon runs cyan (left) → violet → magenta (right), on a lighter night-blue glass */
.nx-s5 .nx-neon{ --nx-neon: linear-gradient(50deg, var(--nx-cyan) 0%, #4f7dff 30%, #7a5cff 58%, #c04dff 80%, var(--nx-magenta) 100%); --nx-neon-w: 4px;
  background: linear-gradient(180deg, rgba(32,34,100,.8), rgba(20,20,70,.86));
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 0 0 34px -4px rgba(63,140,255,.55), 0 0 80px -12px rgba(155,92,255,.65), 0 0 120px -30px rgba(224,64,154,.5), inset 0 0 30px -12px rgba(93,123,255,.55); }
.nx-s5 .nx-neon::before{ filter: brightness(1.05) saturate(1.9); }
.nx-s5 .nx-neon::after{ filter: blur(13px) brightness(1.6) saturate(2); }
/* the reflective floor under the funnel */
.nx-s5 .nx-s5-visual::after{ content:''; position:absolute; left:-4%; right:-4%; bottom: -110px; height: 190px; pointer-events:none; z-index:0;
  background: radial-gradient(40% 34% at 22% 26%, rgba(63,130,255,.85), transparent 70%), radial-gradient(26% 30% at 55% 26%, rgba(120,80,255,.6), transparent 70%), radial-gradient(28% 34% at 86% 26%, rgba(190,70,255,.8), transparent 70%); filter: blur(10px); }

.nx-s5 .nx-s5-flow{ --u: calc(100cqw / 1412); container-type: inline-size; position:relative; z-index:1; display:grid; align-items:center;
  grid-template-columns: minmax(0, 560fr) minmax(0, 92fr) minmax(0, 295fr) minmax(0, 155fr) minmax(0, 310fr);
  margin-left: clamp(-62px, -3.2vw, -24px); }

/* ---------- 1 · the wall (3D: its left edge is nearest, the right edge recedes toward Remy) ---------- */
.nx-s5 .nx-s5-wallbox{ position:relative; z-index:2; aspect-ratio: 560 / 418; perspective: calc(1302 * var(--u)); perspective-origin: 0 63%; }
.nx-s5 .nx-s5-wall{ position:absolute; left:0; top:0; --nx-r: calc(20 * var(--u)); padding: calc(12 * var(--u));
  transform-origin: 0 50%; transform: rotateY(28deg); transform-style: flat;
  background: linear-gradient(180deg, rgba(24,28,84,.86), rgba(14,15,52,.9));
  --nx-neon: linear-gradient(165deg, #6fe6ff 0%, #3f9bff 30%, #3f6bff 62%, #6a5cff 88%, #9b5cff 100%); --nx-neon-w: 4px;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 0 0 22px 0 rgba(63,170,255,.85), 0 0 60px 4px rgba(60,110,255,.6), 0 0 120px 10px rgba(90,80,255,.35), inset 0 0 34px -8px rgba(63,140,255,.7); }
.nx-s5 .nx-s5-wall::after{ filter: blur(10px) brightness(1.9) saturate(1.6); }
.nx-s5 .nx-s5-tiles{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns: repeat(6, calc(121 * var(--u))); grid-template-rows: repeat(4, calc(91 * var(--u))); gap: calc(10 * var(--u)) calc(11 * var(--u)); }
.nx-s5 .nx-s5-tile{ position:relative; overflow:hidden; border-radius: calc(8 * var(--u)); background:#1a1b3a;
  box-shadow: 0 0 0 1px rgba(170,180,255,.28), 0 4px 14px -6px rgba(0,0,0,.7); transition: box-shadow .25s ease, transform .3s cubic-bezier(.2,.9,.3,1.3); }
/* one sprite, one cell per tile: the cell is a square as wide as the tile, centred vertically */
.nx-s5 .nx-s5-tile img{ position:absolute; max-width:none; display:block; width: calc(726 * var(--u)); height: calc(484 * var(--u));
  left: calc(var(--c) * -121 * var(--u)); top: calc(var(--r) * -121 * var(--u) - 15 * var(--u)); transition: filter .3s ease; }
.nx-s5 .nx-s5-tile::after{ content:''; position:absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(4,5,20,.7)); pointer-events:none; }
.nx-s5 .nx-s5-views{ position:absolute; left: calc(8 * var(--u)); bottom: calc(6 * var(--u)); z-index:1; display:inline-flex; align-items:center; gap: .32em;
  font-size: max(12px, calc((16 + var(--c) * 1.3) * var(--u))); font-weight: 600; line-height: 1; color:#fff; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0,0,0,.85); font-variant-numeric: tabular-nums; }
.nx-s5 .nx-s5-views::before{ content:''; width:0; height:0; border-left: .6em solid #fff; border-top: .38em solid transparent; border-bottom: .38em solid transparent; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }

/* ---------- light lines ---------- */
.nx-s5 .nx-s5-in{ position:relative; z-index:1; align-self:center; height:0; }
.nx-s5 .nx-s5-in svg{ position:absolute; left: calc(-30 * var(--u)); top: calc(-166 * var(--u)); width: calc(130 * var(--u)); height: calc(360 * var(--u)); max-width:none; overflow:visible; }
.nx-s5 .nx-s5-in path{ fill:none; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; }
.nx-s5 .nx-s5-in-lines{ filter: drop-shadow(0 0 3px rgba(63,150,255,1)) drop-shadow(0 0 8px rgba(60,90,255,1)) drop-shadow(0 0 18px rgba(130,70,255,.8)); transition: opacity .5s ease; }
.nx-s5 .nx-s5-in-core path{ stroke: #f4f9ff; stroke-width: 1.4; }
.nx-s5 .nx-s5-in-core{ transition: opacity .5s ease; }
.nx-s5 .nx-s5-sparks circle{ fill:#fff; }
.nx-s5 .nx-s5-sparks{ filter: drop-shadow(0 0 3px #d6f3ff) drop-shadow(0 0 8px rgba(63,214,255,1)) drop-shadow(0 0 16px rgba(120,110,255,.8)); }

.nx-s5 .nx-s5-fan{ position:relative; align-self:stretch; margin-left: calc(-4 * var(--u)); }
.nx-s5 .nx-s5-branch{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.nx-s5 .nx-s5-fan path.nx-s5-core{ stroke: #f2f8ff; stroke-width: 1.5; filter:none; }
.nx-s5 .nx-s5-fan path{ fill:none; stroke: #3a7bff; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.nx-s5 .nx-s5-branch{ filter: drop-shadow(0 0 3px rgba(63,160,255,1)) drop-shadow(0 0 9px rgba(50,90,255,1)) drop-shadow(0 0 20px rgba(120,70,255,.8)); }
.nx-s5 .nx-s5-head{ position:absolute; right: calc(18 * var(--u)); top: var(--y, 50%); width: calc(21 * var(--u)); height: calc(21 * var(--u));
  border-top: 3.4px solid #e6f3ff; border-right: 3.4px solid #e6f3ff; border-radius: 1px; transform: translate(0, -50%) rotate(45deg); filter: drop-shadow(0 0 3px #3fa0ff) drop-shadow(0 0 9px #3a5cff); }

/* ---------- 2 · Remy + the tally ---------- */
.nx-s5 .nx-s5-remy{ position:relative; z-index:2; transform: translateY(calc(-64 * var(--u))); }
.nx-s5 .nx-s5-remy-fig{ position:relative; width: 124.07%; margin-inline: -12.03%; aspect-ratio: 1; }
.nx-s5 .nx-s5-remy-fig::before{ content:''; position:absolute; inset: 22% 16% 8%; border-radius:50%; pointer-events:none;
  background: radial-gradient(closest-side, rgba(130,90,255,.5), rgba(255,90,140,.18) 60%, transparent); filter: blur(calc(22 * var(--u))); }
.nx-s5 .nx-s5-remy-fig img{ position:absolute; inset:0; opacity:0; transition: opacity .18s ease; }
.nx-s5 .nx-s5-remy[data-pose="idle"] img[data-pose="idle"],
.nx-s5 .nx-s5-remy[data-pose="listening"] img[data-pose="listening"],
.nx-s5 .nx-s5-remy[data-pose="talking"] img[data-pose="talking"],
.nx-s5 .nx-s5-remy[data-pose="gotit"] img[data-pose="gotit"]{ opacity:1; }
.nx-s5 .nx-s5-tally{ position:absolute; left:50%; top: calc(100% - 14 * var(--u)); transform: translateX(-50%); margin:0; display:flex; align-items:center; justify-content:center; white-space:nowrap;
  gap: 0; padding: 0 calc(30 * var(--u)); height: calc(68 * var(--u)); min-width: calc(322 * var(--u)); border-radius: calc(22 * var(--u));
  font-size: max(14px, calc(21 * var(--u))); font-weight: 500; color: #fff; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, rgba(46,44,124,.72), rgba(28,26,86,.78)); border: 1.5px solid rgba(165,150,255,.78);
  box-shadow: 0 0 26px -8px rgba(120,100,255,.85), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 22px -12px rgba(160,140,255,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nx-s5 .nx-s5-people{ flex:none; width: 1.5em; height: 1.5em; margin-right: .6em; fill: #cfc2ff; filter: drop-shadow(0 0 5px rgba(155,120,255,.8)); }
.nx-s5 .nx-s5-count{ font-weight: 400; display:inline-block; min-width: 3ch; text-align:right; } /* while counting, a 2-digit tally hugs "watched" */
.nx-s5 .nx-s5-npicked{ display:inline-flex; align-items:center; overflow:hidden; max-width: 7em; transition: max-width .5s cubic-bezier(.3,.8,.3,1), opacity .4s ease; }
.nx-s5 .nx-s5-npicked i{ flex:none; width: .22em; height: .22em; margin: 0 .5em 0 .42em; border-radius: 50%; background: #fff; opacity: .8; color: transparent; overflow: hidden; line-height: 0; }

/* ---------- 3 · three shorts, picked for you ---------- */
.nx-s5 .nx-s5-picks{ position:relative; z-index:2; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: clamp(14px, 1.45vw, 22px); }
.nx-s5 .nx-s5-pick{ --nx-r: 20px; display:grid; grid-template-columns: 30% 1fr; gap: 18px; align-items:center; padding: 14px 16px 14px 14px; transition: opacity .4s ease, transform .55s cubic-bezier(.2,.9,.3,1.15); }
.nx-s5 .nx-s5-thumb{ position:relative; display:block; aspect-ratio: 2 / 3; border-radius: 9px; overflow:hidden; background:#16172e; box-shadow: 0 0 0 1px rgba(160,170,255,.22); }
.nx-s5 .nx-s5-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.nx-s5 .nx-s5-thumb-1 img{ object-position: 44% 28%; transform: scale(1.75); transform-origin: 47% 30%; }
.nx-s5 .nx-s5-thumb-2 img{ object-position: 50% 45%; }
.nx-s5 .nx-s5-thumb-3 img{ object-position: 50% 40%; transform: scale(1.85) scaleX(-1); transform-origin: 50% 40%; }
.nx-s5 .nx-s5-dur{ position:absolute; left: 6px; bottom: 6px; font-size: .78rem; font-weight: 500; color:#fff; background: rgba(0,0,0,.62); border-radius: 5px; padding: 1px 5px; z-index:1; }
.nx-s5 .nx-s5-pick-text{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.nx-s5 .nx-s5-pick-text small{ font-size: .8rem; color: var(--nx-ink-faint); }
.nx-s5 .nx-s5-pick-text b{ margin-top: 4px; font-size: clamp(.98rem, 1.22vw, 1.2rem); line-height: 1.25; font-weight: 500; color: var(--nx-ink); }
.nx-s5 .nx-s5-picked{ display:inline-flex; align-items:center; gap: 8px; margin-top: 12px; padding: 7px 16px 7px 12px; border-radius: 999px; font-size: .84rem; color: var(--nx-ink); white-space: nowrap;
  background: linear-gradient(90deg, rgba(104,58,255,.92), rgba(142,76,255,.8)); border: 1px solid rgba(200,175,255,.9); box-shadow: 0 0 18px -4px rgba(155,92,255,.85), inset 0 0 12px -6px rgba(200,180,255,.9); transition: box-shadow .4s ease, opacity .3s ease; }
.nx-s5 .nx-s5-picked svg{ flex:none; width: 16px; height: 16px; fill: #fff; filter: drop-shadow(0 0 4px rgba(200,180,255,.9)); }

/* ---------- the animation (s5.js; every state below only applies while playing) ---------- */
/* Remy watches: tiles wake up as the scan passes, three flash magenta, the tally counts, the branches draw */
.nx-s5.is-playing .nx-s5-tile:not(.is-seen) img{ filter: brightness(.42) saturate(.55); }
.nx-s5.is-playing .nx-s5-tile.is-scan{ z-index:2; transform: scale(1.07); box-shadow: 0 0 0 2px #7fe3ff, 0 0 16px 3px rgba(63,214,255,.85), 0 0 34px 4px rgba(63,140,255,.5); }
.nx-s5.is-playing .nx-s5-tile.is-scan img{ filter: brightness(1.15); }
.nx-s5.is-playing .nx-s5-tile.is-hit{ z-index:2; transform: scale(1.08); box-shadow: 0 0 0 2.5px #ff6fd0, 0 0 18px 4px rgba(224,64,154,.95), 0 0 40px 8px rgba(190,70,255,.55); }
.nx-s5.is-playing .nx-s5-tile.is-hit img{ filter: brightness(1.12) saturate(1.1); }
.nx-s5.is-playing .nx-s5-in-lines{ opacity:.5; }
.nx-s5.is-playing .nx-s5-in.is-on .nx-s5-in-lines{ opacity:1; }
.nx-s5.is-playing .nx-s5-in-core{ opacity:.35; }
.nx-s5.is-playing .nx-s5-in.is-on .nx-s5-in-core{ opacity:1; }
.nx-s5.is-playing .nx-s5-branch{ clip-path: inset(-20px 100% -20px -20px); transition: clip-path .6s cubic-bezier(.6,.1,.3,1); }
.nx-s5.is-playing .nx-s5-branch.is-on{ clip-path: inset(-20px -20px -20px -20px); }
.nx-s5.is-playing .nx-s5-head{ opacity:0; transition: opacity .2s ease; }
.nx-s5.is-playing .nx-s5-head.is-on{ opacity:1; transition-delay: .45s; }
.nx-s5.is-playing .nx-s5-pick:not(.is-on){ opacity:0; transform: translateX(-34px); }
.nx-s5.is-playing .nx-s5-pick.is-glow .nx-s5-picked{ box-shadow: 0 0 30px 2px rgba(155,92,255,.95), 0 0 12px rgba(224,64,154,.7), inset 0 0 14px -4px rgba(230,210,255,1); }
.nx-s5.is-playing .nx-s5-tally:not(.is-done) .nx-s5-npicked{ max-width:0; opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .nx-s5.is-playing .nx-s5-pick.is-glow .nx-s5-picked svg{ animation: nx-s5-twinkle .9s ease-in-out 2; }
  .nx-s5.is-playing .nx-s5-remy-fig{ animation: nx-s5-bob 3.2s ease-in-out infinite; }
  .nx-s5.is-playing .nx-s5-tally.is-done{ animation: nx-s5-pop .5s cubic-bezier(.2,.9,.3,1.4); }
}
@keyframes nx-s5-twinkle{ 50%{ transform: scale(1.35) rotate(20deg); } }
@keyframes nx-s5-bob{ 50%{ transform: translateY(-5px); } }
@keyframes nx-s5-pop{ 45%{ box-shadow: 0 0 40px -2px rgba(155,92,255,1), inset 0 0 22px -8px rgba(200,180,255,1); } }

/* ---------- narrower desktops: give the cards' text room ---------- */
@media (max-width: 1320px){
  .nx-s5 .nx-s5-pick{ grid-template-columns: 26% 1fr; gap: 12px; padding: 12px; }
  .nx-s5 .nx-s5-picked{ font-size: .76rem; padding: 6px 11px 6px 9px; gap: 6px; }
  .nx-s5 .nx-s5-picked svg{ width: 14px; height: 14px; }
}

/* short desktop screens (1366×768, 1280×800, 1440×800): the three picks set the funnel's height, so they tighten up
   and the last one lands above the fold */
@media (min-width: 1081px) and (max-height: 860px){
  .nx-s5 .nx-s5-picks{ gap: 10px; }
  .nx-s5 .nx-s5-pick{ padding: 9px 12px 9px 10px; }
  .nx-s5 .nx-s5-pick-text b{ margin-top: 2px; font-size: clamp(.95rem, 1.15vw, 1.1rem); }
  .nx-s5 .nx-s5-picked{ margin-top: 7px; padding: 5px 12px 5px 9px; }
}

/* ---------- stacked: ≤1080px the funnel runs top → bottom, flat ---------- */
@media (max-width: 1080px){
  .nx-s5 .nx-s5-copy{ max-width: 640px; }
  .nx-s5 .nx-s5-visual{ margin-top: 32px; }
  .nx-s5 .nx-s5-flow{ display:flex; flex-direction:column; align-items:stretch; max-width: 600px; margin: 0 auto; }
  .nx-s5 .nx-s5-wallbox{ aspect-ratio:auto; perspective:none; }
  .nx-s5 .nx-s5-wall{ position:relative; transform:none; --nx-r: 18px; padding: 10px; }
  .nx-s5 .nx-s5-tiles{ grid-template-columns: repeat(6, minmax(0,1fr)); grid-template-rows:none; gap: 7px; }
  .nx-s5 .nx-s5-tile{ aspect-ratio: 1; border-radius: 7px; }
  .nx-s5 .nx-s5-tile img{ width: 600%; height: 400%; left: calc(var(--c) * -100%); top: calc(var(--r) * -100%); }
  .nx-s5 .nx-s5-views{ left: 5px; bottom: 5px; font-size: 12px; }
  /* the light becomes one short vertical glow between the parts */
  .nx-s5 .nx-s5-in, .nx-s5 .nx-s5-fan{ height: 50px; margin: 4px 0; align-self:auto; }
  .nx-s5 .nx-s5-in svg, .nx-s5 .nx-s5-branch{ display:none; }
  .nx-s5 .nx-s5-in::before, .nx-s5 .nx-s5-fan::before{ content:''; position:absolute; left:50%; top: 4px; bottom: 6px; width: 3px; margin-left: -1.5px; border-radius: 2px;
    background: linear-gradient(180deg, #bff3ff, #9d84ff); box-shadow: 0 0 6px var(--nx-cyan), 0 0 14px rgba(63,120,255,.95), 0 0 24px rgba(130,90,255,.6); }
  .nx-s5 .nx-s5-head{ display:none; }
  .nx-s5 .nx-s5-head:first-of-type{ display:block; right:auto; left:50%; top:auto; bottom: 4px; width: 12px; height: 12px; border-width: 3px; transform: translate(-50%, 0) rotate(135deg); }
  .nx-s5 .nx-s5-in::after{ content:''; position:absolute; left:50%; bottom: 4px; width: 12px; height: 12px; border-top: 3px solid #d9ccff; border-right: 3px solid #d9ccff; transform: translate(-50%, 0) rotate(135deg); filter: drop-shadow(0 0 4px #8a64ff) drop-shadow(0 0 9px #5a6bff); }
  .nx-s5.is-playing .nx-s5-in::before{ opacity:.5; transition: opacity .5s ease; }
  .nx-s5.is-playing .nx-s5-in.is-on::before{ opacity:1; }
  .nx-s5.is-playing .nx-s5-fan::before{ transform: scaleY(0); transform-origin: 50% 0; transition: transform .6s cubic-bezier(.6,.1,.3,1); }
  .nx-s5.is-playing .nx-s5-fan.is-on::before{ transform:none; }
  .nx-s5 .nx-s5-remy{ transform:none; display:flex; flex-direction:column; align-items:center; }
  .nx-s5 .nx-s5-remy-fig{ width: 220px; margin: -18px 0 -14px; }
  .nx-s5 .nx-s5-remy-fig::before{ filter: blur(20px); }
  .nx-s5 .nx-s5-tally{ position:relative; left:auto; top:auto; transform:none; height: 52px; min-width:0; padding: 0 22px; border-radius: 18px; font-size: 1.05rem; }
  .nx-s5 .nx-s5-pick{ grid-template-columns: 96px 1fr; }
}
@media (max-width: 640px){
  .nx-s5 .nx-eyebrow{ font-size: .76rem; }
  .nx-s5 .nx-h2 .nx-line:first-child{ max-width: 9em; }
  /* the wall becomes a flat 4 × 3 grid: the first four columns of the first three rows */
  .nx-s5 .nx-s5-tiles{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
  .nx-s5 .nx-s5-tile:nth-child(6n+5), .nx-s5 .nx-s5-tile:nth-child(6n), .nx-s5 .nx-s5-tile:nth-child(n+19){ display:none; }
  .nx-s5 .nx-s5-remy-fig{ width: 190px; }
  .nx-s5 .nx-s5-tally{ font-size: 1rem; height: 48px; }
  .nx-s5 .nx-s5-pick{ grid-template-columns: 78px 1fr; gap: 12px; }
  .nx-s5 .nx-s5-pick-text b{ font-size: 1rem; }
  .nx-s5 .nx-s5-picked{ font-size: .78rem; padding: 6px 12px 6px 10px; }
  .nx-s5 .nx-s5-dur{ font-size: .75rem; }
}