/* Slide 8 — "Studio upgrade" (S8B). Centered copy over a wide neon before/after stage: the same contractor at his
   kitchen table (Before) and relit in a podcast studio (After), split by a real, draggable, keyboard-operable slider,
   plus a picture-in-picture second angle that auto-cuts. Resting state = the finished scene (handle at 50%, close-up). */

/* ---------- copy ---------- */
.nx-s8.nx-slide{ padding-top: max(110px, 11.5vh); padding-bottom: clamp(44px, 6vh, 72px); } /* eyebrow ≥28px below the 82px header */
.nx-s8 .nx-copy-block{ max-width: 1180px; }
.nx-s8 .nx-eyebrow.is-plain{ font-size: .8rem; letter-spacing: .36em; color: rgba(243,239,231,.8); }
.nx-s8 .nx-h2{ font-size: clamp(2.6rem, 5.3vw, 5.4rem); margin-top: 14px; }
.nx-s8 .s8-l1{ white-space: nowrap; }
.nx-s8 .nx-lede{ max-width: 41em; margin-top: 12px; font-size: clamp(1.02rem, 1.26vw, 1.2rem); line-height: 1.5; color: rgba(243,239,231,.86); }

/* ---------- the stage ---------- */
.nx-s8 .s8-wrap{ position: relative; width: 100%; max-width: min(1160px, calc((100svh - 470px) * 2.3)); margin: clamp(22px, 2.6vh, 34px) auto 0; } /* width follows the viewport height (2.3 = the photo's ratio; 470px = header, copy, pill row, padding) so the pill row stays above the fold */
.nx-s8 .s8-visual{ position: relative; z-index: 1; margin-top: 0; }
.nx-s8 .s8-visual .nx-floor-glow{ bottom: auto; top: calc(100% - 175px); left: 0; right: 0; height: 130px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(155,92,255,.62), rgba(63,214,255,.16) 55%, transparent 76%); }
.nx-s8 .s8-stage{ --nx-r: 30px; --nx-neon-w: 3.5px; padding: 14px; border-radius: 30px;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), -12px 0 40px 0 rgba(40,130,255,.5), 12px 0 44px 0 rgba(214,64,210,.5), 0 0 80px 6px rgba(120,80,255,.28); }
.nx-s8 .s8-stage::before, .nx-s8 .s8-stage::after{ background: linear-gradient(100deg, #2a8dff 0%, #4a78ff 30%, #8f5cff 62%, #d846e0 88%, #e0409a 100%); }
.nx-s8 .s8-stage::before{ filter: brightness(1.3) saturate(1.3); }
/* the shared bloom is masked back to the ring after its blur, so here it is an unmasked blurred plate behind the stage */
.nx-s8 .s8-stage{ background: #0b0c26; }
.nx-s8 .s8-stage::after{ z-index: -1; inset: -9px; padding: 0; -webkit-mask: none; mask: none; filter: blur(24px) saturate(1.6) brightness(1.5); opacity: 1; }
.nx-s8 .s8-photo{ position: relative; aspect-ratio: 2.3; border-radius: 18px; overflow: hidden; background: #15141c; --pos: 50%; }
.nx-s8 .s8-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; display: block; }
.nx-s8 .s8-before{ position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.nx-s8 .s8-tag{ position: absolute; top: 12px; z-index: 2; font-size: 1.05rem; font-weight: 500; line-height: 1; color: #fff; padding: 9px 20px; border-radius: 999px;
  background: rgba(14,15,38,.6); border: 1.5px solid rgba(235,238,255,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); white-space: nowrap; }
.nx-s8 .s8-tag-before{ left: 12px; }
.nx-s8 .s8-tag-after{ left: calc(var(--pos) + 22px); }
.nx-s8 .s8-divider{ position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; z-index: 2; background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px rgba(190,170,255,.9), 0 0 2px rgba(255,255,255,.9); }
.nx-s8 .s8-knob{ position: absolute; top: 60%; left: var(--pos); z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, rgba(92,72,220,.92), rgba(34,24,110,.94) 70%); border: 2px solid rgba(240,236,255,.95);
  box-shadow: 0 0 0 3px rgba(155,92,255,.35), 0 0 22px rgba(155,92,255,.9), 0 6px 18px rgba(0,0,0,.45); transition: transform .2s ease, box-shadow .2s ease; }
.nx-s8 .s8-knob svg{ width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.nx-s8 .s8-photo.is-dragging .s8-knob{ transform: scale(1.1); box-shadow: 0 0 0 4px rgba(63,214,255,.45), 0 0 28px rgba(63,214,255,.9), 0 6px 18px rgba(0,0,0,.45); }
.nx-s8 .s8-wrap::after{ content: ''; position: absolute; z-index: 0; left: -10%; right: -10%; top: calc(100% - 190px); height: 260px; pointer-events: none;
  background: radial-gradient(52% 44% at 50% 30%, rgba(125,70,255,.46), rgba(63,120,255,.14) 60%, transparent 78%); }

/* the real control: an invisible layer exactly over the photo (outside the aria-hidden picture) that takes drags and keys */
.nx-s8 .s8-range{ position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; aspect-ratio: 2.3; border-radius: 18px; cursor: ew-resize; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; }
.nx-s8 .s8-range:focus-visible + .s8-visual .s8-knob{ outline: 3px solid var(--nx-cyan); outline-offset: 4px; }

/* picture-in-picture: a second camera angle (the after photo, cropped by CSS) */
.nx-s8 .s8-pip{ position: absolute; z-index: 2; right: -48px; bottom: 14px; width: 21%; aspect-ratio: 1.16; margin: 0; border-radius: 16px; overflow: hidden; container-type: inline-size; /* the label scales with the inset */
  border: 3px solid transparent; background: linear-gradient(#15141c, #15141c) padding-box, linear-gradient(135deg, var(--nx-cyan), #5d7bff 40%, var(--nx-violet) 70%, var(--nx-magenta)) border-box;
  box-shadow: 0 0 26px -2px rgba(93,123,255,.75), 0 0 40px -6px rgba(224,64,154,.55), 0 20px 40px -12px rgba(0,0,0,.7); }
.nx-s8 .s8-pip img{ position: absolute; display: block; transition: opacity .32s ease; }
.nx-s8 .s8-pip-wide{ inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; }
.nx-s8 .s8-pip-close{ width: 349%; height: auto; max-width: none; left: -127%; top: -44%; }
.nx-s8 .s8-pip-flash{ position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; transition: opacity .38s ease; pointer-events: none; }
.nx-s8 .s8-pip figcaption{ text-align: left; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 14px 10px; font-size: clamp(.75rem, 6.6cqw, 1rem); font-weight: 500; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6,6,18,.72)); text-shadow: 0 1px 3px rgba(0,0,0,.7); white-space: nowrap; }
.nx-s8 .s8-pip figcaption span{ display: block; transition: opacity .16s ease; }
/* the cut swaps the label at the midpoint: the outgoing one fades first, the incoming one after it (never both at once) */
.nx-s8 .s8-pip .s8-cap-close{ transition-delay: .16s; }
.nx-s8 .s8-pip.is-wide .s8-cap-wide{ transition-delay: .16s; }
.nx-s8 .s8-pip.is-wide .s8-cap-close{ transition-delay: 0s; }
.nx-s8 .s8-pip .s8-cap-wide{ position: absolute; left: 14px; bottom: 10px; opacity: 0; }
.nx-s8 .s8-pip.is-wide .s8-pip-wide, .nx-s8 .s8-pip.is-wide .s8-cap-wide{ opacity: 1; }
.nx-s8 .s8-pip.is-wide .s8-pip-close, .nx-s8 .s8-pip.is-wide .s8-cap-close{ opacity: 0; }
.nx-s8 .s8-pip.is-flash .s8-pip-flash{ opacity: .5; transition: none; }

/* ---------- the chip row under the stage ---------- */
.nx-s8 .s8-chiprow{ position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; width: fit-content; margin: 22px auto 0; padding: 12px 14px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(32,34,98,.78), rgba(48,30,108,.78)); border: 1.5px solid rgba(170,150,255,.62);
  box-shadow: 0 0 30px -8px rgba(123,99,255,.85), inset 0 1px 0 rgba(255,255,255,.07); }
.nx-s8 .s8-ic{ flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.nx-s8 .s8-ic-cam{ background: radial-gradient(circle at 35% 30%, #7d8cff, #4b2fd6); box-shadow: 0 0 22px rgba(93,123,255,.95), inset 0 0 0 1px rgba(255,255,255,.28); }
.nx-s8 .s8-ic-wave{ background: radial-gradient(circle at 35% 30%, #c77dff, #7a2fd6); box-shadow: 0 0 22px rgba(170,80,255,.95), inset 0 0 0 1px rgba(255,255,255,.28); }
.nx-s8 .s8-ic svg{ width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.nx-s8 .s8-ic-wave path{ transform-box: fill-box; transform-origin: 50% 50%; }
.nx-s8 .s8-chiptext{ font-size: 1.12rem; font-weight: 500; color: #fff; white-space: nowrap; }
.nx-s8 .s8-chiptext b{ font-weight: 500; transition: color .3s ease, text-shadow .3s ease; }
.nx-s8 .s8-arr{ display: inline-block; margin: 0 4px; color: rgba(243,239,231,.85); }

/* ---------- animation states (driven by s8.js; only while playing) ---------- */
.nx-s8.is-playing .s8-chiptext b{ color: rgba(243,239,231,.5); }
.nx-s8.is-playing.is-cam-wide .s8-w-wide, .nx-s8.is-playing.is-cam-close .s8-w-close{ color: #fff; text-shadow: 0 0 12px rgba(63,214,255,.9); }
@media (prefers-reduced-motion: no-preference){
  .nx-s8.is-playing .s8-ic-wave path{ animation: nx-s8-eq 0.9s ease-in-out infinite alternate; }
  .nx-s8.is-playing .s8-ic-wave .s8-b2{ animation-delay: -.3s; }
  .nx-s8.is-playing .s8-ic-wave .s8-b3{ animation-delay: -.6s; }
  .nx-s8.is-playing .s8-ic-wave .s8-b4{ animation-delay: -.15s; }
  .nx-s8.is-playing .s8-ic-wave .s8-b5{ animation-delay: -.45s; }
}
@keyframes nx-s8-eq{ from{ transform: scaleY(.45); } to{ transform: scaleY(1.15); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1240px){
  .nx-s8 .s8-pip{ right: -20px; }
}
@media (max-width: 1080px){
  .nx-s8.nx-slide{ padding-top: clamp(100px, 11vh, 112px); padding-bottom: clamp(40px, 7vh, 64px); }
  .nx-s8 .s8-wrap{ max-width: 1160px; } /* stacked: no fold to fit, keep the full width */
  .nx-s8 .s8-pip{ right: 24px; bottom: 26px; width: 24%; }
}
@media (max-width: 640px){
  .nx-s8 .s8-l1{ white-space: normal; }
  .nx-s8 .s8-l1 .nx-grad{ display: block; width: fit-content; }
  .nx-s8 .nx-eyebrow.is-plain{ font-size: .76rem; letter-spacing: .22em; }
  .nx-s8 .s8-wrap{ margin-top: 26px; }
  .nx-s8 .s8-stage{ --nx-r: 20px; --nx-neon-w: 3px; padding: 8px; border-radius: 20px; }
  .nx-s8 .s8-photo{ aspect-ratio: 1.3; border-radius: 13px; }
  .nx-s8 .s8-range{ top: 8px; left: 8px; right: 8px; aspect-ratio: 1.3; border-radius: 13px; }
  .nx-s8 .s8-img{ object-position: 50% 44%; }
  .nx-s8 .s8-tag{ top: 8px; font-size: .78rem; padding: 6px 11px; }
  .nx-s8 .s8-tag-before{ left: 8px; }
  .nx-s8 .s8-tag-after{ left: calc(var(--pos) + 10px); }
  .nx-s8 .s8-knob{ top: 70%; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .nx-s8 .s8-knob svg{ width: 18px; height: 18px; }
  .nx-s8 .s8-pip{ right: 14px; bottom: 14px; width: 33%; border-width: 2px; border-radius: 11px; }
  .nx-s8 .s8-pip figcaption{ font-size: .75rem; line-height: 1.2; padding: 16px 7px 6px; white-space: normal; }
  .nx-s8 .s8-pip .s8-cap-wide{ left: 7px; right: 7px; bottom: 6px; }
  .nx-s8 .s8-chiprow{ gap: 10px; margin-top: 18px; padding: 6px 8px; }
  .nx-s8 .s8-ic{ width: 36px; height: 36px; }
  .nx-s8 .s8-ic svg{ width: 18px; height: 18px; }
  .nx-s8 .s8-chiptext{ font-size: .84rem; }
  .nx-s8 .s8-arr{ margin: 0 1px; }
  .nx-s8 .s8-visual .nx-floor-glow{ top: calc(100% - 110px); height: 70px; }
}