/* ============================================================
   FKOZ SOUND UNIVERSE — layout.css
   Structural layout: nav, hero, section backgrounds, grids, footer, responsive
   ============================================================ */

section{position:relative;}
.section-bg{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform;}
.section-bg::after{content:'';position:absolute;inset:0;}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.6rem;transition:background .4s ease, backdrop-filter .4s ease;
  background:linear-gradient(180deg,rgba(8,10,13,.72) 0%,rgba(8,10,13,0) 100%);
}
nav.scrolled{background:rgba(8,10,13,.88);backdrop-filter:blur(10px);border-bottom:var(--hairline-bright);}
nav .brand{display:flex;align-items:center;gap:.7rem;}
nav .brand img{width:38px;height:38px;filter:drop-shadow(0 0 10px rgba(74,157,224,.75));}
nav .brand span{font-family:var(--font-title);font-weight:700;letter-spacing:3px;font-size:.78rem;color:var(--silver-bright);text-transform:uppercase;text-shadow:0 0 12px rgba(74,157,224,.45);}
nav .links{display:flex;gap:1.6rem;}
nav .links a{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:.74rem;color:#eaf3fc;transition:color .3s,text-shadow .3s;text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 10px rgba(74,157,224,.35);position:relative;}
nav .links a::after{content:'';position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--blue-electric);transition:right .3s;box-shadow:0 0 8px var(--blue-electric);}
nav .links a:hover{color:#fff;text-shadow:0 0 12px rgba(74,157,224,.9);}
nav .links a:hover::after{right:0;}
.nav-toggle{display:none;background:none;border:none;color:var(--silver-bright);font-size:1.5rem;filter:drop-shadow(0 0 6px rgba(74,157,224,.6));}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--black);padding:7rem 1.5rem 5rem;}
.hero-bg{position:absolute;inset:0;background:url('../assets/web_hero.jpg') center/cover no-repeat;opacity:.30;will-change:transform;}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,10,13,.5) 0%,rgba(8,10,13,.95) 75%);}
.hero-glows{position:absolute;inset:0;}
.hero-glows::before,.hero-glows::after{content:'';position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(90px);opacity:.32;}
.hero-glows::before{left:-15vw;top:18%;background:radial-gradient(circle,var(--blue-cold),transparent 70%);}
.hero-glows::after{right:-15vw;bottom:12%;background:radial-gradient(circle,var(--elven-green),transparent 70%);}
#stars{position:absolute;inset:0;}
.hero-content{position:relative;z-index:5;width:100%;max-width:900px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;}
.hero-logo-wrap{position:relative;width:max-content;margin:0 auto 1.8rem;}
.hero-logo{position:relative;z-index:2;display:block;width:clamp(172px,23vw,290px);filter:drop-shadow(0 0 16px rgba(74,157,224,.5)) drop-shadow(0 0 44px rgba(74,157,224,.5));}
.hero h1{font-family:var(--font-display);font-weight:900;color:var(--white);font-size:clamp(2rem,6.2vw,4.8rem);letter-spacing:clamp(2px,1vw,9px);text-indent:clamp(2px,1vw,9px);line-height:1.08;text-shadow:0 0 30px rgba(74,157,224,.4);text-align:center;}
.hero .tagline{font-family:var(--font-title);font-weight:400;text-transform:uppercase;letter-spacing:clamp(2px,.8vw,6px);font-size:clamp(.74rem,1.7vw,1.1rem);color:var(--silver-bright);margin-top:1.3rem;}
.hero .hero-second{font-family:var(--font-body);font-style:italic;font-size:clamp(.85rem,1.6vw,1.05rem);color:var(--silver);margin-top:.8rem;}
.hero .hero-saga{font-family:var(--font-title);font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:clamp(.62rem,1.3vw,.82rem);color:var(--gold-rune);margin-top:.9rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2.4rem;}

.scroll-ind{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.55rem;font-family:var(--font-title);font-size:.6rem;letter-spacing:4px;text-transform:uppercase;color:var(--silver);}

/* ---------- SAGA PAGE HERO ---------- */
.saga-hero .hero-bg{background-image:url('../assets/web_saga.jpg');opacity:.34;}
.saga-hero .hero-glows::before{background:radial-gradient(circle,var(--blue-cold),transparent 70%);}
.saga-hero .hero-glows::after{background:radial-gradient(circle,var(--elven-green),transparent 70%);}
.saga-hero .sh-inner{position:relative;z-index:5;max-width:900px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.saga-hero .sh-eyebrow{font-family:var(--font-title);font-weight:600;letter-spacing:4px;text-transform:uppercase;font-size:.74rem;color:var(--blue-electric);margin-bottom:1rem;}
.saga-hero h1{font-family:var(--font-display);font-weight:900;color:var(--white);font-size:clamp(1.9rem,6vw,4.4rem);letter-spacing:clamp(1px,.6vw,5px);line-height:1.08;text-shadow:0 0 30px rgba(74,157,224,.45);}
.saga-hero .sh-sub{font-family:var(--font-title);letter-spacing:2px;text-transform:uppercase;font-size:clamp(.66rem,1.3vw,.86rem);color:var(--gold-rune);margin-top:1rem;}
.saga-hero .hero-cta{margin-top:2.2rem;}

.back-btn{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-title);font-weight:700;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:#fff;
  padding:.6rem 1.1rem;border:1px solid var(--blue-electric);border-radius:5px;background:rgba(8,12,20,.8);backdrop-filter:blur(8px);
  text-shadow:0 0 10px rgba(74,157,224,.7);box-shadow:0 0 16px -4px rgba(74,157,224,.7),inset 0 0 12px -6px rgba(74,157,224,.5);transition:all .3s;}
