/* ============================================================
   FKOZ SOUND UNIVERSE — components.css
   Reusable components: scroll bar, buttons, cards, player, etc.
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
#scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;z-index:1100;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-electric),var(--elven-glow));
  box-shadow:0 0 10px rgba(74,157,224,.7);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-title);font-weight:600;letter-spacing:2px;text-transform:uppercase;
  font-size:.74rem;padding:.85rem 1.6rem;border-radius:5px;border:1px solid transparent;
  transition:transform .25s, box-shadow .3s, background .3s, border-color .3s, color .3s;
}
.btn svg{width:16px;height:16px;fill:currentColor;}
.btn-primary{background:linear-gradient(135deg,var(--blue-deep),var(--blue-electric));color:var(--white);box-shadow:0 0 24px -6px rgba(74,157,224,.8);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px -4px rgba(74,157,224,1);}
.btn-ghost{background:rgba(13,17,23,.5);border-color:rgba(74,157,224,.4);color:var(--silver-bright);}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--blue-electric);color:var(--white);box-shadow:0 0 22px -6px rgba(74,157,224,.6);}

/* ---------- THE UNIVERSE bio ---------- */
.bio p{margin:0 auto 1.15rem;max-width:680px;color:var(--silver);font-size:1.02rem;}
.bio p:first-of-type{font-style:italic;color:var(--silver-bright);font-size:1.12rem;}
.bio .close{font-family:var(--font-title);font-weight:600;color:var(--silver-bright);letter-spacing:1px;font-style:normal;}

/* ---------- Founder card (Franki) ---------- */
.founder-card{position:relative;width:100%;border:1px solid rgba(74,157,224,.4);border-radius:16px;overflow:hidden;
  box-shadow:0 0 48px -12px rgba(74,157,224,.6);
  transition:transform .25s ease-out, box-shadow .5s ease, border-color .45s ease;
  transform-origin:center;will-change:transform;}
.founder-card:hover{border-color:rgba(74,157,224,.85);box-shadow:0 0 74px -10px rgba(74,157,224,.9);}
.founder-photo{position:relative;margin:0;display:block;overflow:hidden;}
.founder-photo img{display:block;width:100%;height:auto;transition:transform .6s ease;}
.founder-card:hover .founder-photo img{transform:scale(1.05);}
.founder-photo::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,10,13,0) 55%,rgba(8,10,13,.35));
  box-shadow:inset 0 0 42px -8px rgba(74,157,224,.4);transition:box-shadow .5s ease;}
.founder-card:hover .founder-photo::after{box-shadow:inset 0 0 52px -6px rgba(74,157,224,.62);}
@media (prefers-reduced-motion:reduce){
  .founder-card:hover .founder-photo img{transform:none;}
}

/* ---------- WORLD cards ---------- */
.world-card{
  position:relative;display:flex;flex-direction:column;gap:.7rem;
  padding:2rem 1.6rem;border-radius:8px;background:var(--surface);border:var(--hairline);
  transition:transform .3s, box-shadow .3s, border-color .3s;overflow:hidden;
}
.world-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(74,157,224,.12),transparent 70%);opacity:0;transition:opacity .35s;}
.world-card:hover{transform:translateY(-5px);border-color:rgba(74,157,224,.45);box-shadow:0 20px 50px -18px rgba(74,157,224,.5);}
.world-card:hover::before{opacity:1;}
.world-card .wc-rune{width:42px;height:42px;margin-bottom:.4rem;opacity:.85;}
.world-card .wc-rune svg{width:100%;height:100%;}
.world-card h3{font-family:var(--font-title);font-weight:700;color:var(--white);font-size:1.18rem;letter-spacing:1px;position:relative;}
.world-card .wc-meta{font-family:var(--font-title);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue-electric);position:relative;}
.world-card .wc-meta.soon{color:var(--gold-rune);}
.world-card p{font-size:.92rem;color:var(--silver);position:relative;}
.world-card .wc-link{margin-top:auto;font-family:var(--font-title);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--silver-bright);position:relative;padding-top:.6rem;}
.world-card .wc-link span{color:var(--blue-electric);}

