/* ============================================================
   GLOBEX ATLAS - design tokens + base
   Ported from the approved midnight system (21 Jul taste pass).
   Rules: one accent (gold), accent never on body text, night is
   the sanctioned dark surface, calm = premium.
   ============================================================ */

:root{
  --night:#0E0C09; --night-2:#12100C; --night-3:#0B0906;
  --bone:#FAF6EE; --ink:#191713;
  --text:rgba(250,246,238,.68); --text-dim:rgba(250,246,238,.42); --text-faint:rgba(250,246,238,.3);
  --gold:#C9A24B; --gold-bright:#E7C87A; --gold-deep:#8F6D28;
  --hairline:rgba(250,246,238,.10); --hairline-soft:rgba(250,246,238,.06);
  --gold-rim:rgba(201,162,75,.16);
  --glass:rgba(250,246,238,.03);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
  --mono:'Geist Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --wipe-ease:cubic-bezier(.77,0,.175,1);
  --maxw:1240px;
  /* motion dials: collapse under reduced motion */
  --t-reveal:.9s; --t-wipe:1.1s; --t-sweep:2s;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--bone);font-family:var(--sans);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden;height:100vh}
::selection{background:var(--gold);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,svg,video,canvas{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{position:relative}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em;color:rgba(250,246,238,.95)}
h2 em,h1 em{font-style:italic;color:var(--gold-bright)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim);font-weight:400}
.labelrow{display:flex;align-items:center;gap:14px}
.labelrow .line{flex:1;height:1px;background:var(--hairline);position:relative;overflow:hidden}
.labelrow .line i{position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(90deg,transparent,rgba(231,200,122,.55),transparent)}
.labelrow.in .line i{animation:sweep var(--t-sweep) var(--ease) .25s forwards}
@keyframes sweep{to{transform:translateX(130%)}}
.lead{color:var(--text);font-size:clamp(16px,1.6vw,18.5px);font-weight:400}

/* film grain removed 22 Jul on review: backgrounds stay clean night */

/* section auras: gold light pools, position varies down the page */
.aura{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 60% at 18% 22%,rgba(201,162,75,.08),transparent 55%),
             radial-gradient(60% 60% at 82% 78%,rgba(201,162,75,.045),transparent 60%)}
.aura.b{background:radial-gradient(70% 60% at 80% 18%,rgba(201,162,75,.075),transparent 55%),
             radial-gradient(60% 60% at 15% 85%,rgba(201,162,75,.04),transparent 60%)}
.aura.c{background:radial-gradient(80% 70% at 50% 0%,rgba(201,162,75,.07),transparent 58%)}
section>.wrap{position:relative;z-index:1}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans);font-weight:600;
  font-size:13.5px;padding:12px 24px;border-radius:100px;transition:.3s;cursor:pointer;border:1px solid transparent;letter-spacing:.02em}
.pill-solid{background:var(--bone);color:var(--ink)}
.pill-solid:hover{background:var(--gold-bright)}
.pill-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1406}
.pill-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.pill-ghost{border-color:rgba(250,246,238,.25);color:var(--bone)}
.pill-ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

/* reveal primitives (gated on html.js so no-JS reads everything) */
html.js [data-reveal]{opacity:0;filter:blur(6px);transform:translateY(22px);
  transition:opacity var(--t-reveal) var(--ease),filter var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
html.js [data-reveal].in{opacity:1;filter:blur(0);transform:none}
html.js [data-reveal][data-d="1"]{transition-delay:.1s}
html.js [data-reveal][data-d="2"]{transition-delay:.2s}
html.js [data-reveal][data-d="3"]{transition-delay:.3s}
html.js [data-wipe]{clip-path:inset(0 0 100% 0);transition:clip-path var(--t-wipe) var(--wipe-ease)}
html.js [data-wipe].in{clip-path:inset(0 0 0 0)}

/* gradient-lit rim (mask-composite) */
.rim{position:relative}
.rim::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(201,162,75,0),rgba(201,162,75,.38),rgba(201,162,75,0) 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* spotlight (gold cursor glow; hover-capable devices only, wired by JS) */
.spot{position:relative;overflow:hidden}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s;
  background:radial-gradient(560px circle at var(--mx,-999px) var(--my,-999px),rgba(201,162,75,.09),transparent 42%)}
.spot:hover::before{opacity:1}

/* drawn gold underline (stroke-draw on one phrase per headline, max) */
.drawn{position:relative;white-space:nowrap}
.drawn svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.34em;overflow:visible;pointer-events:none}
.drawn svg path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;opacity:.85;
  stroke-dasharray:var(--pathlen,320);stroke-dashoffset:var(--pathlen,320)}
html.js .drawn.in svg path{transition:stroke-dashoffset 1.1s var(--ease) .35s}
html.js .drawn.in svg path,html:not(.js) .drawn svg path{stroke-dashoffset:0}

/* reduced motion: everything readable, nothing moves */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js [data-reveal],html.js [data-wipe]{opacity:1;filter:none;transform:none;clip-path:none}
  .drawn svg path{stroke-dashoffset:0!important}
  .spot::before{display:none}
}
html.rm *{animation:none!important;transition:none!important}
html.rm [data-reveal],html.rm [data-wipe]{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
html.rm .drawn svg path{stroke-dashoffset:0!important}