/* Slide 3 — "The freeze". Visual: an empty "Content ideas" doc with a blinking cursor, drowned in a tilted storm of
   browser tabs (every question a new creator googles) and a red stress swirl. Resting state = the finished storm;
   s3.js replays it: tabs pop in and crowd closer, the cursor types "What do I…" and gives up, the red glow climbs. */

/* ---------- copy ---------- */
.nx-s3 .nx-eyebrow{ font-size:.8rem; letter-spacing:.22em; padding:6px 15px; }
.nx-s3 .nx-h2{ font-size: clamp(2.6rem, 6.8vw, 6.6rem); line-height:.96; }
.nx-s3 .nx-lede{ font-size: clamp(1.05rem, 1.48vw, 1.45rem); line-height:1.52; max-width: 19.6em; }

/* ---------- stage (percent coordinates, type scales with the stage via cqw) ---------- */
.nx-s3 .nx-s3-visual{ container-type: inline-size; margin-left: calc(-1 * clamp(0px, 3.4vw, 64px)); }
@media (min-width: 1081px){
  .nx-s3 .nx-split.is-flipped{ grid-template-columns: minmax(0, 1fr) minmax(320px, 0.53fr); }
  .nx-s3{ padding-bottom: calc(clamp(48px, 8vh, 84px) + 56px); }
  .nx-s3 .nx-s3-stage{ top: -28px; }
}
.nx-s3 .nx-s3-stage{ position:relative; width:100%; aspect-ratio: 950 / 760; font-size: max(12px, 2.05cqw); perspective: 1400px; perspective-origin: 52% 48%; }
.nx-s3 .nx-s3-stage::after{ content:''; position:absolute; left:-6%; right:-8%; bottom:-17%; height:26%; pointer-events:none; border-radius:50%; z-index:0;
  background: radial-gradient(50% 50% at 50% 30%, rgba(130,90,255,.6), rgba(224,64,154,.16) 45%, rgba(63,120,255,.14) 60%, transparent 78%); filter: blur(12px); }
.nx-s3 .nx-s3-floor{ position:absolute; left:-8%; right:-10%; bottom:-11%; height:6px; z-index:0; pointer-events:none; border-radius:50%; opacity:.35; /* a soft horizon, not a seam line (S3B has none) */
  background: linear-gradient(90deg, transparent, rgba(120,110,255,.55) 20%, rgba(255,80,160,.5) 50%, rgba(90,140,255,.55) 80%, transparent); filter: blur(5px); }
.nx-s3 .nx-s3-stage::before{ content:''; position:absolute; left:4%; right:0; bottom:-21%; height:20%; pointer-events:none; z-index:0; opacity:.78; filter: blur(9px);
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(150,110,255,.5) 22px 26px, transparent 26px 60px, rgba(255,70,120,.35) 60px 63px, transparent 63px 97px);
  -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); }

/* red stress: a haze + orbiting arcs; --nx-s3-stress (0–1, set by s3.js while playing) drives how hot it runs */
.nx-s3 .nx-s3-glow{ position:absolute; inset:-2% -3% 2% -4%; z-index:0; pointer-events:none; border-radius:50%;
  background: radial-gradient(closest-side, rgba(40,30,120,0) 52%, rgba(255,40,80,.26) 72%, rgba(255,40,90,.08) 88%, transparent 100%);
  filter: blur(22px); opacity: calc(.2 + .8 * var(--nx-s3-stress, 1)); transition: opacity .8s ease; }
.nx-s3 .nx-s3-flare{ position:absolute; inset:6% 4% 10%; z-index:0; pointer-events:none; border-radius:50%; opacity:0; transition: opacity .6s ease;
  background: radial-gradient(closest-side, transparent 50%, rgba(255,50,70,.45) 72%, transparent 100%); filter: blur(18px); }
