/* ============================================================
   TELESTO 2026 — The Noctis Singularity
   Shared design system
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Brand palette (from asset handoff) */
  --bg:#0B0710;            /* near-black — page background         */
  --bg-lift:#0E0916;       /* faint lift for banding               */
  --surface:#140D20;       /* card surface                         */
  --surface-2:#1A1130;     /* raised surface                       */
  --violet:#513278;        /* deep violet — primary brand          */
  --violet-muted:#624D7E;  /* muted purple — secondary surfaces    */
  --lavender:#B38DE3;      /* headline fill, links, hover          */
  --gold:#BE7305;          /* CTA / key highlight — sparing        */
  --gold-light:#E6BB7E;    /* hover, glow                          */
  --white:#FFFFFF;

  /* Derived ink */
  --ink:#ECE6F6;           /* body text                            */
  --ink-dim:#A79CBE;       /* muted captions                       */
  --ink-faint:#6E6484;     /* faintest labels                      */

  /* Lines & glows */
  --hairline:rgba(179,141,227,.14);
  --hairline-2:rgba(179,141,227,.28);
  --gold-hairline:rgba(230,187,126,.30);
  --corona:linear-gradient(90deg,#BE7305 0%,#E6BB7E 100%);
  --corona-soft:linear-gradient(90deg,rgba(190,115,5,.9),rgba(230,187,126,.95));
  --violet-glow:0 0 60px rgba(81,50,120,.55);
  --gold-glow:0 0 34px rgba(190,115,5,.45);

  /* Type */
  --f-display:'Michroma',system-ui,sans-serif;
  --f-cere:'Cinzel',Georgia,serif;
  --f-body:'Poppins',system-ui,sans-serif;
  --f-mono:'Space Mono','SFMono-Regular',ui-monospace,monospace;

  /* Rhythm */
  --edge:clamp(20px,5vw,80px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset-ish ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}

/* ---------- Cosmic backdrop ---------- */
#starfield{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
/* faint vignette + violet gravity wells fixed behind everything */
.void{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(81,50,120,.30), transparent 55%),
    radial-gradient(90% 60% at 8% 108%, rgba(98,77,126,.22), transparent 55%),
    radial-gradient(140% 120% at 50% 50%, transparent 60%, rgba(5,3,9,.9) 100%);
}
.page{position:relative;z-index:1}

/* ---------- Typographic scale ---------- */
.eyebrow{
  font-family:var(--f-cere);
  font-size:clamp(.72rem,.66rem + .3vw,.86rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:600;
  display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before{
  content:"";width:34px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-hairline));
}
.eyebrow.center::after{
  content:"";width:34px;height:1px;
  background:linear-gradient(90deg,var(--gold-hairline),transparent);
}
.display{
  font-family:var(--f-display);
  line-height:.98;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.cere{font-family:var(--f-cere)}
.mono{font-family:var(--f-mono);letter-spacing:.02em}
.gold-text{
  background:var(--corona);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media (prefers-reduced-motion:no-preference){
  .reveal.in .gold-text{animation:goldsweep 1.6s var(--ease) .25s both}
}
@keyframes goldsweep{from{background-position:130% 0}to{background-position:0% 0}}
.lav{color:var(--lavender)}
.dim{color:var(--ink-dim)}

/* Section title block */
.sec-title{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.7rem,1.1rem + 3vw,3.4rem);
  line-height:1.02;letter-spacing:.01em;color:var(--white);
}

/* ---------- Buttons ---------- */
.btn{
  --pad:.95em 1.7em;
  display:inline-flex;align-items:center;gap:.7em;
  padding:var(--pad);
  font-family:var(--f-body);font-weight:500;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;
  border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  position:relative;
}
.btn-gold{
  background:var(--corona);color:#1c1204;
  box-shadow:var(--gold-glow);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 46px rgba(230,187,126,.6)}
/* corona shine sweep */
.btn{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .btn::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
    transform:translateX(-130%);transition:transform .7s var(--ease)}
  .btn:hover::before{transform:translateX(130%)}
}
.btn-ghost{
  background:transparent;color:var(--ink);
  border-color:var(--hairline-2);
}
.btn-ghost:hover{border-color:var(--lavender);color:var(--white);
  box-shadow:0 0 30px rgba(179,141,227,.22);transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold-light);outline-offset:3px;
}

