/* Slide 6 — "Step 2 · Just talk". A tilted neon stage: over the shoulder of a contractor talking to Remy on his laptop
   while a phone films him from the side; a glass chat floats over the dark right of the room.
   Resting state = the finished scene (Remy's question, the spoken reply with its waveform and 00:12, "That's the one").
   s6.js replays it: the question types out → the reply's waveform talks while the clock ticks → the pick pops in. */

.nx-s6 .nx-s6-eyebrow{ color: var(--nx-rec); font-weight:500; font-size:.95rem; letter-spacing:.42em; }
.nx-s6 .nx-h2{ text-wrap: wrap; }
.nx-s6 .nx-s6-nowrap{ white-space:nowrap; }

/* ---------- the stage ---------- */
.nx-s6 .nx-s6-wrap{ position:relative; perspective: 1500px; margin-right: clamp(0px, .6vw, 10px); }
.nx-s6 .nx-s6-stage{ --nx-r: 26px; --nx-neon-w: 5px; padding: 5px; container-type: inline-size;
  /* the mock's rim: cyan down the left, blue-violet across the top, hot magenta down the right and along the floor */
  --nx-neon: conic-gradient(from 0deg, #9a4dff 0deg, #4f74ff 48deg, #6a55ff 78deg, #c43cff 108deg, #ff3fc8 140deg, #f23cff 172deg, #7a4dff 208deg, #2f86ff 236deg, #36b8ff 268deg, #3fd6ff 305deg, #4f86ff 332deg, #9a4dff 360deg);
  transform: rotateY(-19deg) rotateX(2deg) rotateZ(-1.4deg); transform-origin: 16% 50%; z-index:1;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.85), -30px -10px 110px -30px rgba(63,150,255,.75), 40px 20px 150px -30px rgba(224,64,154,.7); }
