/* =================================================================
   v4 — Spiral-galaxy intro · sticky hero header · new logo
   ================================================================= */

/* ---------------- NEW LOGO ---------------- */
.brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.brand .orbit{width:34px;height:34px;flex:0 0 auto;}
.brand .orbit .ring{fill:none;stroke:var(--amber);stroke-width:2.4;opacity:.9;}
.brand .orbit .ring2{stroke:var(--blau);opacity:.8;}
.brand .orbit .core{fill:var(--amber);}
.brand .orbit .sat{fill:var(--blau);}
.nav-light:not(.solid) .brand .orbit .ring{stroke:var(--amber-l);}
.nav-light:not(.solid) .brand .orbit .ring2{stroke:#bfe0ff;}
.nav-light:not(.solid) .brand .orbit .sat{fill:#bfe0ff;}
.brand .wm{display:flex;flex-direction:column;line-height:.92;}
.brand .wm .l1{font-family:var(--f-display);font-weight:900;font-size:18px;letter-spacing:.06em;color:var(--amber);}
.brand .wm .l2{font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.16em;color:var(--ink);}
.nav-light:not(.solid) .brand .wm .l1{color:var(--amber-l);}
.nav-light:not(.solid) .brand .wm .l2{color:var(--pergament);}
body.epoch-war .nav.solid .brand .wm .l2{color:var(--pergament);}
.brand .orbit .sat{transform-box:view-box;transform-origin:17px 17px;animation:orbitspin 9s linear infinite;}
@media(prefers-reduced-motion:reduce){.brand .orbit .sat{animation:none;}}
@keyframes orbitspin{to{transform:rotate(360deg);}}

/* ---------------- INTRO GALAXY OVERLAY ---------------- */
.gxintro{position:fixed;inset:0;z-index:2000;background:radial-gradient(120% 120% at 50% 46%,#241d14 0%,#141019 60%,#0c0a10 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .8s ease;}
.gxintro.gone{opacity:0;pointer-events:none;}
.gxintro .glx-hint{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);z-index:6;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#cdbfa6;opacity:0;animation:hintin 1s ease 2.2s forwards;text-align:center;}
.gxintro .glx-hint .bar{display:block;width:1px;height:30px;background:linear-gradient(#cdbfa6,transparent);margin:10px auto 0;animation:cue 1.9s var(--ease) infinite;}
@keyframes hintin{to{opacity:.9;}}
.gxintro .glx-title{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:5;text-align:center;color:#f3ebda;pointer-events:none;opacity:0;animation:gtin 1.4s var(--ease) .5s forwards;padding:0 24px;width:100%;}
.gxintro .glx-title .gt-k{font-family:var(--f-mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber-l);}
.gxintro .glx-title .gt-h{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,6vw,68px);line-height:1;margin-top:12px;letter-spacing:-.02em;}
@keyframes gtin{from{opacity:0;}to{opacity:1;}}
.gxintro.starting .glx-title,.gxintro.starting .glx-hint{opacity:0;transition:opacity .5s;}

.galaxy{position:absolute;left:50%;top:50%;width:0;height:0;will-change:transform;}
.glx-img{position:absolute;left:0;top:0;overflow:hidden;border:3px solid #fff;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7);will-change:transform,opacity;}
.glx-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.42) contrast(1.05) brightness(.92);}
.glx-img::after{content:"";position:absolute;inset:0;background:rgba(120,90,50,.12);}
.glx-img.hero-pick{border-color:var(--amber);box-shadow:0 30px 70px -20px rgba(0,0,0,.8),0 0 0 4px rgba(212,137,10,.25);}

/* the flying clone during handoff */
.fly-clone{position:fixed;z-index:2100;overflow:hidden;border:3px solid #fff;box-shadow:0 50px 100px -30px rgba(0,0,0,.75);will-change:transform,width,height,top,left,border-radius;}
.fly-clone img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.42) contrast(1.06) brightness(.74);}

/* ---------------- STICKY HERO HEADER ---------------- */
.hero{position:relative;z-index:1;overflow:hidden;background:var(--ink);
  height:100svh;min-height:0;display:block;opacity:0;}
.hero.live{opacity:1;}
.hero .sth-img{position:absolute;inset:0;z-index:0;}
.hero .sth-img img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) sepia(.42) contrast(1.06) brightness(.7);}
.hero .sth-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,12,8,.55) 0%,rgba(16,12,8,.12) 26%,rgba(16,12,8,.5) 62%,rgba(16,12,8,.94) 100%);}
.hero .sth-grid{position:absolute;inset:0;z-index:1;opacity:.4;mix-blend-mode:overlay;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:64px 64px;}
.hero .sth-content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 var(--gut) clamp(46px,8vh,92px);max-width:var(--maxw);margin:0 auto;will-change:transform,opacity;}
.hero-eyebrow{display:flex;align-items:center;gap:14px;color:var(--amber-l);margin-bottom:16px;font-family:var(--f-mono);font-size:13px;letter-spacing:.2em;}
.hero-eyebrow .ln{height:1px;width:54px;background:var(--amber-l);opacity:.6;}
.hero h1{font-family:var(--f-display);font-weight:900;line-height:.9;letter-spacing:-.005em;font-size:clamp(48px,11vw,150px);color:#fff;}
.hero h1 .blk{display:block;}
.hero-quote-wrap{margin-top:24px;max-width:46ch;}
.hero-rule{width:60px;height:3px;background:var(--amber);margin-bottom:16px;}
.hero-quote{font-family:var(--f-quote);font-style:italic;font-weight:300;font-size:clamp(18px,2.1vw,26px);line-height:1.42;color:#f3ebda;text-shadow:0 2px 24px rgba(0,0,0,.5);}
.hero-quote cite{display:block;font-style:normal;font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:#cdbfa6;margin-top:12px;}
.hero-life{font-family:var(--f-mono);font-size:13.5px;letter-spacing:.04em;color:#d8ccb5;margin-top:18px;}
.hero-life b{color:var(--amber-l);}
/* collapsed-state compact title (shown when header is a slim bar) */
.hero .sth-mini{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:12px;
  padding:0 var(--gut);height:100%;opacity:0;pointer-events:none;}
.hero.collapsed .sth-mini{opacity:1;}
.hero .sth-mini .mt{font-family:var(--f-display);font-weight:800;font-size:clamp(15px,2vw,20px);color:#fff;letter-spacing:.01em;}
.hero .sth-mini .my{font-family:var(--f-mono);font-size:12px;color:var(--amber-l);margin-left:auto;}
.hero.collapsed .sth-content{opacity:0;pointer-events:none;}
.hero.collapsed .sth-img img{object-position:50% 30%;}

.hero-spacer{display:none;}

.scrollcue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#cfc4b2;transition:opacity .3s;}
.hero.collapsed .scrollcue{opacity:0;}
.scrollcue .bar{width:1px;height:38px;background:linear-gradient(#cfc4b2,transparent);animation:cue 1.9s var(--ease) infinite;}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;opacity:0}40%{opacity:1}60%{transform:scaleY(1);transform-origin:top}61%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom;opacity:0}}

/* nav sits over the hero permanently — keep it readable */
.nav{background:transparent!important;box-shadow:none!important;}

/* =================================================================
   v6 HERO — centered, fog-revealed wordmark, high contrast
   ================================================================= */
.hero .sth-img img{filter:grayscale(1) sepia(.42) contrast(1.08) brightness(.5);}  /* darker base so cream text always reads */
.hero .sth-scrim{background:
  radial-gradient(72% 52% at 50% 50%, rgba(12,9,5,.78) 0%, rgba(12,9,5,.42) 55%, transparent 100%),
  linear-gradient(180deg,rgba(12,9,5,.66) 0%,rgba(12,9,5,.34) 30%,rgba(12,9,5,.5) 64%,rgba(12,9,5,.95) 100%);}
.hero .sth-content{position:absolute;inset:0;bottom:auto;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 clamp(20px,5vw,72px);max-width:none;margin:0;
  opacity:0;transform:scale(1.04);will-change:opacity,transform;}
.hero.reveal .sth-content{opacity:1;transform:none;transition:opacity 1.5s ease .2s, transform 2s var(--ease) .2s;}
.hero-eyebrow.center{justify-content:center;color:var(--amber-l);}
.hero-big{font-family:var(--f-display);font-weight:900;line-height:.92;letter-spacing:-.005em;
  font-size:clamp(36px,7.4vw,116px);color:var(--pergament);max-width:18ch;}
.hero-big .blk{display:block;}
.hero-big .accent{color:var(--amber-l);}
.hero-tag{font-family:var(--f-mono);font-size:clamp(11.5px,1.35vw,15px);letter-spacing:.18em;text-transform:uppercase;color:#F0E8D5;opacity:1;margin-top:22px;text-shadow:0 2px 16px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);}

/* fog overlay (pulls in front of header, then clears) — does NOT gray the text */
.hero-fog{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;}
.hero-fog::before{content:"";position:absolute;inset:-12%;background:rgba(214,205,184,.78);}
.hero-fog i{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 42% 42%, rgba(240,234,219,.95), rgba(228,220,201,.6) 46%, transparent 72%);
  filter:blur(24px);will-change:transform,opacity;animation:fogDrift 9s ease-in-out infinite;}
.hero.reveal .hero-fog{opacity:0;transition:opacity 2s ease .1s;}
.hero.reveal .hero-fog::before{opacity:0;transition:opacity 1.6s ease;}
.hero.reveal .hero-fog i{animation:fogAway 2.5s ease forwards;}
@keyframes fogDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,-12px)}}
@keyframes fogAway{to{transform:translateY(-52px) scale(1.7);opacity:0;}}
html[data-theme="dark"] .hero-fog::before{background:rgba(70,84,110,.6);}
html[data-theme="dark"] .hero-fog i{background:radial-gradient(circle at 42% 42%, rgba(150,165,190,.6), rgba(120,135,160,.32) 46%, transparent 72%);}
.hero .sth-mini .mt{max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* mission quote moved into intro section */
.mission-q{font-family:var(--f-quote);font-style:italic;font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--ink);border-left:3px solid var(--amber);padding-left:18px;}
.mission-q cite{display:block;font-style:normal;font-family:var(--f-mono);font-size:12px;color:var(--ink-soft);margin-top:10px;letter-spacing:.02em;}
body.epoch-war .mission-q{color:var(--war-text);}

@media(prefers-reduced-motion:reduce){
  .hero .sth-content{filter:none;}
  .hero-fog{display:none;}
  .hero-fog i{animation:none;}
}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(16,12,8,.5),transparent);opacity:1;transition:opacity .4s;pointer-events:none;}
.nav.solid::after{opacity:0;}
.nav.solid{backdrop-filter:none;}
.nav.compact{background:rgba(16,12,8,.34)!important;backdrop-filter:blur(6px);}

@media(prefers-reduced-motion:reduce){
  .glx-img,.galaxy{animation:none!important;}
}
@media(max-width:880px){
  .brand .wm .l1{font-size:16px;}.brand .wm .l2{font-size:12px;}
}

/* =================================================================
   v7 — first-visit sequence: float-alone → animated logo → fog reveal
   ================================================================= */

/* skip control */
.gxintro .glx-skip{position:absolute;top:max(20px,env(safe-area-inset-top));right:24px;z-index:9;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e7dcc6;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);padding:9px 16px;border-radius:40px;
  cursor:pointer;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .25s,color .25s,opacity .4s;opacity:0;animation:hintin .8s ease 1.4s forwards;}
.gxintro .glx-skip:hover{color:#fff;background:rgba(255,255,255,.16);}
.gxintro.to-fog .glx-skip{opacity:0;pointer-events:none;}

/* overlay washes to cream as the fog rolls in */
.gxintro.to-fog{background:radial-gradient(120% 120% at 50% 46%, rgba(244,237,222,.97) 0%, rgba(230,221,202,.94) 60%, rgba(222,212,191,.92) 100%);transition:background 1.25s ease;}
html[data-theme="dark"] .gxintro.to-fog{background:radial-gradient(120% 120% at 50% 46%, rgba(74,86,110,.95) 0%, rgba(46,55,74,.94) 100%);}

/* ---------- the animated logo ---------- */
.gxintro .glx-logo{position:absolute;left:50%;top:50%;z-index:7;width:clamp(240px,42vw,520px);
  transform:translate(-50%,-50%) scale(.62);opacity:0;pointer-events:none;text-align:center;}
.gxintro .glx-logo.show{animation:logoIn 1.15s cubic-bezier(.22,.61,.36,1) forwards, logoDrift 6.5s ease-in-out 1.15s infinite;}
.gxintro .glx-logo.bye{animation:logoBye 1.2s cubic-bezier(.5,0,.2,1) forwards !important;}
@keyframes logoIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.62)}55%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes logoDrift{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-51%,-54%) scale(1.025)}}
@keyframes logoBye{to{opacity:0;transform:translate(-50%,-128%) scale(1.3)}}