/* ---------- TIMELINE acts ---------- */
.timeline{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.6rem;}
.act{border:var(--hairline);background:rgba(8,10,13,.55);backdrop-filter:blur(4px);padding:.85rem 1.2rem;border-radius:4px;min-width:150px;}
.act .act-no{font-family:var(--font-title);font-weight:700;letter-spacing:3px;font-size:.7rem;color:var(--blue-electric);text-transform:uppercase;}
.act .act-name{font-family:var(--font-title);color:var(--silver-bright);font-size:.92rem;margin:.25rem 0;}
.act .act-songs{font-size:.72rem;color:var(--silver);letter-spacing:1px;}
.act.soon{opacity:.5;}
.act.soon .act-no{color:var(--gold-rune);}

/* ---------- CHARACTER label / text / figure ---------- */
.char-label{font-family:var(--font-title);font-weight:600;letter-spacing:4px;text-transform:uppercase;font-size:.85rem;}
.bjorn .char-label{color:var(--blue-electric);}
.aelindra .char-label{color:var(--elven-glow);}
.char-tag{display:inline-block;margin-bottom:1.2rem;font-family:var(--font-title);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold-rune);border:1px solid rgba(200,169,110,.35);padding:.32rem .7rem;border-radius:3px;}
.char-text p{margin-bottom:1.1rem;color:var(--silver-bright);font-size:1.02rem;}
.char-text p:last-child{font-style:italic;color:var(--white);}
.char-line{display:block;}

.char-figure{position:absolute;top:50%;transform:translateY(-50%);width:clamp(210px,30vw,400px);aspect-ratio:1;z-index:2;pointer-events:none;}
.bjorn .char-figure{right:5vw;}
.aelindra .char-figure{left:5vw;}
.char-figure .sigil{width:100%;height:100%;opacity:.45;transform-origin:center;}
.bjorn .sigil{filter:drop-shadow(0 0 28px rgba(74,157,224,.45));}
.aelindra .sigil{filter:drop-shadow(0 0 28px rgba(158,212,190,.45));}
.char-figure.has-portrait{top:auto;bottom:0;transform:none;height:clamp(400px,84vh,820px);width:clamp(250px,36vw,540px);aspect-ratio:auto;background-size:contain;background-repeat:no-repeat;background-position:bottom center;filter:drop-shadow(0 22px 48px rgba(0,0,0,.7));}
.char-figure.has-portrait .sigil{display:none;}
.char-figure.has-portrait::before{content:'';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:88%;aspect-ratio:1;border-radius:50%;z-index:-1;filter:blur(24px);}
.aelindra .char-figure.has-portrait::before{background:radial-gradient(circle,rgba(158,212,190,.28),transparent 62%);}
.bjorn .char-figure.has-portrait::before{background:radial-gradient(circle,rgba(74,157,224,.28),transparent 62%);}

/* ---------- MUSIC: progress + act separators + song cards ---------- */
.progress-wrap{max-width:420px;margin:1.6rem auto 0;}
.progress-label{font-family:var(--font-title);letter-spacing:3px;font-size:.72rem;text-transform:uppercase;color:var(--silver);margin-bottom:.5rem;}
.progress-bar{height:4px;background:var(--iron);border-radius:2px;overflow:hidden;}
.progress-fill{height:100%;width:50%;background:linear-gradient(90deg,var(--blue-glow),var(--blue-electric));box-shadow:0 0 12px var(--blue-electric);}
.act-sep{font-family:var(--font-title);font-weight:600;text-transform:uppercase;letter-spacing:5px;font-size:.8rem;color:var(--gold-rune);text-align:center;margin:3rem 0 1.4rem;}
.act-sep span{display:inline-block;padding:0 1rem;}