.back-btn:hover{border-color:var(--gold-rune);color:#fff;background:rgba(12,16,24,.92);box-shadow:0 0 24px -2px rgba(74,157,224,.9);}

.crack-particles{position:absolute;top:0;bottom:0;left:50%;width:22vw;transform:translateX(-50%);z-index:3;pointer-events:none;}

/* ---------- THE UNIVERSE ---------- */
.about{background:var(--deep);overflow:hidden;}
.about .section-bg{background-image:url('../assets/web_universe.jpg');opacity:.20;}
.about .section-bg::after{background:radial-gradient(ellipse at center,rgba(13,17,23,.6),rgba(13,17,23,.96));}
.about .wrap{position:relative;z-index:2;max-width:1300px;}
.about-cols{display:grid;grid-template-columns:1fr 1.2fr;gap:2.8rem;align-items:center;text-align:left;margin-top:1.8rem;}
.about-cols .bio p{max-width:none;margin-left:0;margin-right:0;}
.about-cols .bio p:first-of-type{margin-top:0;}
.about .seal{width:60px;margin:0 auto 1.4rem;filter:drop-shadow(0 0 14px rgba(74,157,224,.5));}
.about .eyebrow{color:var(--blue-electric);}
.about h2{font-size:clamp(1.8rem,4.5vw,3rem);margin:.6rem 0 1.6rem;}

/* ---------- WORLDS INSIDE FKOZ ---------- */
.worlds{background:var(--black);}
.worlds .head{text-align:center;margin-bottom:2.6rem;}
.worlds .eyebrow{color:var(--blue-electric);}
.worlds h2{font-size:clamp(1.7rem,4.5vw,2.8rem);margin-top:.5rem;}
.worlds .sub{max-width:560px;margin:.9rem auto 0;color:var(--silver);font-size:.98rem;}
.worlds-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}

/* ---------- AMBIENT REALMS ---------- */
.realms{background:var(--deep);}
.realms .head{text-align:center;margin-bottom:2.6rem;}
.realms .eyebrow{color:var(--blue-electric);}
.realms h2{font-size:clamp(1.7rem,4.5vw,2.8rem);margin-top:.5rem;}
.realms .sub{max-width:580px;margin:.9rem auto 0;color:var(--silver);font-size:.98rem;}
.realms-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;}

/* ---------- EXPLORE THEIR REALMS (saga) ---------- */
.explore-realms{background:var(--black);}

/* ---------- FIRST SAGA (split worlds) ---------- */
.saga{height:100vh;min-height:620px;overflow:hidden;background:var(--black);}
.saga-void{position:absolute;inset:0;background:url('../assets/web_saga.jpg') center/cover;}
.saga-void::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,10,13,.35) 0%,rgba(8,10,13,.88) 80%);}
.saga .split{position:absolute;inset:0;display:flex;z-index:2;}
.saga .half{flex:1;position:relative;overflow:hidden;will-change:transform;}
.saga .half::after{content:'';position:absolute;inset:0;}
.saga .left{background:url('../assets/web_bjorn.jpg') center/cover;}
.saga .left::after{background:linear-gradient(90deg,rgba(8,12,20,.78),rgba(20,40,70,.55));}
.saga .right{background:url('../assets/web_aelindra.jpg') center/cover;}
.saga .right::after{background:linear-gradient(270deg,rgba(8,16,14,.78),rgba(30,60,50,.5));}
.saga .saga-content{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.5rem;}
.saga .saga-eyebrow{font-family:var(--font-title);font-weight:600;letter-spacing:4px;text-transform:uppercase;font-size:.72rem;color:var(--blue-electric);margin-bottom:.7rem;}
.saga .saga-name{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:clamp(1.6rem,4.5vw,3rem);margin-bottom:1.4rem;text-shadow:0 0 30px rgba(74,157,224,.45);}
.saga .saga-quote{font-family:var(--font-title);font-weight:400;font-style:italic;color:var(--white);font-size:clamp(1.05rem,2.4vw,1.7rem);max-width:720px;line-height:1.6;text-shadow:0 2px 24px rgba(0,0,0,.8);}