.nx-s3 .nx-s3-swirl{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; pointer-events:none; transition: opacity .8s ease; }
.nx-s3 .nx-s3-swirl ellipse{ fill:none; stroke-linecap:round; }
.nx-s3 .nx-s3-swirl.is-soft{ filter: blur(7px); opacity: calc(.15 + .85 * var(--nx-s3-stress, 1)); }
.nx-s3 .nx-s3-swirl.is-soft ellipse{ stroke:#ff1e3c; stroke-width:14; }
.nx-s3 .nx-s3-swirl.is-soft .r4{ stroke:#e0409a; stroke-width:12; }
.nx-s3 .nx-s3-swirl.is-soft .r5{ stroke:#ff3a3a; stroke-width:18; opacity:.6; }
.nx-s3 .nx-s3-swirl.is-soft .r6{ stroke:#ff2d6a; stroke-width:8; }
.nx-s3 .nx-s3-swirl.is-sharp{ filter: drop-shadow(0 0 4px #ff3355); opacity: calc(.1 + .9 * var(--nx-s3-stress, 1)); }
.nx-s3 .nx-s3-swirl.is-sharp ellipse{ stroke:#ff5468; stroke-width:2.6; }
.nx-s3 .nx-s3-swirl.is-sharp .r4{ stroke:#ff8aa0; stroke-width:1.4; }

/* faded tabs for depth */
.nx-s3 .nx-s3-ghosts{ position:absolute; inset:0; z-index:1; }
.nx-s3 .nx-s3-ghost{ position:absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); aspect-ratio: 1.6; border-radius: 10% / 16%;
  transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg));
  background: linear-gradient(170deg, rgba(190,110,220,.45), rgba(110,52,150,.32)); border:1px solid rgba(255,130,200,.6);
  box-shadow: 0 0 14px -3px rgba(255,70,120,.6); opacity:.66; filter: blur(.6px); transition: opacity .5s ease, scale .6s cubic-bezier(.2,.9,.3,1.2); }
.nx-s3 .nx-s3-ghost:nth-child(3n){ background: linear-gradient(170deg, rgba(230,80,130,.40), rgba(120,40,110,.30)); border-color: rgba(255,110,140,.55); opacity:.5; }
.nx-s3 .nx-s3-ghost:nth-child(4n+1){ opacity:.42; filter: blur(1.4px); }
.nx-s3 .nx-s3-ghost::before{ content:''; position:absolute; left:8%; top:9%; width:26%; height:15%;
  background: radial-gradient(circle, #ff5a5a 36%, transparent 44%) 0 0 / 33.3% 100% repeat-x; }
.nx-s3 .nx-s3-ghost::after{ content:''; position:absolute; left:10%; right:14%; top:44%; height:34%;
  background: linear-gradient(rgba(225,215,255,.4), rgba(225,215,255,.4)) 0 0 / 100% 24% no-repeat, linear-gradient(rgba(225,215,255,.28), rgba(225,215,255,.28)) 0 100% / 64% 24% no-repeat; }

/* props */
.nx-s3 .nx-s3-prop{ position:absolute; z-index:2; height:auto; display:block; filter: drop-shadow(0 0 10px rgba(93,123,255,.35)); }
.nx-s3 .nx-s3-prop.is-tripod{ left:3.4%; top:46.2%; width:11.4%; }
.nx-s3 .nx-s3-prop.is-ring{ left:6.6%; top:66%; width:9.4%; filter: drop-shadow(0 0 16px rgba(255,255,255,.35)) drop-shadow(0 0 30px rgba(224,64,154,.35)); }
.nx-s3 .nx-s3-prop.is-clapper{ left:76.2%; top:75.4%; width:13.2%; }

/* the empty doc */
.nx-s3 .nx-s3-doc{ position:absolute; z-index:3; left:34.3%; top:24.2%; width:38.4%; height:47%; --nx-r: .95em; --nx-neon-w: 5px;
  --nx-neon: linear-gradient(210deg, #6cb8ff 0%, #8a74ff 30%, #c24dff 60%, #ff4a86 100%);
  background: linear-gradient(165deg, rgba(52,50,130,.78), rgba(22,22,64,.9) 55%, rgba(30,20,70,.9));
  transform: rotateY(-10deg) rotateX(3deg) rotate(4deg);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 14px -10px 70px -14px rgba(93,123,255,.75), -22px 22px 90px -20px rgba(255,50,120,.75); transform-origin: 50% 50%; transition: box-shadow .6s ease; }
.nx-s3 .nx-s3-doc::after{ filter: blur(16px) brightness(2) saturate(1.5); inset:-5px; }
.nx-s3 .nx-s3-docbar{ display:flex; gap:.42em; padding: .95em 1.1em .8em; border-bottom:1px solid rgba(190,190,255,.16); }
.nx-s3 .nx-s3-docbar i, .nx-s3 .nx-s3-bar i{ width:.62em; height:.62em; border-radius:50%; background:#ff5a4e; box-shadow: 0 0 6px rgba(255,90,78,.7); }
.nx-s3 .nx-s3-docbar i:nth-child(2), .nx-s3 .nx-s3-bar i:nth-child(2){ background:#ffb23e; box-shadow: 0 0 6px rgba(255,178,62,.6); }
.nx-s3 .nx-s3-docbar i:nth-child(3), .nx-s3 .nx-s3-bar i:nth-child(3){ background:#45d472; box-shadow: 0 0 6px rgba(69,212,114,.6); }
.nx-s3 .nx-s3-docbody{ padding: 1.15em 1.4em; }
.nx-s3 .nx-s3-doctitle{ display:block; font-weight:500; font-size:1.3em; color:#d6c2ff; text-shadow: 0 0 12px rgba(190,150,255,.45); letter-spacing:.005em; }
.nx-s3 .nx-s3-docline{ margin: .9em 0 0; min-height:1.5em; display:flex; align-items:center; font-size:1.08em; color:#efeaff; white-space:nowrap; }
.nx-s3 .nx-s3-caret{ display:inline-block; width:.11em; height:1.45em; margin-left:.06em; background:#efeaff; box-shadow: 0 0 8px rgba(210,200,255,.8); }

/* the tabs: position → 3D tilt (desktop) → card (pops/crowds) */
.nx-s3 .nx-s3-tabs{ position:absolute; inset:0; z-index:4; transform-style: preserve-3d; }
.nx-s3 .nx-s3-tab{ position:absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); --ry: 14deg;
  transform: translate(-50%, -50%) rotateY(var(--ry)) rotateX(4deg) rotate(calc(var(--r) * 1deg)); }
.nx-s3 .nx-s3-tab.is-r{ --ry: -14deg; }
.nx-s3 .nx-s3-card{ display:block; font-size:.92em; border-radius:.72em; color:#f3eeff;
  background: linear-gradient(172deg, rgba(84,74,170,.72), rgba(30,28,84,.86) 50%, rgba(40,26,86,.86));
  border:1.5px solid rgba(214,160,255,.62);
  box-shadow: 0 0 1.4em -.2em rgba(230,64,160,.85), 0 0 .35em rgba(255,110,200,.4), 0 1.2em 2em -1em rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .9s cubic-bezier(.2,.9,.3,1.12), opacity .45s ease; }
.nx-s3 .nx-s3-tab.is-blue .nx-s3-card{ border-color: rgba(130,170,255,.85); box-shadow: 0 0 1.4em -.2em rgba(80,130,255,.85), 0 0 .3em rgba(120,170,255,.4), 0 1.2em 2em -1em rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.2); }
.nx-s3 .nx-s3-bar{ display:flex; gap:.36em; padding:.62em .8em .55em; border-bottom:1px solid rgba(210,200,255,.18); background: rgba(255,255,255,.04); border-radius:.72em .72em 0 0; }
.nx-s3 .nx-s3-bar i{ width:.5em; height:.5em; }
.nx-s3 .nx-s3-body{ display:flex; align-items:center; gap:.7em; padding:.8em 1.15em .95em .9em; font-weight:600; font-size:1.07em; line-height:1.1; white-space:nowrap; letter-spacing:-.01em; text-shadow: 0 0 10px rgba(255,255,255,.25); }
.nx-s3 .nx-s3-body svg{ flex:none; width:2.05em; height:2.05em; }
.nx-s3 .nx-s3-body svg.is-fire path{ fill:#ff6a2b; filter: drop-shadow(0 0 4px rgba(255,120,40,.8)); }
.nx-s3 .nx-s3-body svg.is-fire path.in{ fill:#ffc04a; filter:none; }
.nx-s3 .nx-s3-body svg.is-bulb path{ fill:#e4ecff; filter: drop-shadow(0 0 5px rgba(160,190,255,.9)); }
.nx-s3 .nx-s3-body svg.is-line{ fill:none; stroke:#c6c3ff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nx-s3 .nx-s3-body svg.is-bars rect{ fill:#b9b6ff; }
.nx-s3 .nx-s3-body svg.is-q circle{ fill:#7d5cff; filter: drop-shadow(0 0 4px rgba(125,92,255,.8)); }
.nx-s3 .nx-s3-body svg.is-q path.in{ fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.nx-s3 .nx-s3-body svg.is-q circle.dot{ fill:#fff; filter:none; }
.nx-s3 .nx-s3-body svg.is-users circle, .nx-s3 .nx-s3-body svg.is-users path{ fill:#c2bfff; }
.nx-s3 .nx-s3-body svg.is-chat path{ fill:#6f9cff; filter: drop-shadow(0 0 5px rgba(100,150,255,.8)); }

/* ---------- the loop (driven by s3.js; without .is-playing everything rests in the finished scene) ---------- */
.nx-s3.is-playing .nx-s3-tab:not(.is-in) .nx-s3-card{ opacity:0; transform: translate(calc((var(--x) - 50) * .2em), calc((var(--y) - 47) * .2em)) scale(.55); }
.nx-s3.is-playing .nx-s3-ghost:not(.is-in){ opacity:0; scale:.6; }
.nx-s3.is-storm .nx-s3-tab.is-in .nx-s3-card{ transform: translate(calc((var(--x) - 50) * -.06em), calc((var(--y) - 47) * -.06em)) scale(.96); }
.nx-s3.is-storm .nx-s3-flare{ opacity:1; }
.nx-s3.is-storm .nx-s3-doc{ box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 0 0 90px -10px rgba(255,50,80,.75), 0 0 140px -30px rgba(224,64,154,.6); }
@media (prefers-reduced-motion: no-preference){
  .nx-s3.is-playing .nx-s3-tab{ animation: nx-s3-drift var(--nx-s3-d, 5.2s) ease-in-out infinite alternate; }
  .nx-s3.is-playing .nx-s3-tab:nth-child(2n){ --nx-s3-d: 6.4s; animation-direction: alternate-reverse; }
  .nx-s3.is-playing .nx-s3-tab:nth-child(3n){ --nx-s3-d: 4.6s; animation-delay: -1.8s; }
  .nx-s3.is-playing .nx-s3-swirl ellipse{ animation: nx-s3-orbit 7s linear infinite; }
  .nx-s3.is-playing .nx-s3-swirl .r2, .nx-s3.is-playing .nx-s3-swirl .r4, .nx-s3.is-playing .nx-s3-swirl .r6{ animation-duration: 9.5s; animation-direction: reverse; }
  .nx-s3.is-playing .nx-s3-glow{ animation: nx-s3-pulse 2.6s ease-in-out infinite; }
  .nx-s3.is-storm .nx-s3-flare{ animation: nx-s3-pulse .7s ease-in-out infinite; }
  .nx-s3.is-storm .nx-s3-tab.is-in .nx-s3-card{ animation: nx-s3-shake .26s ease-in-out infinite alternate; }
  .nx-s3.is-storm .nx-s3-tab:nth-child(2n).is-in .nx-s3-card{ animation-delay: -.13s; }
  .nx-s3.is-playing .nx-s3-caret{ animation: nx-s3-blink 1.05s steps(1) infinite; }
  .nx-s3.is-playing .nx-s3-doc.is-typing .nx-s3-caret{ animation: none; }
}
@keyframes nx-s3-drift{ 0%{ translate: 0 0; } 50%{ translate: .45em -.35em; } 100%{ translate: -.35em .3em; } }
@keyframes nx-s3-orbit{ to{ stroke-dashoffset: -2000; } }
@keyframes nx-s3-pulse{ 0%, 100%{ scale: 1; } 50%{ scale: 1.045; } }
@keyframes nx-s3-shake{ from{ rotate: -1.4deg; } to{ rotate: 1.4deg; } }
@keyframes nx-s3-blink{ 0%{ opacity:1; } 50%{ opacity:0; } }

/* ---------- smaller screens: no 3D, stacked under the copy ---------- */
@media (max-width: 1080px){
  .nx-s3 .nx-s3-visual{ margin-left:0; max-width: 900px; margin-inline:auto; width:100%; }
  .nx-s3 .nx-s3-stage{ perspective:none; }
  .nx-s3 .nx-s3-tabs{ transform-style: flat; }
  .nx-s3 .nx-s3-tab{ transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg)); }
  .nx-s3 .nx-s3-doc{ transform: rotate(3deg); }
}
@media (max-width: 640px){
  .nx-s3 .nx-h2{ font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .nx-s3 .nx-s3-stage{ aspect-ratio: 358 / 600; font-size: 12px; margin-top: 12px; }
  .nx-s3 .nx-s3-tab{ left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); transform: translate(-50%, -50%) rotate(calc(var(--mr) * 1deg)); }
  .nx-s3 .nx-s3-card{ font-size:1em; }
  .nx-s3 .nx-s3-body{ padding: .7em .9em .75em .75em; gap:.55em; }
  .nx-s3 .nx-s3-doc{ left:21%; top:37%; width:58%; height:29%; font-size:13px; }
  .nx-s3 .nx-s3-prop.is-tripod{ left:-1%; top:41%; width:19%; }
  .nx-s3 .nx-s3-prop.is-ring{ display:none; }
  .nx-s3 .nx-s3-prop.is-clapper{ left:80%; top:55%; width:20%; }
  .nx-s3 .nx-s3-ghost{ width: calc(var(--w) * 1.7%); }
  .nx-s3 .nx-s3-ghost:nth-child(2n){ display:none; }
  .nx-s3 .nx-s3-glow{ inset: 2% -8%; }
}