/* ============================================================
   NxtAtlas — design system
   Modern, calm, premium. Typography follows the logo: geometric
   sans, no serif. Motion is deliberately minimal. No frames,
   no grain, no rotating decoration.
   Every page loads this first, then its own stylesheet.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&family=Manrope:wght@300;400;500;600&display=swap");

:root{
  /* ---- surface ---- */
  --ink:        #0a0b0d;
  --ink-raise:  #0f1114;
  --ink-card:   #12141a;

  /* ---- text ---- */
  --paper:       #ece8e1;
  --paper-soft:  rgba(236,232,225,.68);
  --paper-dim:   rgba(236,232,225,.48);
  --paper-faint: rgba(236,232,225,.16);

  /* ---- brass: the single accent ---- */
  --brass:       #d1a05a;
  --brass-lit:   #e0b473;
  --brass-soft:  rgba(209,160,90,.34);
  --brass-faint: rgba(209,160,90,.12);

  --line:        rgba(236,232,225,.10);
  --line-strong: rgba(236,232,225,.18);

  /* ---- type: geometric display + clean body ---- */
  --display: "Sora", system-ui, sans-serif;
  --body:    "Manrope", system-ui, sans-serif;
  /* compatibility aliases: stylesheets written against the old serif/mono
     pairing now resolve to the current type system instead of browser defaults */
  --serif: "Sora", system-ui, sans-serif;
  --mono:  "Manrope", system-ui, sans-serif;

  /* ---- rhythm ---- */
  --edge:    clamp(18px, 4vw, 48px);
  --max:     1200px;
  --section: clamp(80px, 12vh, 140px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .24s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
  position:relative;
}

/* ---- atmosphere: one soft warm halo. no grain, no noise ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(85% 65% at 70% 0%, rgba(209,160,90,.085), transparent 62%),
    linear-gradient(180deg, var(--ink-raise), var(--ink) 45%);
}
main,header,footer,nav{ position:relative; z-index:2; }

/* the decorative plate frame is retired — hide it wherever it still exists */
.plate{ display:none !important; }

/* ---- layout ---- */
.shell{ width:100%; max-width:var(--max); margin-inline:auto;
        padding-inline:clamp(20px, 5vw, 40px); }
section{ padding-block:var(--section); }

/* ---- type scale ---- */
h1,h2,h3{ font-family:var(--display); font-weight:500; margin:0;
          letter-spacing:-.03em; line-height:1.08; }
h1{ font-size:clamp(2.4rem, 6vw, 4.4rem); letter-spacing:-.04em; }
h2{ font-size:clamp(1.8rem, 4vw, 2.9rem); }
h3{ font-size:clamp(1.15rem, 2.2vw, 1.4rem); letter-spacing:-.02em; }
p{ margin:0; }
a{ color:inherit; }

/* small caps label */
.lbl{ font-family:var(--body); font-size:11px; font-weight:500; letter-spacing:.16em;
      text-transform:uppercase; color:var(--paper-dim); }
.lbl-brass{ color:var(--brass); }

.eyebrow{ display:flex; align-items:center; gap:12px; }
/* width lives in a custom property so GSAP can draw the line in */
.eyebrow::before{ content:""; height:1px; width:var(--ew, 24px); background:var(--brass-soft); flex:none; }

.lede{ color:var(--paper-soft); font-size:clamp(15px,1.3vw,17px);
       line-height:1.7; max-width:58ch; }

/* ============================================================
   THE WORDMARK — NXTΛTLAS
   First A is the crossbar-less Λ, exactly as in the logo; the
   second A stays a normal A. Always ship the aria-label.
   Markup:  <span class="wm" aria-label="NxtAtlas">NXT<i>Λ</i>TLAS</span>
   ============================================================ */
.wm{ font-family:var(--display); font-weight:600; letter-spacing:.14em; }
.wm i{ font-style:normal; }
.wm-mono{ letter-spacing:.2em; text-transform:uppercase; }
.wm-brass i{ color:var(--brass); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
      font-family:var(--body); font-size:14.5px; font-weight:500;
      text-decoration:none; cursor:pointer; white-space:nowrap;
      padding:13px 24px; border-radius:10px;
      border:1px solid var(--line-strong); background:transparent; color:var(--paper);
      transition:background var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease; }