/* ---------- CHARACTERS ---------- */
.character{min-height:100vh;display:flex;align-items:center;overflow:hidden;}
.character .section-bg{opacity:1;}
.bjorn{justify-content:flex-start;}
.bjorn .section-bg{background-image:url('../assets/web_bjorn.jpg');}
.bjorn .section-bg::after{background:linear-gradient(90deg,rgba(8,14,24,.92) 30%,rgba(20,45,80,.45));box-shadow:inset 30px 0 80px -20px rgba(74,157,224,.5);}
.aelindra{justify-content:flex-end;}
.aelindra .section-bg{background-image:url('../assets/web_aelindra.jpg');}
.aelindra .section-bg::after{background:linear-gradient(270deg,rgba(8,18,15,.92) 30%,rgba(40,80,65,.4));box-shadow:inset -30px 0 80px -20px rgba(158,212,190,.45);}
.character .char-box{position:relative;z-index:3;max-width:560px;padding:clamp(2rem,6vw,5rem);}
.aelindra .char-box{text-align:right;}
.character h2{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:clamp(2.2rem,6vw,4rem);margin:.5rem 0 1.5rem;line-height:1;}
.bjorn h2{text-shadow:0 0 30px rgba(74,157,224,.5);}
.aelindra h2{text-shadow:0 0 30px rgba(158,212,190,.5);}

/* ---------- MUSIC ---------- */
.music{background:var(--black);}
.music .head{text-align:center;margin-bottom:1.2rem;}
.music .eyebrow{color:var(--blue-electric);}
.music h2{font-size:clamp(1.7rem,4.5vw,2.8rem);margin-top:.5rem;}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}

/* ---------- WATCH ---------- */
.videos{background:var(--deep);}
.videos .head{text-align:center;margin-bottom:2.2rem;}
.videos .eyebrow{color:var(--blue-electric);}
.videos h2{font-size:clamp(1.7rem,4.5vw,2.8rem);margin-top:.5rem;}

/* ---------- CONNECT ---------- */
.connect{background:var(--black);overflow:hidden;}
.connect .section-bg{background-image:url('../assets/web_connect.jpg');opacity:.28;}
.connect .section-bg::after{background:radial-gradient(ellipse at center,rgba(8,10,13,.55),rgba(8,10,13,.95));}
.connect .wrap{position:relative;z-index:2;max-width:740px;text-align:center;}
.connect h2{font-size:clamp(1.7rem,4.5vw,2.8rem);}
.connect .sub{font-family:var(--font-title);letter-spacing:2px;color:var(--silver);margin:.7rem 0 2rem;font-size:.95rem;}
.connect .clogo{width:84px;margin:0 auto 2.2rem;filter:drop-shadow(0 0 22px rgba(74,157,224,.65));}
.platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:620px;margin:0 auto;}

/* ---------- FOOTER ---------- */
footer{background:var(--deep);border-top:var(--hairline);padding:3rem 1.5rem 2.4rem;text-align:center;}
footer .flogo{width:48px;margin:0 auto 1.2rem;filter:drop-shadow(0 0 12px rgba(74,157,224,.5));}
footer .fbrand{font-family:var(--font-title);font-weight:600;letter-spacing:3px;text-transform:uppercase;font-size:.8rem;color:var(--silver-bright);}
footer .flinks{display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;margin:1.2rem 0;}
footer .flinks a{font-family:var(--font-title);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--silver);transition:color .3s;}
footer .flinks a:hover{color:var(--blue-electric);}
footer .copy{font-size:.72rem;color:var(--silver);letter-spacing:1px;}
footer .saga-line{font-family:var(--font-title);font-style:italic;color:var(--silver-bright);letter-spacing:2px;margin-top:.6rem;font-size:.82rem;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .worlds-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;}
}
@media(max-width:768px){
  nav .links{
    position:fixed;top:0;right:0;height:100vh;width:72%;max-width:300px;
    flex-direction:column;justify-content:center;gap:1.8rem;padding:2rem;
    background:rgba(8,10,13,.97);backdrop-filter:blur(12px);
    transform:translateX(100%);transition:transform .4s ease;
  }
  nav .links.open{transform:translateX(0);}
  nav .links a{font-size:.85rem;}
  .nav-toggle{display:block;z-index:1001;}
  .grid{grid-template-columns:repeat(2,1fr);}
  .platforms{grid-template-columns:repeat(2,1fr);}
  .realms-grid{grid-template-columns:1fr;}
  .er-grid{grid-template-columns:1fr;}
  .about-cols{grid-template-columns:1fr;text-align:center;gap:1.8rem;}
  .about-cols .bio p{margin-left:auto;margin-right:auto;}
  .founder-card{max-width:560px;margin:0 auto;}
  .saga .saga-quote{font-size:1.1rem;}
  .character .char-box{max-width:100%;}
  .bjorn .section-bg::after{background:linear-gradient(180deg,rgba(8,14,24,.6),rgba(8,14,24,.93));}
  .aelindra .section-bg::after{background:linear-gradient(180deg,rgba(8,18,15,.6),rgba(8,18,15,.93));}
  .aelindra{justify-content:flex-start;}
  .aelindra .char-box{text-align:left;}
}
@media(max-width:430px){
  .grid{grid-template-columns:repeat(2,1fr);gap:.6rem;}
  .hero h1{font-size:1.8rem;}
  .hero-cta{flex-direction:column;align-items:stretch;}
}