.gxintro .glx-logo svg{width:clamp(180px,30vw,340px);height:auto;overflow:visible;filter:drop-shadow(0 28px 60px rgba(0,0,0,.45));}

/* the real logo image: a soft LIGHT disc behind it (so the dark logo lines read on the dark intro), gentle reveal + float */
.gxintro .glx-logo-art{position:relative;display:inline-block;}
.gxintro .glx-logo-art::before{content:"";position:absolute;left:50%;top:47%;width:150%;height:150%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 42%, rgba(244,236,220,.4) 64%, transparent 75%);
  filter:blur(8px);opacity:0;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.gxintro .glx-logo-art::after{content:"";position:absolute;left:50%;top:47%;width:158%;height:158%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle, transparent 58%, color-mix(in oklab,var(--amber) 38%,transparent) 70%, transparent 78%);
  filter:blur(14px);opacity:0;}
.gxintro .glx-logo.show .glx-logo-art::before{animation:haloIn 1.1s ease .1s forwards;}
.gxintro .glx-logo.show .glx-logo-art::after{animation:haloIn 1.4s ease .3s forwards, haloPulse 4.5s ease-in-out 1.6s infinite;}
@keyframes haloIn{to{opacity:1;}}
@keyframes haloPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.gxintro .glx-logo-img{position:relative;width:clamp(180px,28vw,330px);height:auto;
  opacity:0;transform:scale(.7) translateY(10px);}
