/* S7 — "Step 3 · Three shorts" (mock S7A). Copy top-left, three neon 9:16 shorts to its right, and a full-width
   waveform timeline of the ten-minute session underneath; each magenta "keeper" is wired up to the short it became.
   Resting state = the finished scene. While .is-playing (s7.js) a playhead sweeps the timeline, bars light behind it,
   and each keeper it enters glows, draws its wire upward and pops its short in with the caption word by word. */

/* ---------- layout: copy | shorts on row 1, the timeline across both columns on row 2 ---------- */
.nx-s7 .nx-s7-grid{ display:grid; grid-template-columns: minmax(380px, .655fr) minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: clamp(24px, 2.6vw, 40px); row-gap: clamp(48px, 6.4vh, 64px); align-items:center; }
.nx-s7 .nx-copy-block{ grid-area: 1 / 1; position:relative; z-index:3; align-self:center; }
.nx-s7 .nx-h2 .nx-line{ text-wrap: wrap; }
.nx-s7 .nx-h2 .nx-grad{ font-size:.87em; letter-spacing: -.02em; padding-right:.04em; }
@media (min-width: 1081px){ .nx-s7{ padding-bottom: clamp(48px, 12vh, 132px); } }
@media (min-width: 1081px){
  /* the one-line gradient headline is ~8.6em wide: cap it to the copy column (+ part of the gap) so it never runs into short 1 */
  .nx-s7 .nx-copy-block{ container-type: inline-size; }
  .nx-s7 .nx-h2 .nx-grad{ white-space: nowrap; font-size: min(.87em, calc(11.6cqi + 2px)); }
}
.nx-s7 .nx-lede{ max-width: 26em; }
.nx-s7 .nx-s7-visual{ grid-area: 1 / 1 / 3 / 3; display:grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items:center; pointer-events:none; z-index:1; }
.nx-s7 .nx-s7-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- the three shorts ---------- */
.nx-s7 .nx-s7-shorts{ grid-area: 1 / 2; position:relative; z-index:3; display:flex; align-items:flex-end; gap: clamp(14px, 2.5vw, 38px); padding-right: clamp(0px, 1vw, 16px); }
.nx-s7 .nx-s7-short{ position:relative; flex: 1 1 0; min-width:0; transform: perspective(1100px) rotateY(-11deg); transform-origin: 50% 50%; }
.nx-s7 .nx-s7-card{ --nx-r: 20px; --nx-neon-w: 3.5px; margin:0; aspect-ratio: 9 / 16.4; container-type: inline-size; background:#101022;
  transition: transform .55s cubic-bezier(.2,.9,.3,1.25), opacity .4s ease; }
