/* Landing — "Neon night deck" (direction 1B, 9/24). Night-indigo slides; the hero stage animates the product:
   Remy asks → the answer becomes a timestamped transcript → the best line flies into a captioned short.
   Every animated element has a visible resting state (the finished scene), so screenshots, link previews and
   reduced-motion visitors always see the whole story. Tokens here are landing-only; the app keeps app.css. */
:root{
  --nx-night: #0b0c24; --nx-night-2: #121440; --nx-deep: #07081a;
  --nx-ink: #f3efe7; --nx-ink-dim: rgba(243,239,231,.72); --nx-ink-faint: rgba(243,239,231,.46);
  --nx-rec: #ff4b3e; --nx-magenta: #e0409a; --nx-violet: #9b5cff; --nx-cyan: #3fd6ff;
  --nx-glass: rgba(24,26,64,.62); --nx-glass-line: rgba(160,170,255,.18);
  --nx-grad: linear-gradient(95deg, var(--nx-rec) 0%, var(--nx-magenta) 48%, var(--nx-violet) 100%);
  --nx-neon: linear-gradient(135deg, var(--nx-cyan) 0%, #5d7bff 30%, var(--nx-violet) 60%, var(--nx-magenta) 100%);
}

/* ---------- header over the night sky ---------- */
.nx-header{ position:absolute; inset:0 0 auto 0; z-index:20; padding: calc(18px + env(safe-area-inset-top, 0px)) 0 18px; border-bottom:1px solid rgba(160,170,255,.10); }
.nx-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1640px; padding-inline: clamp(16px, 5.7vw, 92px); margin:0 auto; }
.nx-header .brand-lockup{ color: var(--nx-ink); font-size:1.4rem; padding-block:4px; } /* 42px tap target */
.nx-nav{ display:flex; align-items:center; gap:28px; font-size:.95rem; }
.nx-nav a{ color: var(--nx-ink-dim); text-decoration:none; }
.nx-nav a:not(.nx-pill-btn){ padding: 10px 4px; } /* ≥40px tap target; still shorter than the pill, so the header keeps its height */
.nx-nav a:hover{ color: var(--nx-ink); }
.nx-nav .nx-pill-btn{ color: var(--nx-ink); border:1.5px solid var(--nx-rec); border-radius:999px; padding:10px 22px; box-shadow: 0 0 22px -8px var(--nx-rec) inset, 0 0 18px -10px var(--nx-rec); }
.nx-nav .nx-pill-btn:hover{ background: rgba(255,75,62,.12); }