.nx-s6 .nx-s6-stage::before{ padding:5px; filter: brightness(1.45) saturate(1.7); z-index:3; }
/* the bloom: an unmasked copy of the gradient blurred behind the photo (a masked blur never leaves its ring) */
.nx-s6 .nx-s6-stage::after{ inset:-6px; padding:0; -webkit-mask:none; mask:none; filter: blur(16px) brightness(1.2) saturate(1.7); opacity:.9; z-index:0; }
.nx-s6 .nx-s6-scene{ position:relative; aspect-ratio: 1400 / 933; border-radius: 22px; overflow:hidden; background:#0d0e22; }
.nx-s6 .nx-s6-photo{ display:block; width:100%; height:100%; object-fit:cover; }
/* the right of the room sinks into the night so the chat reads */
.nx-s6 .nx-s6-scene::after{ content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 28px -6px rgba(110,140,255,.75), inset 0 0 8px -2px rgba(160,120,255,.6);
  background:
    linear-gradient(90deg, transparent 53%, rgba(10,11,38,.55) 64%, rgba(10,11,38,.86) 78%, rgba(10,11,38,.94) 100%),
    radial-gradient(120% 90% at 40% 40%, transparent 55%, rgba(6,7,24,.55) 100%); }

/* the phone's field of view, drawn in the photo's own coordinates */
.nx-s6 .nx-s6-cone{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; mix-blend-mode: screen; }
.nx-s6 .nx-s6-cone-beam{ filter: blur(3px); }
.nx-s6 .nx-s6-cone-edge{ fill:none; stroke: rgba(210,236,255,.55); stroke-width:1.8; }
.nx-s6 .nx-floor-glow{ bottom:-120px; height:190px; left:0; right:-4%; opacity:1; background:
    radial-gradient(40% 50% at 70% 35%, rgba(230,70,220,.7), transparent 75%),
    radial-gradient(45% 50% at 25% 30%, rgba(63,150,255,.55), transparent 75%),
    radial-gradient(55% 50% at 50% 40%, rgba(150,92,255,.6), transparent 80%); filter: blur(26px); }

/* Remy on the laptop screen */
.nx-s6 .nx-s6-screen{ position:absolute; z-index:1; left:39.4%; top:24.2%; width:8.6%; transform: translate(-50%, -59%); }
.nx-s6 .nx-s6-screen::before{ content:''; position:absolute; inset:-30% -60%; border-radius:50%; pointer-events:none;
  background: radial-gradient(closest-side, rgba(125,110,255,.42), rgba(224,64,154,.14) 60%, transparent); }
.nx-s6 .nx-s6-screen .nx-remy-img{ position:relative; }

/* ---------- the chat ---------- */
.nx-s6 .nx-s6-chat{ position:absolute; z-index:2; left:55%; right:2.8%; top:12.5%; display:flex; flex-direction:column; gap: 3.2cqw; }
.nx-s6 .nx-s6-row{ display:grid; grid-template-columns: 6.6cqw minmax(0, 1fr); grid-template-areas: ". who" "av bub"; column-gap: 1.8cqw; row-gap: .7cqw; align-items:center; }
.nx-s6 .nx-s6-who{ grid-area: who; font-size: max(12px, 1.45cqw); color: var(--nx-ink-dim); padding-left: .4cqw; }
.nx-s6 .nx-s6-av{ grid-area: av; position:relative; display:block; width:6.6cqw; aspect-ratio:1; }
.nx-s6 .nx-s6-av.is-remy{ align-self:start; margin-top: -.6cqw; }
.nx-s6 .nx-s6-av.is-remy img{ width:100%; height:auto; transform: scale(1.3) translateY(-8%); }
.nx-s6 .nx-s6-av.is-you{ border-radius:50%; padding:2px; background: linear-gradient(135deg, var(--nx-cyan), var(--nx-violet)); box-shadow: 0 0 16px -2px rgba(93,123,255,.8); }
.nx-s6 .nx-s6-av.is-you img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.nx-s6 .nx-s6-bubble{ grid-area: bub; margin:0; }

.nx-s6 .nx-s6-q{ position:relative; font-size: max(12px, 1.95cqw); line-height:1.45; color: var(--nx-ink);
  padding: 1.5cqw 2.1cqw; border-radius: 1.8cqw; background: linear-gradient(180deg, rgba(46,50,110,.62), rgba(26,28,70,.66));
  border:1px solid rgba(170,180,255,.34); box-shadow: 0 18px 40px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nx-s6 .nx-s6-typed{ position:absolute; inset: 1.5cqw 2.1cqw; }

.nx-s6 .nx-s6-reply{ display:flex; align-items:center; gap: 1.6cqw; height: 9.4cqw; padding: 0 2.2cqw 0 2cqw; border-radius: 2cqw;
  background: linear-gradient(90deg, rgba(30,40,110,.62), rgba(44,30,110,.62)); border: 1.5px solid rgba(110,140,255,.95);
  border-color: rgba(120,150,255,1); box-shadow: 0 0 10px -2px rgba(93,123,255,.95), 0 0 34px -6px rgba(93,123,255,.85), 0 0 50px -14px rgba(155,92,255,.85), inset 0 0 20px -8px rgba(63,214,255,.75);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nx-s6 .nx-s6-wave{ flex:1; display:flex; align-items:center; gap: .42cqw; height: 62%; min-width:0; }
.nx-s6 .nx-s6-wave i{ flex:1; max-width: 5px; height: calc(var(--h) * 100%); min-height:3px; border-radius:3px;
  background: linear-gradient(180deg, var(--nx-cyan), #7a6bff 55%, var(--nx-magenta)); box-shadow: 0 0 6px rgba(93,123,255,.7);
  transition: transform .35s ease; }
.nx-s6 .nx-s6-time{ font-size: max(12px, 2.05cqw); color: var(--nx-ink); font-variant-numeric: tabular-nums; }

.nx-s6 .nx-s6-pick{ align-self:flex-start; margin-left: 8.4cqw; display:inline-flex; align-items:center; gap: 1.5cqw; font-size: max(12px, 2cqw); font-weight:500; color:#eafff5;
  padding: 1cqw 3cqw 1cqw 1.1cqw; border-radius:999px; border:1.5px solid rgba(62,226,154,.85); background: rgba(18,70,58,.45);
  box-shadow: 0 0 22px -6px rgba(62,226,154,.8), inset 0 0 16px -8px rgba(62,226,154,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nx-s6 .nx-s6-check{ flex:none; display:grid; place-items:center; width: 4.8cqw; aspect-ratio:1; border-radius:50%;
  border:2px solid #3ee29a; background: rgba(20,90,64,.55); box-shadow: 0 0 14px rgba(62,226,154,.75), inset 0 0 10px rgba(62,226,154,.45); }
.nx-s6 .nx-s6-check svg{ width:62%; height:62%; fill:none; stroke:#8dffc8; filter: drop-shadow(0 0 3px rgba(62,226,154,.9)); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.nx-s6 .nx-s6-check path{ stroke-dasharray: 20; stroke-dashoffset: 0; }

/* ---------- the loop (s6.js toggles these; without them the scene is finished) ---------- */
.nx-s6.is-playing .nx-s6-ghost{ visibility:hidden; }
.nx-s6 .nx-s6-row.is-you, .nx-s6 .nx-s6-pick{ transition: opacity .45s ease, transform .5s cubic-bezier(.2,.9,.3,1.25); }
.nx-s6.is-playing:not(.is-reply) .nx-s6-row.is-you{ opacity:0; transform: translateY(12px); }
.nx-s6.is-playing:not(.is-picked) .nx-s6-pick{ opacity:0; transform: scale(.7); }
.nx-s6.is-playing:not(.is-picked) .nx-s6-check path{ stroke-dashoffset: 20; }
.nx-s6.is-playing.is-picked .nx-s6-check path{ transition: stroke-dashoffset .45s ease .2s; }
.nx-s6.is-playing.is-waiting .nx-s6-wave i{ transform: scaleY(.18); }
.nx-s6 .nx-s6-q{ transition: border-color .4s ease, box-shadow .4s ease; }
.nx-s6.is-asking .nx-s6-q{ border-color: rgba(190,200,255,.6); box-shadow: 0 0 26px -8px rgba(125,140,255,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.nx-s6 .nx-s6-cone{ transition: opacity .5s ease; }
.nx-s6.is-playing:not(.is-speaking) .nx-s6-cone{ opacity:.8; }

@media (prefers-reduced-motion: no-preference){
  .nx-s6.is-asking .nx-s6-typed::after{ content:''; display:inline-block; width:2px; height:1.05em; margin-left:2px; vertical-align:-.15em; background: var(--nx-cyan); box-shadow: 0 0 6px var(--nx-cyan); animation: nx-s6-caret .8s steps(1) infinite; }
  .nx-s6.is-playing.is-speaking .nx-s6-wave i{ transition:none; animation: nx-s6-bar .52s ease-in-out infinite alternate; }
  .nx-s6.is-playing.is-speaking .nx-s6-wave i:nth-child(3n){ animation-duration:.38s; animation-delay:-.2s; }
  .nx-s6.is-playing.is-speaking .nx-s6-wave i:nth-child(3n+1){ animation-duration:.61s; animation-delay:-.35s; }
  .nx-s6.is-playing.is-speaking .nx-s6-wave i:nth-child(4n){ animation-duration:.45s; animation-delay:-.1s; }
  .nx-s6.is-playing.is-speaking .nx-s6-wave i:nth-child(5n+2){ animation-duration:.7s; animation-delay:-.5s; }
  .nx-s6.is-playing.is-speaking .nx-s6-cone{ animation: nx-s6-cone 1.1s ease-in-out infinite alternate; }
  .nx-s6.is-playing .nx-s6-screen .nx-remy-img{ animation: nx-s6-bob 2.4s ease-in-out infinite alternate; }
}
@keyframes nx-s6-caret{ 50%{ opacity:0; } }
@keyframes nx-s6-bar{ from{ transform: scaleY(.22); } to{ transform: scaleY(1.08); } }
@keyframes nx-s6-cone{ from{ opacity:.78; } to{ opacity:1; } }
@keyframes nx-s6-bob{ from{ transform: translateY(0); } to{ transform: translateY(-4%); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px){
  .nx-s6 .nx-s6-wrap{ margin-right:0; max-width: 860px; }
  .nx-s6 .nx-s6-stage{ transform:none; }
}
/* phones: the chat drops under the photo so its text stays full size */
@media (max-width: 640px){
  .nx-s6 .nx-s6-stage{ --nx-r: 20px; }
  .nx-s6 .nx-s6-scene{ border-radius: 16px 16px 8px 8px; }
  .nx-s6 .nx-s6-scene::after{ background: radial-gradient(120% 90% at 40% 40%, transparent 55%, rgba(6,7,24,.5) 100%); }
  .nx-s6 .nx-s6-chat{ position:relative; left:auto; right:auto; top:auto; gap:12px; padding: 14px 12px 16px; margin-top:4px; border-radius: 8px 8px 16px 16px;
    background: linear-gradient(180deg, #121338, #0b0c26); }
  .nx-s6 .nx-s6-row{ grid-template-columns: 38px minmax(0, 1fr); column-gap:10px; row-gap:4px; }
  .nx-s6 .nx-s6-who{ font-size:12px; padding-left:2px; }
  .nx-s6 .nx-s6-av{ width:38px; }
  .nx-s6 .nx-s6-av.is-remy{ margin-top:-2px; }
  .nx-s6 .nx-s6-q{ font-size:14px; padding: 10px 13px; border-radius:14px; }
  .nx-s6 .nx-s6-typed{ inset: 10px 13px; }
  .nx-s6 .nx-s6-reply{ height:50px; gap:10px; padding: 0 14px 0 12px; border-radius:14px; }
  .nx-s6 .nx-s6-wave{ gap:2px; }
  .nx-s6 .nx-s6-wave i{ max-width:4px; }
  .nx-s6 .nx-s6-time{ font-size:13px; }
  .nx-s6 .nx-s6-pick{ margin-left:48px; gap:9px; font-size:14px; padding: 6px 16px 6px 6px; }
  .nx-s6 .nx-s6-check{ width:26px; }
}