.card{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--iron);border:var(--hairline);cursor:pointer;transition:transform .25s ease, box-shadow .3s ease;transform-style:preserve-3d;will-change:transform;}
.card .thumb{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.62;transition:opacity .35s, transform .5s;}
.card .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,13,.25),rgba(8,10,13,.92));}
.card .num{position:absolute;top:.2rem;right:.6rem;font-family:var(--font-display);font-weight:900;font-size:3.4rem;color:rgba(212,228,240,.08);line-height:1;pointer-events:none;}
.card .info{position:absolute;left:0;right:0;bottom:0;padding:.85rem;z-index:2;}
.card .c-name{font-family:var(--font-title);font-weight:600;color:var(--white);font-size:.92rem;line-height:1.25;}
.card .c-act{font-family:var(--font-title);font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--blue-electric);margin-top:.25rem;}
.card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);width:54px;height:54px;border-radius:50%;border:1.5px solid var(--blue-electric);display:flex;align-items:center;justify-content:center;background:rgba(8,10,13,.5);opacity:0;transition:opacity .3s, transform .3s;z-index:3;}
.card .play svg{width:20px;height:20px;margin-left:3px;fill:var(--blue-electric);}
.card:hover .play{opacity:1;transform:translate(-50%,-50%) scale(1);}
.card:hover .thumb{opacity:.85;transform:scale(1.06);}
.card:hover{box-shadow:0 18px 45px -12px rgba(74,157,224,.45);border-color:rgba(74,157,224,.5);}
.card.soon{cursor:default;}
.card.soon .veil{background:rgba(8,10,13,.86);}
.card.soon .c-name{opacity:.45;}
.card.soon .badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-title);letter-spacing:3px;text-transform:uppercase;font-size:.7rem;color:var(--gold-rune);border:1px solid rgba(200,169,110,.4);padding:.4rem .8rem;border-radius:3px;white-space:nowrap;z-index:3;}

/* ---------- WATCH: player ---------- */
.player{max-width:960px;margin:0 auto;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 0 50px -8px rgba(74,157,224,.4);border:var(--hairline-bright);}
.player .ratio{position:relative;padding-top:56.25%;background:#000;}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.facade{position:absolute;inset:0;background-size:cover;background-position:center;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.facade::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(8,10,13,.15),rgba(8,10,13,.65));transition:background .3s;}
.facade:hover::after{background:radial-gradient(ellipse at center,rgba(8,10,13,.05),rgba(8,10,13,.5));}
.big-play{position:relative;z-index:2;width:84px;height:84px;border-radius:50%;border:2px solid var(--blue-electric);background:rgba(8,10,13,.45);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px -4px rgba(74,157,224,.7);transition:transform .25s,box-shadow .3s,background .3s;}
.big-play svg{width:34px;height:34px;margin-left:5px;fill:var(--blue-electric);}
.facade:hover .big-play{transform:scale(1.1);background:rgba(74,157,224,.18);box-shadow:0 0 45px -2px rgba(74,157,224,.9);}
.now-playing{text-align:center;font-family:var(--font-title);letter-spacing:2px;color:var(--silver-bright);margin:1.2rem 0 .4rem;font-size:.95rem;}
.local-note{text-align:center;font-size:.74rem;color:var(--gold-rune);letter-spacing:1px;margin:0 auto 1.6rem;max-width:560px;opacity:.85;}
.local-block{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem;padding:1.6rem;background:var(--deep);}
.local-block .lb-title{font-family:var(--font-title);font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--blue-electric);font-size:.85rem;}
.local-block p{max-width:480px;font-size:.9rem;color:var(--silver);line-height:1.6;margin:0;}
.local-block b{color:var(--silver-bright);font-weight:500;}
.yt-btn{margin-top:.6rem;display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.4rem;border:1px solid var(--blue-electric);border-radius:5px;font-family:var(--font-title);letter-spacing:1px;color:var(--white);font-size:.85rem;transition:all .3s;background:rgba(74,157,224,.08);}
.yt-btn:hover{background:rgba(74,157,224,.22);box-shadow:0 0 22px -4px rgba(74,157,224,.7);}
.thumb-row{display:flex;gap:.85rem;overflow-x:auto;padding:.4rem .2rem 1rem;scroll-snap-type:x mandatory;}
.thumb-row::-webkit-scrollbar{height:6px;}
.thumb-row::-webkit-scrollbar-thumb{background:var(--iron-light);border-radius:3px;}
.vthumb{flex:0 0 200px;scroll-snap-align:start;position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;cursor:pointer;border:var(--hairline);transition:transform .25s, box-shadow .3s;}
.vthumb img{width:100%;height:100%;object-fit:cover;opacity:.75;transition:opacity .3s;}
.vthumb:hover{transform:translateY(-3px);box-shadow:0 10px 25px -8px rgba(74,157,224,.5);}
.vthumb:hover img,.vthumb.active img{opacity:1;}
.vthumb.active{border-color:var(--blue-electric);box-shadow:0 0 18px -2px rgba(74,157,224,.6);}
.vthumb .vt-name{position:absolute;left:0;right:0;bottom:0;padding:.4rem .5rem;font-family:var(--font-title);font-size:.7rem;color:var(--white);background:linear-gradient(transparent,rgba(8,10,13,.9));}

