/* Fonts from the game (Project Zulu assets/fonts, ba_theme_util.gd). All SIL OFL 1.1, see assets/fonts/OFL_*.txt.
   Cinzel Decorative = titles, Cardo = body/HUD, UnifrakturCook = blackletter accents. Unmodified, only converted to woff2. */
@font-face{font-family:'Cinzel Decorative';src:url(../assets/fonts/CinzelDecorative-Regular.woff2) format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:'Cinzel Decorative';src:url(../assets/fonts/CinzelDecorative-Bold.woff2) format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Cardo';src:url(../assets/fonts/Cardo-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'UnifrakturCook';src:url(../assets/fonts/UnifrakturCook-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--black:#0a0908;--coal:#141210;--ash:#8d877e;--bone:#d9d2c3;--ember:#b8452c;--ember2:#e06a3a;--gold:#b08d4a;--gold2:#d9b86a;
--serif:'Cinzel Decorative','Trajan Pro',Georgia,serif;--body:'Cardo','Palatino Linotype',Georgia,serif;--black-letter:'UnifrakturCook','Old English Text MT',Georgia,serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--bone);font:400 1.2rem/1.6 var(--body);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3,.eyebrow,.btn,.nav-logo,.nav-links a{font-family:var(--serif);letter-spacing:.12em}
h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.15;color:var(--bone);text-transform:uppercase;margin:.3em 0 .6em}
h3{font-size:1.15rem;text-transform:uppercase;color:var(--gold2)}
.eyebrow{color:var(--ember2);font-size:.8rem;text-transform:uppercase;letter-spacing:.35em}
section{padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,4rem);position:relative}
.sec-head{text-align:center;max-width:46rem;margin:0 auto 3rem}
.sec-head p:last-child{color:var(--ash)}
/* grain */
.grain{pointer-events:none;position:fixed;inset:-50%;z-index:100;opacity:.07;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1rem clamp(1rem,4vw,3rem);transition:background .4s}
.nav.solid{background:rgba(10,9,8,.92);border-bottom:1px solid #2a2520}
.nav-logo{font-weight:900;letter-spacing:.3em;text-decoration:none;font-size:1rem;color:var(--bone)}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-links a{text-decoration:none;font-size:.75rem;text-transform:uppercase;color:var(--ash);transition:color .3s}
.nav-links a:hover{color:var(--gold2)}
.nav-toggle{display:none;background:none;border:0;color:var(--bone);font-size:1.5rem;cursor:pointer}
/* buttons */
.btn{display:inline-block;padding:.95em 2.2em;border:1px solid var(--gold);background:linear-gradient(180deg,#5a1a10,#2a0c07);color:var(--gold2)!important;text-decoration:none;text-transform:uppercase;font-size:.8rem;font-weight:700;cursor:pointer;transition:box-shadow .4s,transform .2s;box-shadow:inset 0 0 0 3px rgba(10,9,8,.6)}
.btn:hover{box-shadow:inset 0 0 0 3px rgba(10,9,8,.6),0 0 24px rgba(224,106,58,.45);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:#5b5246;color:var(--bone)!important}
.btn-sm{padding:.6em 1.2em}
/* hero */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:0}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) contrast(1.1) saturate(.8);animation:slowzoom 30s ease-out forwards}
@keyframes slowzoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.fog{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--black) 85%),linear-gradient(transparent 55%,var(--black));}
.fog::after{content:"";position:absolute;inset:0;background:url(../assets/img/gates-sm.webp) center/cover;opacity:.08;filter:blur(30px);animation:drift 40s linear infinite alternate}
@keyframes drift{to{transform:translateX(6%)}}
#embers{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;padding:6rem 1rem 4rem}
.kicker{font-family:var(--serif);letter-spacing:.5em;text-transform:uppercase;font-size:.75rem;color:var(--ash)}
.logo{font-size:clamp(3rem,11vw,8.5rem);font-weight:900;letter-spacing:.14em;line-height:.95;margin:.25em 0;
background:linear-gradient(180deg,#efe6d2 10%,#b08d4a 55%,#5e4520);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 30px rgba(0,0,0,.9))}
.logo span{display:block;font-size:.55em;letter-spacing:.42em;margin-right:-.42em}
.tagline{font-style:italic;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--bone);margin-bottom:2.2rem}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scroll-cue{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);color:var(--gold);text-decoration:none;font-size:1.4rem;animation:bob 2.4s ease-in-out infinite;z-index:2}
@keyframes bob{50%{transform:translate(-50%,8px)}}
/* pitch */
.pitch{text-align:center;max-width:56rem;margin:0 auto}
.lede{font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.55;margin-top:1.2rem}
.lede em{color:var(--ember2)}
/* trailer */
.trailer{padding-top:0}
.video-frame{max-width:1100px;margin:0 auto;aspect-ratio:16/9;background:center/cover;position:relative;border:1px solid #3a3229;display:grid;place-items:center;filter:saturate(.8)}
.video-frame::before{content:"";position:absolute;inset:0;background:rgba(10,9,8,.5)}
.play{position:relative;width:84px;height:84px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold2);font-size:1.6rem;padding-left:6px;transition:box-shadow .4s}
.video-frame:hover .play{box-shadow:0 0 40px rgba(224,106,58,.5)}
.video-label{position:absolute;bottom:1.2rem;font-family:var(--serif);letter-spacing:.3em;font-size:.75rem;text-transform:uppercase;color:var(--ash)}
/* world */
.world{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;max-width:1300px;margin:0 auto}
.world-art img{width:100%;border:1px solid #2e2822;filter:saturate(.85)}
.world-copy p{margin-bottom:1rem;color:#c6bfb1}
.quote{font-style:italic;color:var(--gold2)!important;border-left:2px solid var(--ember);padding-left:1rem;margin-top:1.5rem}
/* factions */
.factions{background:linear-gradient(var(--black),var(--coal) 30%,var(--coal) 70%,var(--black))}
.faction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto}
.faction{border:1px solid #2e2822;border-top:2px solid var(--accent);padding:2.4rem 1.8rem;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);text-align:center;transition:transform .4s,box-shadow .4s}
.faction:hover{transform:translateY(-4px);box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px var(--accent)}
.sigil{font-size:2.6rem;color:var(--accent);margin-bottom:.8rem;filter:grayscale(.3)}
.faction h3{color:var(--accent)}
.seat{font-family:var(--serif);font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ash);margin:.4rem 0 1.2rem}
.faction p{font-size:1.08rem}
.classes{margin-top:1.2rem;font-style:italic;color:var(--gold2)}
.convergence{text-align:center;margin-top:3rem;font-size:1.3rem;color:var(--ash)}
.convergence strong{color:var(--ember2);font-weight:600}
/* limbo */
.limbo{padding:0;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden}
.limbo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.limbo::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--black),transparent 30%,transparent 50%,var(--black))}
.limbo-copy{position:relative;z-index:2;padding:4rem clamp(1.2rem,5vw,4rem);max-width:38rem}
/* descent */
.circles{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:1300px;margin:0 auto}
.circle{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:zoom-in;background:#000;border:0;padding:0;color:inherit}
.circle img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.7);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.circle:hover img,.circle:focus-visible img{transform:scale(1.06);filter:brightness(.9) saturate(1)}
.circle .label{position:absolute;inset:auto 0 0 0;padding:1rem 1.2rem;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.circle .roman{font-family:var(--serif);color:var(--ember2);font-size:.75rem;letter-spacing:.3em}
.circle .name{display:block;font-family:var(--serif);font-size:1.25rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.circle .line{display:block;font-style:italic;font-size:1rem;color:var(--ash);max-height:0;opacity:0;transition:max-height .5s,opacity .5s}
.circle:hover .line,.circle:focus-visible .line{max-height:3em;opacity:1}
/* features */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1300px;margin:0 auto}
.feat{border-top:1px solid #3a3229;padding-top:1.5rem}
.num{font-family:var(--serif);color:var(--ember);font-size:2rem;display:block;margin-bottom:.4rem}
.feat p{color:#bdb6a8;margin-top:.6rem;font-size:1.08rem}
/* gallery */
.gallery{columns:3 320px;column-gap:6px;max-width:1300px;margin:0 auto}
.gallery button{display:block;width:100%;margin-bottom:6px;border:0;padding:0;background:#000;cursor:zoom-in;overflow:hidden}
.gallery img{width:100%;transition:transform .8s,filter .5s;filter:brightness(.8)}
.gallery button:hover img{transform:scale(1.04);filter:brightness(1)}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(5,4,3,.95);display:flex;align-items:center;justify-content:center;animation:fade .3s}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.lightbox figure{max-width:92vw;max-height:88vh;text-align:center}
.lightbox img{max-height:80vh;max-width:92vw;margin:auto;border:1px solid #3a3229}
.lightbox figcaption{font-family:var(--serif);letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;color:var(--gold2);margin-top:1rem}
.lightbox button{position:absolute;background:none;border:0;color:var(--bone);font-size:3rem;cursor:pointer;padding:1rem;opacity:.7}
.lightbox button:hover{opacity:1;color:var(--ember2)}
.lb-close{top:.5rem;right:1rem}.lb-prev{left:.5rem}.lb-next{right:.5rem}
/* signup */
.signup{text-align:center;background:radial-gradient(ellipse at center bottom,rgba(184,69,44,.22),transparent 65%),var(--black);border-top:1px solid #1f1b17}
.signup-inner{max-width:36rem;margin:0 auto}
.signup p{color:var(--ash);margin-bottom:1.8rem}
.news{display:flex;margin-top:2rem;border:1px solid #3a3229}
.news input{flex:1;min-width:0;background:#0f0d0b;border:0;color:var(--bone);font:inherit;padding:.8rem 1rem}
.news input:focus{outline:1px solid var(--gold)}
.news .btn{box-shadow:none}
.form-msg{min-height:1.6em;margin-top:1rem;font-style:italic;color:var(--gold2)!important}
/* footer */
.footer{padding:3rem 1.5rem;text-align:center;border-top:1px solid #1f1b17;color:var(--ash)}
.footer nav{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin:1rem 0;font-family:var(--serif);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.footer nav a{text-decoration:none}.footer nav a:hover{color:var(--gold2)}
.fine{font-size:.9rem}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s ease}
.reveal.in{opacity:1;transform:none}
/* responsive */
@media (max-width:960px){
 .world{grid-template-columns:1fr}
 .faction-grid{grid-template-columns:1fr}
 .feat-grid{grid-template-columns:1fr 1fr}
 .circles{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .nav-toggle{display:block}
 .nav-links{position:fixed;top:3.6rem;left:0;right:0;flex-direction:column;background:rgba(10,9,8,.97);padding:1.5rem;gap:1.2rem;transform:translateY(-130%);transition:transform .4s;border-bottom:1px solid #2a2520}
 .nav-links.open{transform:none}
 .feat-grid,.circles{grid-template-columns:1fr}
 .circle .line{max-height:3em;opacity:1}
 .news{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}#embers{display:none}}
.circle .roman,.num{font-family:var(--black-letter);font-weight:700;letter-spacing:.08em}
.kicker{font-family:var(--body);font-weight:400;font-size:.95rem;letter-spacing:.32em;text-transform:uppercase;color:#a79e8f}/* Cardo, not blackletter: UnifrakturCook's k reads as f */
.circle .roman{font-size:1rem;text-transform:none}
button{font-family:inherit}.circle .line{font-family:var(--body)}
/* a11y: skip link, placeholder contrast, touch devices show circle captions */
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--black);color:var(--gold2);padding:.8rem 1.2rem;border:1px solid var(--gold)}
.skip:focus{left:0}
.news input::placeholder{color:#8d877e;opacity:1}
@media (hover:none){.circle .line{max-height:3em;opacity:1}}

/* ---- hero logo: flaming title (matches the in-game title screen) ----
   In game: black Cinzel Decorative glyphs with a molten-orange rim, a wall of flame rising behind the whole word,
   a thin layer of licks in front of the letter feet, and rising embers.
   Fire is drawn by js/logo-fire.js (WebGL port of the in-game shader). Everything below is the no-JS / no-WebGL /
   reduced-motion baseline: a static ember glow. Add ?logo=classic to the URL for the original gold wordmark. */
.logo-fire{display:none}
.hero.flame .logo{display:inline-block;position:relative;font-size:clamp(2.7rem,6.4vw,6.2rem);font-weight:700;letter-spacing:.03em;line-height:.95;margin:.55em 0 .45em;
 background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#050302;filter:none;
 -webkit-text-stroke:.074em #b82904;paint-order:stroke fill;text-shadow:0 .053em .09em rgba(0,0,0,.85);isolation:isolate}
.hero.flame .logo span{display:inline;font-size:1em;letter-spacing:inherit;margin:0 0 0 .3em}
/* baseline glow (shown until the canvas fire is running, and as the static fallback) */
.hero.flame .logo::before{content:"";position:absolute;left:-.75em;right:-.75em;top:-1.7em;bottom:-.75em;z-index:-1;pointer-events:none;
 background:
  radial-gradient(ellipse 50% 16% at 50% 62%,rgba(255,206,96,.80),rgba(255,206,96,0) 100%),
  radial-gradient(ellipse 54% 34% at 50% 64%,rgba(255,112,22,.78),rgba(255,112,22,0) 100%),
  radial-gradient(ellipse 58% 52% at 50% 70%,rgba(150,28,4,.62),rgba(150,28,4,0) 100%);
 filter:blur(6px);animation:ba-glow 3.2s ease-in-out infinite alternate}
@keyframes ba-glow{from{opacity:.82;transform:scaleY(.96)}to{opacity:1;transform:scaleY(1.04)}}
.hero.flame.fire-on .logo::before{opacity:0;animation:none}
.hero.flame .logo-fire{display:block;position:absolute;left:-.75em;right:-.75em;top:-1.7em;bottom:-.75em;width:calc(100% + 1.5em);height:calc(100% + 2.45em);pointer-events:none;-webkit-text-stroke:0}
.hero.flame .logo-fire-back{z-index:-1}
.hero.flame .logo-fire-front{z-index:2}
@media (max-width:640px){
 .hero.flame .logo{font-size:clamp(2.6rem,15.4vw,4.8rem);margin:.9em 0 .55em}
 .hero.flame .logo span{display:block;margin:0}
}
@media (prefers-reduced-motion:reduce){.hero.flame .logo::before{animation:none;opacity:.95}}
.hero.flame .kicker{margin-bottom:2.2rem}
@media (max-width:640px){.hero.flame .kicker{margin-bottom:1.6rem}}
/* classes: typographic cards, no portraits (art is environments only) */
.classes-sec{max-width:1300px;margin:0 auto}
.class-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.class-card{flex:0 1 calc(25% - 1.15rem);min-width:15rem;border:1px solid #2e2822;border-top:2px solid var(--gold);padding:2rem 1.5rem 1.8rem;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);text-align:center;transition:transform .4s,box-shadow .4s,opacity 1.1s ease}
.class-card:hover{transform:translateY(-4px);box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px var(--gold)}
.class-num{font-family:var(--serif);font-weight:700;letter-spacing:.2em;font-size:1.1rem;color:var(--ember);display:block;margin-bottom:.5rem}/* Cinzel numerals, no blackletter (UnifrakturCook's k reads as f) */
.class-desc{font-size:1.08rem;color:#c6bfb1;margin:.9rem 0 1.2rem}
.class-arms{font-family:var(--serif);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);border-top:1px solid #2a2520;padding-top:1rem;line-height:1.9}
@media (max-width:960px){.class-card{flex-basis:calc(50% - .75rem)}}
@media (max-width:640px){.class-card{flex-basis:100%}}

/* placeholder concept images (generated; to be replaced by live game screenshots, same filenames) */
.card-img{margin:-2rem -1.5rem 1.4rem;aspect-ratio:16/9;background:#14110e;overflow:hidden;border-bottom:1px solid #2a2520}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) brightness(.92);transition:transform .8s ease,filter .5s}
.class-card:hover .card-img img{transform:scale(1.04);filter:saturate(1) brightness(1)}

/* locations: placeholder concept images (environments only, no figures) */
.locations-sec{max-width:1300px;margin:0 auto}
.loc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.loc-card{flex:0 1 calc(25% - 1.15rem);min-width:15rem;border:1px solid #2e2822;border-top:2px solid var(--gold);padding:2rem 1.5rem 1.8rem;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);text-align:center;transition:transform .4s,box-shadow .4s,opacity 1.1s ease}
.loc-card:hover{transform:translateY(-4px);box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 0 1px var(--gold)}
.loc-card:hover .card-img img{transform:scale(1.04);filter:saturate(1) brightness(1)}
.loc-desc{font-size:1.02rem;color:#c6bfb1;margin:.9rem 0 0}
@media (max-width:960px){.loc-card{flex-basis:calc(50% - .75rem)}}
@media (max-width:640px){.loc-card{flex-basis:100%}}