/* S9 — "Get started" (mock S9A). The closing slide: Remy rises over the headline like a moon, a neon-framed
   request-access card, and three promise chips standing on a reflective floor. Finished scene = this CSS;
   s9.js swaps Remy's poses, types the placeholder and shimmers the chips while .nx-s9.is-playing. */

.nx-s9{ --nx-s9-remy: clamp(150px, 13vw, 200px); }
.nx-s9 .nx-slide-inner{ padding-bottom: 40px; }

/* ---------- Remy, the rising moon ---------- */
.nx-s9 .nx-centered .nx-visual.nx-s9-moon{ width:auto; margin: 0 0 clamp(4px, 1vh, 12px); }
.nx-s9 .nx-s9-float{ will-change: transform; }
.nx-s9 .nx-s9-poses{ position:relative; width: var(--nx-s9-remy); aspect-ratio: 1; margin-top: calc(var(--nx-s9-remy) * -.14);
  transition: transform .45s cubic-bezier(.2,.9,.3,1.45); }
/* the moonlight: a soft halo centred on the orb (the orb sits ~58% down the square pose image) */
.nx-s9 .nx-s9-poses::before{ content:''; position:absolute; inset:-55%; z-index:0; pointer-events:none; border-radius:50%;
  background: radial-gradient(circle at 50% 57%, rgba(170,185,255,.6) 0%, rgba(110,110,255,.3) 22%, rgba(98,74,255,.1) 40%, transparent 56%);
  transition: opacity .5s ease, transform .5s ease; }
.nx-s9 .nx-s9-pose{ position:absolute; inset:0; z-index:1; transition: opacity .28s ease; }
.nx-s9 .nx-s9-pose:not(.nx-s9-pose-idle){ opacity:0; }
.nx-s9 .nx-s9-moon:is(.is-listening, .is-talking, .is-gotit) .nx-s9-pose-idle{ opacity:0; }
.nx-s9 .nx-s9-moon.is-listening .nx-s9-pose-listening,
.nx-s9 .nx-s9-moon.is-talking .nx-s9-pose-talking,
.nx-s9 .nx-s9-moon.is-gotit .nx-s9-pose-gotit{ opacity:1; }
.nx-s9 .nx-s9-moon.is-talking .nx-s9-poses::before{ opacity:1; transform: scale(1.12); }
.nx-s9 .nx-s9-moon.is-gotit .nx-s9-poses{ transform: scale(1.07); }