/* pulsing live dot */
.livedot{
  width:8px;height:8px;border-radius:50%;background:var(--gold-light);
  box-shadow:0 0 0 0 rgba(230,187,126,.6);
  animation:pulse 1.8s infinite;flex:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(230,187,126,.55)}
  70%{box-shadow:0 0 0 10px rgba(230,187,126,0)}
  100%{box-shadow:0 0 0 0 rgba(230,187,126,0)}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem var(--edge);
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,7,16,.72);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--hairline);
}
.nav-brand{display:flex;align-items:center;gap:.7rem}
.nav-brand img{width:30px;height:30px;filter:drop-shadow(0 0 10px rgba(179,141,227,.4))}
.nav-brand .wm{
  font-family:var(--f-display);font-size:.98rem;letter-spacing:.34em;
  color:var(--white);text-transform:uppercase;
}
.nav-brand .wm b{font-weight:400;color:var(--gold-light)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);position:relative;padding:.3em 0;font-weight:400;
  transition:color .3s var(--ease);
}
.nav-links a:hover{color:var(--white)}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--corona);transition:width .35s var(--ease);
}
.nav-links a:hover::after{width:100%}
.nav-links a.live-link{color:var(--gold-light);display:flex;align-items:center;gap:.5em}
.nav-cta{padding:.7em 1.3em!important;font-size:.72rem!important}
.nav-toggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;padding:.4rem}

@media (max-width:1040px) and (min-width:861px){
  .nav-links{gap:1.1rem}
  .nav-links a{font-size:.68rem;letter-spacing:.14em}
}
@media (max-width:860px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(78vw,320px);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.6rem;padding:2rem var(--edge);
    background:rgba(14,9,22,.97);backdrop-filter:blur(20px);
    border-left:1px solid var(--hairline);
    /* visibility toggle: closed menu can't cause phantom overflow or catch focus */
    transform:translateX(100%);visibility:hidden;
    transition:transform .4s var(--ease),visibility 0s .4s;
  }
  .nav-links.open{transform:translateX(0);visibility:visible;
    transition:transform .4s var(--ease)}
  .nav-links a{font-size:.95rem}
  .nav-toggle{display:block;z-index:61}
}

/* ---------- Footer ---------- */
.footer{
  position:relative;z-index:1;
  border-top:1px solid var(--hairline);
  padding:4.5rem var(--edge) 2.2rem;
  background:linear-gradient(180deg,transparent,rgba(20,13,32,.6));
}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;
}
.footer h4{
  font-family:var(--f-cere);font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-light);margin-bottom:1.1rem;font-weight:600;
}
.footer .wm-big{
  font-family:var(--f-display);font-size:1.5rem;letter-spacing:.14em;
  color:var(--white);text-transform:uppercase;margin-bottom:.8rem;
}
.footer p,.footer a{font-size:.86rem;color:var(--ink-dim);line-height:1.9}
.footer a:hover{color:var(--lavender)}
.footer .crests{display:flex;gap:1.1rem;align-items:center;margin-top:1.2rem}
.footer .crests img{height:52px;width:auto;opacity:.8;filter:grayscale(.2)}
.footer-tag{
  font-family:var(--f-cere);font-style:italic;color:var(--lavender);
  font-size:.98rem;line-height:1.7;max-width:26ch;
}
.footer-base{
  max-width:var(--maxw);margin:3rem auto 0;padding-top:1.6rem;
  border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.74rem;letter-spacing:.06em;color:var(--ink-faint);
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:2rem}
}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.force-in .reveal{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* shared section wrapper */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--edge)}

/* 404 */
.e404{min-height:100svh;display:grid;place-items:center;text-align:center;padding:2rem var(--edge)}
.e404-title{font-size:clamp(5rem,20vw,12rem);color:var(--white);margin:1rem 0 .6rem}
.e404-sub{font-family:var(--f-cere);font-style:italic;color:var(--lavender);
  font-size:1.1rem;margin-bottom:2.2rem}
.e404-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--edge);top:.6rem;z-index:99;background:var(--gold);
  color:#1c1204;padding:.6em 1em;border-radius:2px}