/* ---------- hero slide ---------- */
.nx-hero{ position:relative; overflow:hidden; color: var(--nx-ink); min-height: min(100svh, 1100px); padding: 112px 0 64px; display:flex; align-items:center; } /* the night sky itself is page-level (deck.css) */
/* the hero's own glow fades out before its bottom edge, so it meets slide 2 on one continuous sky (no clipped band) */
.nx-hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 720px at 72% 42%, rgba(98,74,255,.26), transparent 62%),
    radial-gradient(760px 520px at 8% 72%, rgba(255,75,62,.10), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
.nx-floor{ position:absolute; left:-10%; right:-10%; bottom:9%; height:180px; pointer-events:none;
  background: radial-gradient(50% 60% at 62% 0%, rgba(155,92,255,.22), transparent 70%); filter: blur(6px); }
.nx-hero-inner{ position:relative; z-index:2; width:100%; max-width:1640px; margin:0 auto; padding-inline: clamp(16px, 5.7vw, 92px);
  display:grid; grid-template-columns: minmax(340px, 0.45fr) minmax(0, 1fr); gap: clamp(20px, 1.8vw, 32px); align-items:center; }
.nx-copy{ max-width: 460px; }
.nx-title .l1{ white-space: nowrap; }
.nx-pill{ display:inline-flex; align-items:center; gap:10px; font-size:.9rem; color: var(--nx-ink); border:1.5px solid rgba(255,75,62,.7); border-radius:999px; padding:6px 16px; }
.nx-pill .dot{ width:8px; height:8px; border-radius:50%; background: var(--nx-rec); box-shadow: 0 0 10px var(--nx-rec); }
.nx-title{ font-family: var(--font-display); font-weight:400; font-size: clamp(3rem, 4.9vw, 5.3rem); line-height:.98; letter-spacing:-.015em; margin: 26px 0 0; text-wrap: balance; }
.nx-grad{ background: var(--nx-grad); -webkit-background-clip:text; background-clip:text; color: transparent; }
.nx-title .nx-grad{ font-weight:700; letter-spacing:-.005em; } /* same heavier gradient phrase as the deck headlines */
.nx-sub{ margin-top: 26px; font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height:1.6; color: var(--nx-ink-dim); max-width: 30em; }
.nx-ctas{ display:flex; align-items:center; gap:28px; margin-top: 34px; flex-wrap:wrap; }
.nx-ctas .btn-primary{ box-shadow: 0 14px 40px -14px rgba(255,75,62,.75); }
.nx-link{ display:inline-block; padding: 10px 0; color: var(--nx-ink-dim); text-decoration:none; font-size:1.02rem; } /* padding: a ≥40px tap target */
.nx-link:hover{ color: var(--nx-ink); }


/* ---------- the stage ---------- */
.nx-stage-wrap{ perspective: 1500px; margin-right: clamp(0px, 2.4vw, 44px); }
.nx-stage{ position:relative; border-radius: 26px; padding: 20px; transform: rotateY(-20deg) rotateX(5deg) rotateZ(-1.8deg); transform-origin: 22% 50%;
  background: rgba(10,11,34,.84); box-shadow: 0 50px 120px -40px rgba(0,0,0,.85), 0 0 90px -20px rgba(93,123,255,.55), 0 0 140px -30px rgba(224,64,154,.45); }
/* neon frame: a gradient border + its own blurred bloom */
.nx-stage::before, .nx-stage::after{ content:''; position:absolute; inset:0; border-radius: inherit; padding: 5px; background: var(--nx-neon);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; filter: brightness(1.25) saturate(1.2); }
.nx-stage::after{ filter: blur(20px) brightness(1.9) saturate(1.4); opacity:1; inset:-3px; }
.nx-stage-wrap{ position:relative; }
.nx-stage-wrap::after{ content:''; position:absolute; left:6%; right:4%; bottom:-70px; height:90px; pointer-events:none; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(155,92,255,.45), rgba(63,214,255,.12) 55%, transparent 75%); filter: blur(18px); }
.nx-stage-grid{ display:grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: 16px; align-items:stretch; }