/* ---------- copy ---------- */
.nx-s9 .nx-copy-block{ display:flex; flex-direction:column; align-items:center; max-width: 820px; width:100%; }
.nx-s9 .nx-eyebrow{ font-size:.78rem; letter-spacing:.24em; padding:7px 16px; background: rgba(40,10,24,.35); box-shadow: 0 0 18px -8px rgba(255,75,62,.8); }
.nx-s9 .nx-h2{ font-size: clamp(2.6rem, 5.6vw, 5.9rem); line-height:.94; margin-top: 18px; }
.nx-s9 .nx-h2 .nx-grad{ padding-bottom: .06em; font-weight:700; font-size:1.1em; letter-spacing: .004em; margin-top: -.04em;
  --nx-grad: linear-gradient(95deg, #ff4b3e 0%, #ff4d62 26%, #e854b4 50%, #b27dff 76%, #c6b2ff 100%); filter: drop-shadow(0 0 22px rgba(224,64,154,.25)); }
.nx-s9 .nx-lede{ margin-top: 18px; font-size: clamp(1.08rem, 1.5vw, 1.45rem); line-height:1.45; color: rgba(243,239,231,.84); max-width: none; }
.nx-s9 .nx-s9-sent{ display:block; }

/* ---------- the request-access card ---------- */
.nx-s9 .nx-s9-card{ --nx-r: 26px; --nx-neon-w: 3px; --nx-neon: linear-gradient(90deg, #2aa4ff 0%, #2f5eff 24%, #5a3fff 48%, #a336ff 72%, #f044ff 100%);
  width: min(746px, 100%); margin-top: clamp(22px, 3vh, 32px); padding: 36px 42px; text-align:left;
  background: linear-gradient(180deg, rgba(24,28,78,.78), rgba(16,18,56,.84));
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85), -26px 0 60px -22px rgba(30,140,255,.95), 26px 0 60px -22px rgba(225,60,255,.9), 0 0 120px -30px rgba(110,80,255,.8),
    inset 22px 0 34px -26px rgba(40,160,255,.9), inset -22px 0 34px -26px rgba(230,70,255,.9); }
.nx-s9 .nx-s9-card::before{ filter: brightness(1.35) saturate(1.2); }
.nx-s9 .nx-s9-card::after{ inset:-5px; padding: 11px; filter: blur(12px) brightness(1.25) saturate(1.6); opacity:1; }
.nx-s9 .nx-s9-form{ display:grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items:stretch; }
.nx-s9 .nx-s9-field{ position:relative; display:flex; align-items:center; min-height: 68px; border-radius: 12px;
  background: rgba(30,34,78,.62); border:1px solid rgba(160,170,255,.24); transition: border-color .2s ease, box-shadow .2s ease; }
.nx-s9 .nx-s9-field:focus-within{ border-color: rgba(63,214,255,.8); box-shadow: 0 0 0 3px rgba(63,214,255,.16), 0 0 24px -8px rgba(63,214,255,.8); }
.nx-s9 .nx-s9-field.is-invalid{ border-color: rgba(255,110,96,.9); box-shadow: 0 0 0 3px rgba(255,75,62,.16); }
.nx-s9 .nx-s9-mail{ position:absolute; left: 22px; width: 28px; height: 28px; fill:none; stroke: rgba(200,206,255,.72); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none;
  transition: stroke .3s ease, filter .3s ease; }
.nx-s9 .nx-s9-field.is-typing .nx-s9-mail{ stroke: var(--nx-cyan); filter: drop-shadow(0 0 6px rgba(63,214,255,.8)); }
.nx-s9 .nx-s9-input{ width:100%; height:100%; min-height: 66px; min-width:0; border:0; outline:0; background: transparent; color: var(--nx-ink);
  font-family: var(--font-ui); font-size: 1.15rem; padding: 0 18px 0 70px; border-radius: 12px; }
.nx-s9 .nx-s9-input::placeholder{ color: rgba(220,224,255,.62); opacity:1; }
.nx-s9 .nx-s9-submit{ min-height: 68px; padding: 0 34px; border-radius: 12px; font-size: 1.22rem; font-weight:600;
  background: linear-gradient(180deg, #d93025, #c42a1f); /* ≥4.5:1 for the #fff9f7 label (AA) */ box-shadow: 0 0 34px -8px rgba(255,75,62,.85), 0 12px 30px -14px rgba(255,75,62,.9), inset 0 1px 0 rgba(255,255,255,.22); }
.nx-s9 .nx-s9-submit:hover{ background: linear-gradient(180deg, #cf2c21, #b8261c); }
.nx-s9 .nx-s9-submit:focus-visible{ outline: 2px solid var(--nx-cyan); outline-offset: 3px; }
.nx-s9 .nx-s9-error{ margin: 12px 0 0; font-size: .95rem; line-height:1.4; color: #ff9b90; }
.nx-s9 .nx-s9-error:empty{ margin:0; }

/* ---------- the three promises ---------- */
.nx-s9 .nx-s9-promises{ position:relative; list-style:none; margin: clamp(18px, 2.4vh, 26px) 0 0; padding:0; max-width: 100%;
  display:flex; justify-content:center; gap: 20px; }
.nx-s9 .nx-s9-promise{ position:relative; overflow:hidden; display:flex; align-items:center; gap: 16px; min-width: 232px; min-height: 90px; padding: 0 26px 0 18px; border-radius: 22px;
  font-size: 1.2rem; font-weight:500; color: var(--nx-ink); text-align:left; letter-spacing:-.015em; white-space:nowrap;
  background: linear-gradient(180deg, rgba(22,26,70,.7), rgba(12,14,44,.78)) padding-box,
              linear-gradient(120deg, #6fb4ff, #8d8bff 50%, #c07dff) border-box;
  border: 1.5px solid transparent; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 22px -6px rgba(110,120,255,.95), inset 0 0 24px -10px rgba(140,150,255,.75), inset 0 1px 0 rgba(255,255,255,.1); }
/* the shimmer band (parked off to the left in the finished scene) */
.nx-s9 .nx-s9-promise::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.16) 45%, rgba(190,210,255,.28) 50%, rgba(255,255,255,.16) 55%, transparent 100%);
  transform: translateX(-130%); opacity:0; }
.nx-s9 .nx-s9-ic{ flex:none; position:relative; display:grid; place-items:center; width: 60px; height: 60px; border-radius:50%;
  background: radial-gradient(circle at 40% 30%, rgba(90,70,200,.55), rgba(24,18,70,.9)) padding-box,
              linear-gradient(140deg, #7d6bff, #c04aff 55%, #e0409a) border-box;
  border: 1.5px solid transparent; box-shadow: 0 0 18px -2px rgba(155,92,255,.75), inset 0 0 12px rgba(155,92,255,.35); transition: box-shadow .35s ease; }
.nx-s9 .nx-s9-ic svg{ width: 28px; height: 28px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nx-s9 .nx-s9-promise:last-child .nx-s9-ic svg{ fill: rgba(255,255,255,.92); stroke-width:1.2; }
.nx-s9 .nx-s9-promise.is-shine .nx-s9-ic{ box-shadow: 0 0 30px 2px rgba(155,92,255,.95), inset 0 0 14px rgba(190,140,255,.6); }

/* ---------- the reflective floor under the card and chips ---------- */
.nx-s9 .nx-s9-promises::before{ content:''; position:absolute; left: calc(50% - 50vw); width: 100vw; top: -120px; height: 420px; z-index:-1; pointer-events:none;
  background: radial-gradient(34% 26% at 50% 38%, rgba(120,90,255,.30), rgba(63,120,255,.10) 60%, transparent 100%),
              radial-gradient(48% 9% at 50% 36%, rgba(120,130,255,.16), transparent 100%); }
.nx-s9 .nx-s9-promises::after{ content:''; position:absolute; left:0; right:0; top: calc(100% + 4px); height: 170px; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 1%, rgba(60,160,255,.85) 4%, transparent 8% 13%, rgba(90,130,255,.6) 16%, transparent 20% 26%, rgba(130,100,255,.8) 30%, transparent 34% 36%,
      rgba(70,150,255,.8) 39%, transparent 43% 47%, rgba(120,110,255,.6) 50%, transparent 53% 57%, rgba(160,90,255,.8) 61%, transparent 65% 67%, rgba(180,80,255,.8) 70%, transparent 74% 80%,
      rgba(200,80,255,.6) 84%, transparent 88% 92%, rgba(220,80,255,.8) 96%, transparent 99%),
    linear-gradient(90deg, transparent 0%, rgba(63,170,255,.22) 12%, rgba(93,123,255,.16) 30%, rgba(155,92,255,.22) 55%, rgba(200,70,255,.2) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, #000 14%, rgba(0,0,0,.45) 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, rgba(0,0,0,.2) 0%, #000 14%, rgba(0,0,0,.45) 45%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-composite: intersect;
  filter: blur(11px); }

/* ---------- motion (JS adds .is-playing; nothing here runs in the finished scene) ---------- */
@media (prefers-reduced-motion: no-preference){
  .nx-s9.is-playing .nx-s9-float{ animation: nx-s9-float 4.2s ease-in-out infinite alternate; }
  .nx-s9.is-playing .nx-s9-promise.is-shine::after{ animation: nx-s9-shine 1s cubic-bezier(.4,.1,.3,1) both; }
  .nx-s9.is-playing .nx-s9-submit.is-lit{ animation: nx-s9-pulse 1.1s ease-out both; }
}
@keyframes nx-s9-float{ from{ transform: translateY(4px); } to{ transform: translateY(-9px); } }
@keyframes nx-s9-shine{ 0%{ transform: translateX(-130%); opacity:1; } 100%{ transform: translateX(230%); opacity:1; } }
@keyframes nx-s9-pulse{
  0%{ box-shadow: 0 0 34px -8px rgba(255,75,62,.85), 0 0 0 0 rgba(255,75,62,.6), inset 0 1px 0 rgba(255,255,255,.22); }
  60%{ box-shadow: 0 0 46px -4px rgba(255,75,62,1), 0 0 0 12px rgba(255,75,62,0), inset 0 1px 0 rgba(255,255,255,.22); }
  100%{ box-shadow: 0 0 34px -8px rgba(255,75,62,.85), 0 0 0 0 rgba(255,75,62,0), inset 0 1px 0 rgba(255,255,255,.22); }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1080px){
  .nx-s9 .nx-s9-promises{ width: min(766px, 100%); }
  .nx-s9 .nx-s9-promise{ flex: 1 1 0; min-width:0; white-space:normal; line-height:1.2; font-size: 1.1rem; gap: 12px; padding: 0 14px; min-height: 76px; }
  .nx-s9 .nx-s9-ic{ width: 50px; height: 50px; }
  .nx-s9 .nx-s9-ic svg{ width: 24px; height: 24px; }
  .nx-s9 .nx-s9-promises{ gap: 14px; }
}
@media (max-width: 640px){
  /* this closing slide stays centred on phones: the moon, the headline and the card share one axis */
  .nx-s9 .nx-centered{ align-items:center; text-align:center; }
  .nx-s9 .nx-centered .nx-h2 .nx-line{ margin-inline:auto; }
  .nx-s9 .nx-centered .nx-lede{ margin-inline:auto; }
  .nx-s9 .nx-s9-sent{ display:inline; }
  .nx-s9 .nx-lede{ font-size: 1.02rem; }
  .nx-s9 .nx-eyebrow{ font-size:.75rem; letter-spacing:.18em; }
  .nx-s9 .nx-s9-card{ --nx-r: 20px; padding: 18px; }
  .nx-s9 .nx-s9-form{ grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nx-s9 .nx-s9-field{ min-height: 56px; }
  .nx-s9 .nx-s9-input{ min-height: 54px; font-size: 1rem; padding-left: 54px; }
  .nx-s9 .nx-s9-mail{ left: 16px; width: 24px; height: 24px; }
  .nx-s9 .nx-s9-submit{ min-height: 56px; width:100%; font-size: 1.08rem; }
  .nx-s9 .nx-s9-promises{ gap: 10px; }
  .nx-s9 .nx-s9-promise{ flex-direction:column; justify-content:center; text-align:center; gap: 8px; min-height: 108px; padding: 12px 6px; border-radius: 18px;
    font-size: .88rem; line-height:1.2; }
  .nx-s9 .nx-s9-ic{ width: 42px; height: 42px; }
  .nx-s9 .nx-s9-ic svg{ width: 21px; height: 21px; }
}

/* short desktop viewports (1280×720, 1366×768, 1440×800 laptops): the page snaps to the top of this slide, so pull
   the stack in enough that the promise chips land above the fold instead of just under it */
@media (min-width: 1081px) and (max-height: 860px){
  .nx-s9{ --nx-s9-remy: clamp(112px, 17vh, 150px); }
  .nx-s9 .nx-h2{ font-size: clamp(2.6rem, min(5.6vw, 8.6vh), 5.9rem); margin-top: 12px; }
  .nx-s9 .nx-lede{ margin-top: 12px; font-size: clamp(1.02rem, 2.3vh, 1.3rem); }
  .nx-s9 .nx-s9-card{ margin-top: 18px; padding: 24px 34px; }
  .nx-s9 .nx-s9-field, .nx-s9 .nx-s9-submit{ min-height: 58px; }
  .nx-s9 .nx-s9-input{ min-height: 56px; }
  .nx-s9 .nx-s9-promises{ margin-top: 16px; }
  .nx-s9 .nx-s9-promise{ min-height: 72px; }
  .nx-s9 .nx-s9-ic{ width: 50px; height: 50px; }
  .nx-s9 .nx-s9-ic svg{ width: 24px; height: 24px; }
}