/* Section 3, the plan: the same house goes to sleep (night, lights out, one green light left on) with the price;
   the page ends on it. Pictures are the same frame as every scene above, graded for night and morning. */
.nx { position: relative; z-index: 7; height: var(--nx-len, 375vh); margin-top: calc(-1 * max(100svh, 540px)); pointer-events: none; }
.nx__stage { position: sticky; top: 0; height: max(100svh, 540px); overflow: hidden; background: #0a0908; opacity: 0; color: #f5f3ee; text-align: center; }
.nx__stage.is-live { pointer-events: auto; }
.ax__stage.is-held { position: fixed; top: 0; left: 0; right: 0; }

.nx-img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; pointer-events: none; }
.nx-dusk { filter: saturate(1.2); }
.nx-night, .nx-off, .nx-offall { opacity: 0; }

/* stars: a few of them breathe, each at its own pace */
.nx-stars { position: absolute; inset: 0 0 58% 0; opacity: 0; pointer-events: none; }
.nx-stars i { position: absolute; border-radius: 50%; background: #dfe8ff; animation: nx-tw var(--t, 4s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes nx-tw { from { opacity: 0.18; } to { opacity: 0.95; } }

/* the one light left on */
.nx-led { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; background: #19c26a;
  box-shadow: 0 0 6px 2px rgba(25, 194, 106, 0.95), 0 0 22px 7px rgba(25, 194, 106, 0.45); animation: nx-breathe 3.6s ease-in-out infinite; }
@keyframes nx-breathe { 0%, 100% { box-shadow: 0 0 5px 1px rgba(25, 194, 106, 0.85), 0 0 14px 4px rgba(25, 194, 106, 0.28); } 50% { box-shadow: 0 0 7px 2px rgba(25, 194, 106, 1), 0 0 30px 10px rgba(25, 194, 106, 0.55); } }

/* the night check: the opening's scanning box, once across the dark roof */
.nx-scanwrap { position: absolute; inset: 0; pointer-events: none; }
.nx-scan { position: absolute; left: 0; top: 0; opacity: 0; color: #ffb020; transition: color 0.4s ease; will-change: transform; }
.nx-scan svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nx-scan path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nx-scan p { position: absolute; left: 0; top: 100%; margin: 8px 0 0; display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; letter-spacing: 0.02em; text-shadow: 0 1px 8px rgba(2, 4, 8, 0.8); }
.nx-scan p i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.nx-scan.is-clear { color: #0fe22e; }

/* the words sit where every scene's headline sat */
.nx-copy { position: absolute; z-index: 3; left: 50%; top: clamp(96px, 13vh, 150px); transform: translateX(-50%); width: min(58rem, calc(100% - 2 * var(--edge))); opacity: 0; }
.nx-title { margin: 0; font-weight: 400; font-size: clamp(2.4rem, 4.85vw, 4.7rem); line-height: 0.98; letter-spacing: -0.038em; text-shadow: 0 2px 28px rgba(8, 10, 16, 0.42), 0 1px 3px rgba(8, 10, 16, 0.3); }
.nx-title span { display: block; }
.nx-price { margin: 22px 0 0; font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.05; letter-spacing: -0.03em; color: #f5f3ee; text-shadow: 0 1px 14px rgba(6, 8, 14, 0.6); }
.nx-btn { position: relative; overflow: hidden; display: inline-block; margin-top: 26px; padding: 16px 30px; border-radius: 999px; background: #f5f3ee; color: #14110d; font-weight: 500; font-size: 17px; text-decoration: none; box-shadow: 0 6px 30px rgba(4, 6, 12, 0.4); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.nx-btn:hover { transform: translateY(-1px); }
/* one slow band of white light crosses the button, left to right, once; the button's own glow lifts with it */
.nx-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; transform: translateX(-130%) skewX(-18deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)); }
.nx-copy.is-in .nx-btn::after { animation: nx-sheen 2.8s cubic-bezier(0.45, 0, 0.55, 1) 0.5s 1 both; }
.nx-copy.is-in .nx-btn { animation: nx-lift 2.8s cubic-bezier(0.45, 0, 0.55, 1) 0.5s 1 both; }
@keyframes nx-lift { 0%, 100% { box-shadow: 0 6px 30px rgba(4, 6, 12, 0.4); } 50% { box-shadow: 0 6px 30px rgba(4, 6, 12, 0.4), 0 0 26px 2px rgba(255, 255, 255, 0.38); } }
@keyframes nx-sheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .nx-copy.is-in .nx-btn, .nx-copy.is-in .nx-btn::after { animation: none; } }
.nx-sign { position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; margin: 0; line-height: 1.85; font-size: 14px; letter-spacing: 0.01em; color: rgba(245, 243, 238, 0.62); text-shadow: 0 1px 10px rgba(2, 4, 8, 0.85); opacity: 0; }
.nx-sign b { font-weight: 500; color: rgba(245, 243, 238, 0.82); }

/* reduced motion: one still screen, the house asleep with the price */
.is-still .nx { height: auto; margin-top: 0; pointer-events: auto; }
.is-still .nx__stage { position: relative; opacity: 1; }

/* phones: the same words at the phone's headline size, the sign-off inside the edges */
@media (max-width: 819.98px) {
  .nx-copy { top: max(84px, 11svh); width: calc(100% - 2 * var(--edge)); }
  .nx-title { font-size: clamp(2.2rem, 9.6vw, 3.4rem); }
  .nx-price { margin-top: 18px; font-size: 30px; }
  .nx-btn { margin-top: 22px; }
  .nx-sign { bottom: max(26px, env(safe-area-inset-bottom)); padding: 0 var(--edge); font-size: 13px; line-height: 1.5; }
}
@media (max-width: 819.98px) { .nx-copy { top: var(--head-m); } }