/* ---------- CONNECT: platform buttons ---------- */
.plat{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1rem;border:var(--hairline);border-radius:5px;font-family:var(--font-title);letter-spacing:1.5px;text-transform:uppercase;font-size:.72rem;color:var(--silver-bright);transition:all .3s;background:rgba(13,17,23,.5);}
.plat svg{width:18px;height:18px;fill:currentColor;flex:none;}
.plat:hover{border-color:var(--blue-electric);color:var(--white);box-shadow:0 0 20px -4px rgba(74,157,224,.55);transform:translateY(-2px);}
.plat.support{border-color:rgba(200,169,110,.5);color:var(--gold-rune);background:rgba(200,169,110,.06);}
.plat.support:hover{border-color:var(--gold-rune);color:#f0dcab;box-shadow:0 0 22px -4px rgba(200,169,110,.6);}
.btn-support{background:linear-gradient(135deg,#a07d3e,var(--gold-rune));color:#1a130a;box-shadow:0 0 24px -6px rgba(200,169,110,.7);}
.btn-support:hover{transform:translateY(-2px);box-shadow:0 0 34px -4px rgba(200,169,110,.95);}

/* ============================================================
   Magic mouse trail + ambient hero energy
   ============================================================ */
#magic-trail{position:fixed;inset:0;z-index:9998;pointer-events:none;}
.hero-energy{position:absolute;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);width:152%;aspect-ratio:1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(circle, transparent 30%, rgba(74,157,224,.34) 45%, rgba(74,157,224,.10) 60%, transparent 74%),
    radial-gradient(circle, rgba(127,180,230,.16) 0%, transparent 42%);
  filter:blur(9px);}
.logo-particles{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:170%;height:170%;pointer-events:none;}
#ambient-field{position:fixed;inset:0;z-index:1;pointer-events:none;}
.float-symbol{position:absolute;color:var(--blue-electric);opacity:.14;pointer-events:none;z-index:1;filter:drop-shadow(0 0 6px currentColor);}
.float-symbol svg{width:100%;height:100%;}
.soundwave{position:absolute;left:0;right:0;bottom:18%;height:60px;z-index:1;pointer-events:none;opacity:.22;}
.soundwave svg{width:100%;height:100%;}
.soundwave path{stroke:var(--blue-electric);stroke-width:1.4;fill:none;}
.btn-primary{box-shadow:0 0 24px -8px rgba(74,157,224,.8),0 0 0 0 rgba(74,157,224,0);}

/* ============================================================
   AMBIENT REALMS (home)
   ============================================================ */
.realm{position:relative;padding:2rem 1.6rem;border-radius:10px;background:var(--surface);border:var(--hairline);overflow:hidden;}
.realm::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.6;}
.realm-elven{border-color:rgba(158,212,190,.32);}
.realm-elven::before{background:radial-gradient(120% 80% at 50% 0%,rgba(122,184,160,.16),transparent 60%);}
.realm-nordic{border-color:rgba(74,157,224,.32);}
.realm-nordic::before{background:radial-gradient(120% 80% at 50% 0%,rgba(74,157,224,.16),transparent 60%);}
.realm-head{position:relative;text-align:center;margin-bottom:1.4rem;}
.realm-rune{width:40px;height:40px;margin:0 auto .7rem;}
.realm-rune svg{width:100%;height:100%;}
.realm-tag{font-family:var(--font-title);font-size:.66rem;letter-spacing:3px;text-transform:uppercase;}
.realm-elven .realm-tag{color:var(--elven-glow);}
.realm-nordic .realm-tag{color:var(--blue-electric);}
.realm-head h3{font-family:var(--font-title);font-weight:700;color:var(--white);font-size:1.2rem;letter-spacing:1px;margin:.3rem 0;}
.realm-head p{font-size:.9rem;color:var(--silver);max-width:380px;margin:.4rem auto 0;}
.realm-videos{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;}
.realm-video{position:relative;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background-size:cover;background-position:center;border:var(--hairline);display:flex;align-items:flex-end;transition:transform .25s,box-shadow .3s,border-color .3s;}
.realm-video .rv-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,13,.15),rgba(8,10,13,.85));}
.realm-elven .realm-video{border-color:rgba(158,212,190,.28);}
.realm-nordic .realm-video{border-color:rgba(74,157,224,.28);}
.realm-video .rv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid currentColor;background:rgba(8,10,13,.45);opacity:0;transition:opacity .3s,transform .3s;}
.realm-elven .rv-play{color:var(--elven-glow);}
.realm-nordic .rv-play{color:var(--blue-electric);}
.realm-video .rv-play svg{width:15px;height:15px;margin-left:2px;fill:currentColor;}
.realm-video .rv-label{position:relative;z-index:2;padding:.5rem .6rem;font-family:var(--font-title);font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--silver-bright);}
.realm-video:hover{transform:translateY(-3px);}
.realm-elven .realm-video:hover{border-color:var(--elven-glow);box-shadow:0 12px 30px -12px rgba(158,212,190,.6);}
.realm-nordic .realm-video:hover{border-color:var(--blue-electric);box-shadow:0 12px 30px -12px rgba(74,157,224,.6);}
.realm-video:hover .rv-play{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* ============================================================
   EXPLORE THEIR REALMS (saga page)
   ============================================================ */
.explore-realms .head{text-align:center;margin-bottom:2.2rem;}
.explore-realms .eyebrow{color:var(--blue-electric);}
.explore-realms h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-top:.5rem;}
.er-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:820px;margin:0 auto;}
.er-card{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:1.8rem 1.5rem;border-radius:9px;background:var(--surface);border:var(--hairline);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;text-align:center;}
.er-card .er-rune{width:38px;height:38px;margin:0 auto .4rem;}
.er-card .er-rune svg{width:100%;height:100%;}
.er-card h3{font-family:var(--font-title);font-weight:700;color:var(--white);font-size:1.1rem;letter-spacing:1px;}
.er-card p{font-size:.82rem;color:var(--silver);}
.er-card .er-link{margin-top:.4rem;font-family:var(--font-title);font-size:.66rem;letter-spacing:2px;text-transform:uppercase;}
.er-elven{border-color:rgba(158,212,190,.3);} .er-elven .er-link{color:var(--elven-glow);}
.er-nordic{border-color:rgba(74,157,224,.3);} .er-nordic .er-link{color:var(--blue-electric);}
.er-elven:hover{transform:translateY(-4px);border-color:var(--elven-glow);box-shadow:0 16px 40px -16px rgba(158,212,190,.55);}
.er-nordic:hover{transform:translateY(-4px);border-color:var(--blue-electric);box-shadow:0 16px 40px -16px rgba(74,157,224,.55);}

/* subtle rune seal behind Coming Soon song cards */
.card.soon::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:58%;aspect-ratio:1;z-index:1;opacity:.10;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c8a96e' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3Cpath d='M50 8 V92 M50 20 L34 36 M50 20 L66 36 M50 66 L36 80 M50 66 L64 80'/%3E%3C/g%3E%3C/svg%3E");}