.nx-s7 .nx-s7-card::before{ filter: brightness(1.2) saturate(1.7); }
.nx-s7 .nx-s7-card::after{ filter: blur(9px) brightness(1.6) saturate(1.8); inset:-4px; opacity:.95; }
.nx-s7 .s1 .nx-s7-card{ --nx-neon: linear-gradient(165deg, #3fd6ff 0%, #3aa0ff 35%, #7a5cff 72%, #e04cff 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 6px 1px rgba(63,214,255,.9), 0 0 24px 5px rgba(58,160,255,.6), 0 0 70px 8px rgba(122,92,255,.4); }
.nx-s7 .s2 .nx-s7-card{ --nx-neon: linear-gradient(165deg, #3f7bff 0%, #8a4dff 40%, #c34cff 72%, #ff3fb0 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 6px 1px rgba(160,80,255,.9), 0 0 24px 5px rgba(150,77,255,.6), 0 0 70px 8px rgba(224,64,154,.38); }
.nx-s7 .s3 .nx-s7-card{ --nx-neon: linear-gradient(165deg, #7a4dff 0%, #b84cff 35%, #ff3fb0 70%, #ff5fd0 100%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 6px 1px rgba(255,63,176,.9), 0 0 24px 5px rgba(200,70,255,.6), 0 0 70px 8px rgba(255,63,176,.4); }

/* the contractor (the hero photo, cropped per short) */
.nx-s7 .nx-s7-media{ position:absolute; inset:3px; z-index:0; border-radius:17px; overflow:hidden; background:#1b1a22; }
.nx-s7 .nx-s7-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 42% 30%; display:block;
  transform-origin: 43% 31%; transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--s, 1) * var(--flip, 1)), var(--s, 1)); }
.nx-s7 .nx-s7-media img{ filter: brightness(.72) saturate(.95) contrast(1.12) hue-rotate(-10deg); }
.nx-s7 .nx-s7-media::after{ content:''; position:absolute; inset:0; background:
  radial-gradient(120% 80% at 55% 38%, transparent 38%, rgba(10,8,40,.62) 100%), linear-gradient(0deg, rgba(40,30,120,.16), rgba(40,30,120,.16)),
  linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 22%, transparent 46%, rgba(0,0,0,.6) 100%); }
.nx-s7 .s1 .nx-s7-media img{ --s: 1.72; --tx: 10%; --ty: 9%; }
.nx-s7 .s2 .nx-s7-media img{ --s: 1.6; --flip: -1; --tx: 4%; --ty: 8%; }
.nx-s7 .s3 .nx-s7-media img{ --s: 1.95; --tx: 1%; --ty: 13%; }

/* "Ready to post" + where it's going */
.nx-s7 .nx-s7-ready{ position:absolute; top:4.2%; left:6%; right:5%; z-index:2; display:flex; align-items:center; gap: 1.7cqw;
  padding: 2cqw 2.4cqw; border-radius: 12px; background: rgba(12,14,36,.74); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color:#fff; font-size: max(12px, 5.3cqw); font-weight:500; line-height:1; white-space:nowrap;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.2); }
.nx-s7 .nx-s7-ready svg{ flex:none; width: 9.4cqw; height: 9.4cqw; }
.nx-s7 .nx-s7-ready .ok{ width: 7cqw; height: 7cqw; }
.nx-s7 .nx-s7-ready .t{ margin-right:auto; }

/* burned-in caption, Anton, the punch word in yellow */
.nx-s7 .nx-s7-cap{ position:absolute; left:7%; right:5%; bottom:15%; z-index:2; margin:0; font-family: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif; font-weight:400;
  text-transform:uppercase; line-height:1.02; letter-spacing:.005em; color:#fff; font-size:15cqw; transform: rotate(-4deg); transform-origin: 0 100%;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 4px 16px rgba(0,0,0,.65); }
.nx-s7 .s2 .nx-s7-cap{ font-size:13.2cqw; }
.nx-s7 .s3 .nx-s7-cap{ font-size:15.4cqw; bottom:19%; }
.nx-s7 .nx-s7-cap .ln{ display:block; }
.nx-s7 .nx-s7-cap .w{ display:inline-block; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.3); }
.nx-s7 .nx-s7-cap b{ color:#ffe234; font-weight:inherit; }

.nx-s7 .nx-s7-dur{ position:absolute; left:6%; bottom:3.6%; z-index:2; font-size: clamp(12px, 7.2cqw, 20px); font-weight:500; color:#fff; line-height:1;
  padding: 2.4cqw 3.4cqw; border-radius: 9px; background: rgba(8,10,24,.72); border:1px solid rgba(255,255,255,.2); font-variant-numeric: tabular-nums; }

/* a narrow short has no room for the words: the check and the three platforms carry "ready to post" */
@container (max-width: 205px){
  .nx-s7 .nx-s7-ready{ top:4%; left:5%; right:5%; padding: 3cqw 4cqw; gap: 3cqw; border-radius:8px; justify-content:space-between; }
  .nx-s7 .nx-s7-ready .t{ display:none; }
  .nx-s7 .nx-s7-ready svg{ width: 12cqw; height: 12cqw; }
  .nx-s7 .nx-s7-ready .ok{ width: 11cqw; height: 11cqw; }
}

/* the dot each wire hangs from */
.nx-s7 .nx-s7-pin{ position:absolute; left:50%; bottom:-5px; z-index:4; width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:#ff7ae0; box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 0 12px 2px rgba(224,64,154,.9); transition: opacity .3s ease, transform .3s ease; }

/* ---------- wires from each keeper up to its short (paths laid out by s7.js) ---------- */
.nx-s7 .nx-s7-wires{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:2; pointer-events:none; }
.nx-s7 .nx-s7-wire{ fill:none; stroke:#ff8af2; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; filter: drop-shadow(0 0 3px rgba(255,80,230,.95)) drop-shadow(0 0 8px rgba(224,64,154,.7)); }

/* ---------- the session timeline ---------- */
.nx-s7 .nx-s7-timeline{ grid-area: 2 / 1 / 3 / 3; z-index:1; --nx-r: 24px; --nx-neon-w: 3px;
  --nx-neon: linear-gradient(90deg, #3fd6ff 0%, #3a8cff 28%, #8a4dff 60%, #ff3fc8 100%);
  display:grid; grid-template-columns: auto minmax(0, 1fr); align-items:center; column-gap: clamp(18px, 2.2vw, 34px);
  padding: 36px 30px 10px 24px; background: rgba(10,11,34,.74);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), 0 0 6px 1px rgba(90,150,255,.8), 0 0 26px 5px rgba(100,110,255,.5), 0 26px 80px 0 rgba(160,70,255,.4); }
.nx-s7 .nx-s7-timeline::before{ filter: brightness(1.2) saturate(1.7); }
.nx-s7 .nx-s7-timeline::after{ filter: blur(10px) brightness(1.6) saturate(1.8); }
.nx-s7 .nx-s7-who{ display:flex; align-items:center; gap:18px; margin-top:-22px; }
.nx-s7 .nx-s7-remy{ position:relative; flex:none; width:68px; height:68px; }
.nx-s7 .nx-s7-remy img{ position:absolute; inset:0; width:100%; height:100%; transition: opacity .25s ease; }
.nx-s7 .nx-s7-remy .got{ opacity:0; }
.nx-s7 .nx-s7-name{ display:flex; flex-direction:column; gap:4px; font-size:1.25rem; line-height:1.15; }
.nx-s7 .nx-s7-name b{ font-weight:500; color:#fff; }
.nx-s7 .nx-s7-clock{ color: var(--nx-ink-dim); font-variant-numeric: tabular-nums; min-width: 3.2em; }

.nx-s7 .nx-s7-track{ position:relative; min-width:0; }
.nx-s7 .nx-s7-wave{ position:relative; height:74px; }
.nx-s7 .nx-s7-wave svg{ position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; }
.nx-s7 .nx-s7-wave path{ fill:none; stroke-width:1.55; stroke-linecap:round; }
.nx-s7 .nx-s7-wave .dim .mid{ stroke: rgba(63,200,255,.35); stroke-width:.5; }
.nx-s7 .nx-s7-wave .dim .n{ stroke: rgba(110,130,255,.34); }
.nx-s7 .nx-s7-wave .dim .k{ stroke: rgba(255,79,216,.34); }
.nx-s7 .nx-s7-wave .lit{ filter: drop-shadow(0 0 1.5px rgba(47,200,255,.95)) drop-shadow(0 0 5px rgba(47,139,255,.6)); }
.nx-s7 .nx-s7-wave .lit .n{ stroke: url(#nx-s7-wg); }
.nx-s7 .nx-s7-wave .litk{ filter: drop-shadow(0 0 1.5px rgba(255,80,230,.95)) drop-shadow(0 0 6px rgba(224,64,154,.7)); }
.nx-s7 .nx-s7-wave .lit .k{ stroke:#ff6cf2; stroke-width:1.8; }

.nx-s7 .nx-s7-keep{ position:absolute; z-index:0; top:-3px; bottom:-3px; border:2px solid #ff5ee0; border-radius:8px; background: rgba(224,64,154,.18);
  box-shadow: 0 0 20px 0 rgba(224,64,154,.85), inset 0 0 22px -4px rgba(255,94,224,.75); transition: border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.nx-s7 .nx-s7-keep .tag{ position:absolute; left:50%; bottom: calc(100% + 1px); transform: translateX(-50%); white-space:nowrap; font-size:.88rem; line-height:1; color:#ffe1f6;
  padding: 5px 14px 6px; border-radius:8px; border:1.5px solid #ff5ee0; background: rgba(38,12,52,.94); box-shadow: 0 0 14px -3px rgba(224,64,154,.9);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.nx-s7 .nx-s7-keep .tag::after{ content:''; position:absolute; left:50%; top:-4px; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:#ff8af2; box-shadow: 0 0 8px 1px rgba(255,80,230,.95); }

/* the playhead (hidden in the finished scene) */
.nx-s7 .nx-s7-head{ position:absolute; z-index:2; top:-12px; bottom:-8px; left:0; right:0; pointer-events:none; opacity:0; transition: opacity .3s ease; }
.nx-s7.is-playing .nx-s7-head{ transform: translateX(calc(var(--p, 1) * 100%)); }
.nx-s7 .nx-s7-head i{ position:absolute; left:-1px; top:0; bottom:0; width:2px; border-radius:2px; background:#fff; box-shadow: 0 0 10px 1px rgba(63,214,255,.95), 0 0 2px #fff; }
.nx-s7 .nx-s7-head i::before{ content:''; position:absolute; left:50%; top:-4px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fff; box-shadow: 0 0 12px 2px rgba(63,214,255,.95); }

.nx-s7 .nx-s7-ticks{ position:relative; height:26px; margin-top:6px; }
.nx-s7 .nx-s7-ticks span{ position:absolute; top:8px; transform: translateX(-50%); font-size:.8rem; line-height:1; color: var(--nx-ink-dim); font-variant-numeric: tabular-nums; white-space:nowrap; }
.nx-s7 .nx-s7-ticks span::before{ content:''; position:absolute; left:50%; top:-8px; width:1px; height:5px; background: rgba(200,210,255,.4); }
.nx-s7 .nx-s7-visual .nx-floor-glow{ grid-area: 2 / 1 / 3 / 3; position:absolute; left:0; right:0; bottom:-120px; height:170px; opacity:1;
  background: radial-gradient(50% 42% at 26% 38%, rgba(63,160,255,.42), transparent 72%), radial-gradient(50% 42% at 74% 38%, rgba(200,70,255,.45), transparent 72%),
    radial-gradient(60% 30% at 50% 30%, rgba(120,90,255,.22), transparent 80%); }

/* ---------- the animation (s7.js adds/removes these; no classes = the finished scene) ---------- */
.nx-s7.is-playing .nx-s7-short:not(.is-in) .nx-s7-card{ opacity:.07; transform: translateY(22px) scale(.92); }
.nx-s7.is-playing .nx-s7-short:not(.is-in) .nx-s7-pin{ opacity:0; transform: scale(.3); }
.nx-s7.is-playing .nx-s7-cap .w:not(.is-in){ opacity:0; transform: translateY(.22em) scale(.9); }
.nx-s7.is-playing .nx-s7-ready:not(.is-in){ opacity:0; transform: translateY(-8px); }
.nx-s7.is-playing .nx-s7-keep:not(.is-hot){ border-color: rgba(255,94,224,.22); background: transparent; box-shadow:none; }
.nx-s7.is-playing .nx-s7-keep:not(.is-hot) .tag{ opacity:0; transform: translate(-50%, 6px) scale(.85); }
.nx-s7.is-playing .nx-s7-wire{ stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset .35s ease; }
.nx-s7.is-playing .nx-s7-wire.is-in{ stroke-dashoffset:0; transition: stroke-dashoffset .6s cubic-bezier(.6,.1,.3,1); }
.nx-s7.is-playing .nx-s7-wave .lit{ clip-path: inset(-20px calc(100% - var(--p, 1) * 100%) -20px -20px); }
.nx-s7.is-sweeping .nx-s7-head{ opacity:1; }
.nx-s7 .nx-s7-who.is-got .got{ opacity:1; }
.nx-s7 .nx-s7-who.is-got .talk{ opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .nx-s7.is-playing .nx-s7-media img{ animation: nx-s7-drift 9s ease-in-out infinite alternate; }
  .nx-s7.is-playing .nx-s7-keep.is-hot{ animation: nx-s7-flash .9s ease-out 1; }
}
@keyframes nx-s7-drift{ to{ transform: translate(var(--tx, 0), calc(var(--ty, 0) - 2%)) scale(calc(var(--s, 1) * var(--flip, 1) * 1.05), calc(var(--s, 1) * 1.05)); } }
@keyframes nx-s7-flash{ 0%{ box-shadow: 0 0 34px 6px rgba(255,94,224,.95), inset 0 0 26px -2px rgba(255,94,224,.9); background: rgba(224,64,154,.32); } }

/* ---------- tablet and below: stacked, flat (no tilt) ---------- */
@media (max-width: 1080px){
  .nx-s7 .nx-s7-grid{ grid-template-columns: minmax(0, 1fr); grid-template-rows:none; row-gap:0; }
  .nx-s7 .nx-copy-block{ grid-area:auto; max-width: 640px; }
  .nx-s7 .nx-s7-visual{ grid-area:auto; display:flex; flex-direction:column; align-items:stretch; gap: 52px; margin-top: 40px; }
  .nx-s7 .nx-s7-shorts{ width:100%; max-width: 780px; margin: 0 auto; padding-right:0; }
  .nx-s7 .nx-s7-short{ transform:none; }
  .nx-s7 .nx-s7-visual .nx-floor-glow{ bottom:-50px; }
}
@media (max-width: 640px){
  .nx-s7 .nx-s7-visual{ gap: 46px; margin-top: 32px; }
  .nx-s7 .nx-s7-shorts{ gap: 9px; }
  .nx-s7 .nx-s7-card{ --nx-r: 14px; --nx-neon-w: 2.5px; }
  .nx-s7 .nx-s7-media{ inset:2.5px; border-radius:11.5px; }
  .nx-s7 .nx-s7-dur{ border-radius:6px; padding: 3px 5px; }
  .nx-s7 .nx-s7-cap{ text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 3px 10px rgba(0,0,0,.7); }
  .nx-s7 .nx-s7-timeline{ --nx-r: 18px; grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 34px 16px 14px; }
  .nx-s7 .nx-s7-who{ order:2; margin-top:0; gap:10px; }
  .nx-s7 .nx-s7-track{ order:1; }
  .nx-s7 .nx-s7-remy{ width:40px; height:40px; }
  .nx-s7 .nx-s7-name{ flex-direction:row; gap:10px; font-size:1rem; }
  .nx-s7 .nx-s7-wave{ height:54px; }
  .nx-s7 .nx-s7-wave path{ stroke-width:2.6; }
  .nx-s7 .nx-s7-keep .tag{ font-size:12px; padding: 3px 7px 4px; border-radius:6px; }
  .nx-s7 .nx-s7-ticks span{ font-size:12px; }
  .nx-s7 .nx-s7-ticks .odd{ display:none; }
  .nx-s7 .nx-s7-ticks .start{ transform:none; }
  .nx-s7 .nx-s7-ticks .start::before{ left:0; }
  .nx-s7 .nx-s7-ticks .end{ transform: translateX(-100%); }
  .nx-s7 .nx-s7-ticks .end::before{ left:auto; right:0; }
}