.gxintro .glx-logo.show .glx-logo-img{animation:logoImgIn 1.3s cubic-bezier(.18,.8,.3,1) .15s forwards;}
@keyframes logoImgIn{0%{opacity:0;transform:scale(.7) translateY(10px) rotate(-3deg);}60%{opacity:1;}100%{opacity:1;transform:scale(1) translateY(0) rotate(0);}}

/* spelled-out wordmark beneath the mark */
.gxintro .glx-logo-cap{font-family:var(--f-display);font-weight:900;letter-spacing:.01em;
  font-size:clamp(20px,2.8vw,34px);line-height:1.0;color:var(--pergament);margin-top:26px;
  opacity:0;transform:translateY(10px);text-transform:none;}
.gxintro .glx-logo-cap span{display:block;font-size:.62em;font-weight:700;color:var(--amber-l);letter-spacing:.06em;margin-top:6px;}
.gxintro .glx-logo.show .glx-logo-cap{animation:llIn .8s ease 1.0s forwards;}
@keyframes llIn{to{opacity:1;transform:translateY(0);}}

@media(prefers-reduced-motion:reduce){
  .gxintro .glx-logo,.gxintro .glx-logo *{animation:none!important;opacity:1!important;transform:none!important;}
  .gxintro .glx-logo-art::before{opacity:.7!important;}
}
@media(max-width:600px){
  .gxintro .glx-skip{right:14px;}
}