.btn:hover{ background:rgba(236,232,225,.06); border-color:var(--paper-faint); }
.btn::after{ content:none !important; }          /* retire the old sweep effect */
.btn-brass{ background:var(--brass); border-color:var(--brass); color:#14100a; font-weight:600; }
.btn-brass:hover{ background:var(--brass-lit); border-color:var(--brass-lit); color:#14100a; }
.btn-ghost{ border-color:transparent; padding-inline:4px; color:var(--paper-soft); }
.btn-ghost:hover{ background:transparent; color:var(--brass); border-color:transparent; }

/* ---- text link ---- */
.ul{ text-decoration:none; color:inherit; transition:color var(--fast) ease; }
.ul::after{ content:none !important; }            /* retire the sweeping underline */
.ul:hover{ color:var(--brass); }

/* ---- status chip: static, no pulsing ---- */
.chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--body);
       font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
       color:var(--paper-dim); white-space:nowrap; }
.chip::before{ content:""; width:6px; height:6px; border-radius:50%;
               background:var(--paper-faint); box-shadow:none !important; animation:none !important; }
.chip-live{ color:var(--brass); }
.chip-live::before{ background:var(--brass); }

/* present to screen readers, absent to the eye */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.rule{ display:flex; align-items:center; gap:14px; }
.rule span{ flex:1; height:1px; background:var(--line); transform-origin:0 50%; }

/* ============================================================
   MOTION
   GSAP + ScrollTrigger drive everything; Lenis drives the scroll.
   CSS's only job here is the pre-animation state (so nothing
   flashes before JS runs) and the machinery GSAP animates into.

   Content is visible by default. It is hidden ONLY once JS has
   confirmed it can animate — html.js without .no-motion — so a
   failed script or reduced-motion never leaves a blank page.
   ============================================================ */
html.js:not(.no-motion) .reveal,
html.js:not(.no-motion) .card{ opacity:0; }

/* The home page opens with the avatar alone: until it has landed there is
   no header, no copy, no buttons on screen. Scoped to .home so the product
   and auth pages — which reuse some of these class names — are unaffected. */
html.js:not(.no-motion) .home .hero-logo,
html.js:not(.no-motion) .home .hero-bloom,
html.js:not(.no-motion) .home .site-head,
html.js:not(.no-motion) .home .hero-tagline,
html.js:not(.no-motion) .home .hero-cta > *,
html.js:not(.no-motion) .home .hero-stats,
html.js:not(.no-motion) .home .hero-chips > *,
html.js:not(.no-motion) .home .marquee{ opacity:0; }

/* legacy stagger classes are no-ops now — GSAP staggers by group */
.r-1,.r-2,.r-3,.r-4,.r-5,.r-6,.r-7,.r-8{ transition-delay:0s; }
.rise{ opacity:1; }
.d-1,.d-2,.d-3,.d-4,.d-5,.d-6{ animation-delay:0s; }

/* words ride up out of their own line */
.w-outer{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; }
.w-inner{ display:inline-block; will-change:transform; }

/* smooth scroll: Lenis owns the scroll position, so the native
   smooth behaviour must stand down or the two fight each other */
html.lenis, html.lenis body{ height:auto; }
html.js{ scroll-behavior:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .reveal,.rise,.card,.hero-logo,.hero-bloom,.site-head,.hero-tagline,
  .hero-cta > *,.hero-stats,.hero-chips > *,.marquee{ opacity:1 !important; transform:none !important; }
}

:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
::selection{ background:var(--brass); color:#14100a; }

/* ============================================================
   MOTION FURNITURE — elements the motion system creates or uses
   ============================================================ */

/* page-load curtain: an ink panel that lifts to reveal the page */
.curtain{
  position:fixed; inset:0; z-index:100; background:var(--ink);
  display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.curtain-mark{ width:64px; height:64px; opacity:.9; }

/* soft warm light trailing the pointer */
.cursor-glow{
  position:fixed; top:0; left:0; width:460px; height:460px; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(209,160,90,.10), transparent 62%);
  will-change:transform; opacity:0;
}

/* .rise is the entrance hook on the auth and product pages. It is declared
   here — after the legacy `.rise{opacity:1}` compatibility rule — so the
   pre-animation hidden state actually wins. */
html.js:not(.no-motion) .rise{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1 !important; } }

/* back to top */
.to-top{
  pointer-events:none;
  position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:40;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(10,11,13,.72); color:var(--paper);
  border:1px solid var(--line-strong);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:translateY(12px) scale(.9);
  transition:background var(--fast) ease, border-color var(--fast) ease, color var(--fast) ease;
}
.to-top:hover{ background:var(--brass); border-color:var(--brass); color:#14100a; }

@media (prefers-reduced-motion: reduce){
  .curtain{ display:none; }
  .cursor-glow{ display:none; }
  .to-top{ opacity:1; transform:none; }
}

/* the scroll-progress hairline is retired */
.scroll-progress{ display:none !important; }