.nx-scene{ position:relative; width:100%; min-height:0; border-radius: 16px; overflow:hidden; aspect-ratio: 2 / 3; background:#1b1a22; }
.nx-scene img{ width:100%; height:100%; object-fit:cover; object-position: 38% 40%; display:block; transform-origin: 40% 40%; }
.nx-rec{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  color:#fff; background: rgba(8,8,20,.62); backdrop-filter: blur(6px); border-radius:8px; padding:5px 9px; }
.nx-rec::before{ content:''; width:8px; height:8px; border-radius:50%; background: var(--nx-rec); box-shadow:0 0 8px var(--nx-rec); }

.nx-panel{ position:relative; border-radius:16px; background: linear-gradient(180deg, rgba(34,36,86,.55), rgba(18,19,50,.6)); border:1px solid var(--nx-glass-line); padding: 16px 12px 14px; display:grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr); gap: 10px; min-height:100%; align-items:center; }
.nx-convo{ display:flex; flex-direction:column; gap: 12px; min-width:0; }
.nx-remy{ display:flex; align-items:flex-start; gap:10px; }
.nx-orb{ flex:none; display:block; width:42px; height:42px; margin-top:-4px; filter: drop-shadow(0 0 9px rgba(155,92,255,.6)) drop-shadow(0 0 18px rgba(255,110,90,.2)); } /* Remy (headset mascot); runHero swaps the pose */
.nx-remy small{ display:block; font-size:.7rem; color: var(--nx-ink-faint); margin-bottom:4px; }
.nx-bubble{ font-size:.86rem; line-height:1.35; background: rgba(60,64,130,.55); border:1px solid rgba(160,170,255,.22); border-radius: 4px 14px 14px 14px; padding: 9px 12px; min-height: 2.8em; }
.nx-transcript{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 8px; }
.nx-transcript li{ display:grid; grid-template-columns: 36px 1fr; gap:6px; font-size:.78rem; line-height:1.4; color: var(--nx-ink-dim); padding:7px 9px; border-radius:10px; border:1px solid transparent; transition: opacity .5s ease, border-color .4s ease, background .4s ease, box-shadow .4s ease; }
.nx-transcript li time{ font-family: var(--font-mono); font-size:.72rem; color: var(--nx-ink-faint); padding-top:1px; }
.nx-transcript li.keeper{ color: var(--nx-ink); border-color: rgba(63,214,255,.8); background: rgba(40,110,160,.18); box-shadow: 0 0 22px -6px rgba(63,214,255,.7), inset 0 0 18px -10px rgba(63,214,255,.8); }

.nx-clips{ position:relative; display:flex; gap:7px; align-items:center; justify-content:center; }
.nx-clip{ position:relative; margin:0; flex: 0 0 30%; width:auto; aspect-ratio: 9 / 17.5; border-radius:12px; overflow:hidden; background:#111;
  box-shadow: 0 0 0 2px rgba(63,214,255,.85), 0 0 22px -4px rgba(63,214,255,.8); transition: transform .5s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease, box-shadow .4s ease; }
.nx-clip.c2{ flex-basis: 38%; width:auto; box-shadow: 0 0 0 2px rgba(155,92,255,.95), 0 0 30px -4px rgba(155,92,255,.9); z-index:2; }
.nx-clip.c3{ box-shadow: 0 0 0 2px rgba(224,64,154,.9), 0 0 22px -4px rgba(224,64,154,.8); }
.nx-clip img{ width:100%; height:100%; object-fit:cover; display:block; }
.nx-clip.c1 img{ object-position: 44% 22%; transform: scale(1.9); transform-origin: 44% 24%; }
.nx-clip.c2 img{ object-position: 44% 24%; transform: scale(1.55); transform-origin: 44% 26%; }
.nx-clip.c3 img{ object-position: 40% 26%; transform: scale(2.2); transform-origin: 42% 24%; }
.nx-clip figcaption{ position:absolute; left:6px; right:6px; bottom:22%; font-family: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif; font-weight:700; text-transform:uppercase; text-align:center;
  font-size: clamp(.7rem, .95vw, 1rem); line-height:1.02; color:#fff; text-shadow: 0 2px 0 #000, 0 0 8px rgba(0,0,0,.8); letter-spacing:.01em; }
.nx-clip figcaption b{ color:#ffd84a; font-weight:inherit; }
.nx-clip figcaption span{ display:inline-block; transition: opacity .18s ease, transform .18s ease; }
.nx-clip .dur{ position:absolute; left:6px; bottom:6px; font-family: var(--font-mono); font-size:.62rem; color:#fff; background: rgba(0,0,0,.55); border-radius:5px; padding:1px 5px; }
.nx-flow{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3; }
.nx-flow path{ fill:none; stroke: var(--nx-cyan); stroke-width:2; filter: drop-shadow(0 0 6px var(--nx-cyan)); stroke-linecap:round; }

.nx-steps{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap: 10px; border-radius: 999px; padding: 12px 22px 12px 14px; background: linear-gradient(90deg, rgba(40,42,110,.72), rgba(52,34,110,.72)); border:1px solid rgba(170,180,255,.38); box-shadow: 0 0 26px -10px rgba(123,99,255,.8), inset 0 1px 0 rgba(255,255,255,.06); }
.nx-step{ display:flex; align-items:center; gap:10px; min-width:0; transition: opacity .4s ease; }
.nx-step .ic{ flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background: radial-gradient(circle at 35% 30%, #8a7dff, #4b2fd6); box-shadow: 0 0 20px 0 rgba(123,99,255,.95), inset 0 0 0 1px rgba(255,255,255,.25); }
.nx-step .ic svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nx-step b{ display:block; font-size:1rem; font-weight:600; color:#fff; }
.nx-step small{ display:block; font-size:.78rem; color: var(--nx-ink-dim); white-space:nowrap; }
.nx-arrow{ color: var(--nx-ink-faint); }

/* ---------- the animation (driven by landing.js; resting state = everything shown) ---------- */
.nx-stage.is-playing .nx-transcript li:not(.is-in){ opacity:.14; }
.nx-stage.is-playing .nx-transcript li.keeper:not(.is-hot){ color: var(--nx-ink-dim); border-color: transparent; background: none; box-shadow:none; }
.nx-stage.is-playing .nx-clip:not(.is-in){ opacity:.18; transform: scale(.9); }
.nx-stage.is-playing .nx-clip figcaption span:not(.is-in){ opacity:0; transform: translateY(4px); }
.nx-stage.is-playing .nx-step:not(.is-on){ opacity:.4; }
.nx-stage.is-playing .nx-flow path{ stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.nx-stage.is-playing .nx-flow path.is-in{ stroke-dashoffset: 0; transition: stroke-dashoffset .8s cubic-bezier(.6,.1,.3,1); }
.nx-stage.is-playing .nx-flow path.is-out{ opacity:0; transition: opacity .6s ease; }
@media (prefers-reduced-motion: no-preference){ /* :not(.nx-still): ?still=1 screenshot checks freeze these too (deck.js sets the class) */
  :root:not(.nx-still) .nx-scene img{ animation: nx-drift 16s ease-in-out infinite alternate; }
  :root:not(.nx-still) .nx-pill .dot{ animation: nx-blink 1.6s ease-in-out infinite; }
}
@keyframes nx-drift{ from{ transform: scale(1.02) translate(0,0); } to{ transform: scale(1.08) translate(-1.5%, -1%); } }
@keyframes nx-blink{ 50%{ opacity:.35; } }

/* ---------- smaller screens: flat stage under the copy ---------- */
@media (max-width: 1080px){
  .nx-hero{ padding-top: 108px; }
  .nx-hero-inner{ grid-template-columns: minmax(0, 1fr); }
  .nx-stage-wrap{ margin-right:0; }
  .nx-copy{ max-width: 640px; }
  .nx-stage{ transform:none; }
}
/* tablets: the flat stage is full width but too narrow for two nested columns — the shorts drop under the transcript
   (as on phones) and the step pill loses its arrows so the last caption clears the border */
@media (max-width: 900px){
  .nx-panel{ grid-template-columns: 1fr; }
  .nx-clips{ justify-content:center; }
  .nx-clip{ flex-basis: 26%; } .nx-clip.c2{ flex-basis: 32%; }
  .nx-arrow{ display:none; }
  .nx-steps{ gap: 6px; }
}
@media (max-width: 640px){
  .nx-nav a:not(.nx-pill-btn){ display:none; }
  .nx-stage{ padding:12px; border-radius:20px; }
  .nx-stage-grid{ grid-template-columns: 1fr; }
  .nx-scene{ aspect-ratio: 4 / 3; }
  .nx-scene img{ object-position: 40% 30%; }
  .nx-panel{ grid-template-columns: 1fr; }
  .nx-clips{ justify-content:center; }
  .nx-clip{ flex-basis: 26%; } .nx-clip.c2{ flex-basis: 32%; }
  .nx-clip figcaption{ font-size: .7rem; }
  .nx-steps{ border-radius:18px; flex-wrap:wrap; justify-content:flex-start; }
  .nx-arrow{ display:none; }
}