/* BASH — shared layout for vitrine pages (home, faq, socials, 404).
   Loaded before each page's inline <style>, so page rules still win. */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;height:100dvh;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Chakra Petch",system-ui,sans-serif;
    overflow:hidden;
    opacity:0;
    transition:opacity .35s ease;
  }
  body.page-loaded{
    opacity:1;
  }
  .menu-btn{
    position:absolute;top:calc(max(18px,4vw) + env(safe-area-inset-top,0px));left:calc(max(18px,4vw) + env(safe-area-inset-left,0px));
    z-index:20;display:flex;flex-direction:column;justify-content:center;gap:max(5px,0.45vw);
    width:max(24px,2.3vw);padding:max(10px,0.9vw) max(3px,0.35vw);background:none;border:none;cursor:pointer;
  }
  .menu-btn span{
    display:block;height:max(2.5px,0.2vw);width:100%;border-radius:2px;
    background:var(--ink);opacity:.85;
    transition:transform .25s ease, opacity .2s ease, background .2s ease;
  }
  .menu-btn:hover span{opacity:1;background:var(--purple);}
  .menu-btn:focus-visible{outline:2px solid var(--purple);outline-offset:4px;}
  .menu-btn.intro-pulse{border-radius:8px;animation:menuPulse 1.4s ease-out 3;}
  @keyframes menuPulse{
    0%{ box-shadow:0 0 0 0 rgba(107,33,168,.55); }
    70%{ box-shadow:0 0 0 14px rgba(107,33,168,0); }
    100%{ box-shadow:0 0 0 0 rgba(107,33,168,0); }
  }
  .menu-btn.is-open span:nth-child(1){ transform:translateY(calc(max(5px,0.45vw) + max(2.5px,0.2vw))) rotate(45deg); }
  .menu-btn.is-open span:nth-child(2){ opacity:0; }
  .menu-btn.is-open span:nth-child(3){ transform:translateY(calc(-1 * (max(5px,0.45vw) + max(2.5px,0.2vw)))) rotate(-45deg); }

  .top-socials{
    position:absolute;top:calc(max(18px,4vw) + env(safe-area-inset-top,0px));right:calc(max(18px,4vw) + env(safe-area-inset-right,0px));
    z-index:20;display:flex;align-items:center;gap:max(11px,1.4vw);
    transition:opacity .25s ease;
  }
  .top-socials a{
    color:var(--ink);opacity:.8;display:flex;
    transition:opacity .18s ease, color .18s ease, transform .18s ease;
  }
  .top-socials a:hover, .top-socials a:focus-visible{
    opacity:1;color:var(--purple);transform:translateY(-2px);
  }
  .top-socials svg{width:max(15px,1.5vw);height:max(15px,1.5vw);display:block;}
  .stage.menu-open .top-socials{
    opacity:0;pointer-events:none;
  }
  .menu-backdrop{
    position:fixed;top:0;left:0;right:0;
    height:calc(var(--vh, 1vh) * 100);height:100dvh;z-index:9;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
  }
  .stage.menu-open .menu-backdrop{
    opacity:1;pointer-events:auto;
  }

  .side-menu{
    position:fixed;top:0;left:0;
    height:calc(var(--vh, 1vh) * 100);height:100dvh;
    width:100vw;
    z-index:10;
    overflow:hidden;
    transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.65,0,.35,1);
  }
  .stage.menu-open .side-menu{ transform:translateX(0); }
  .side-menu-bg{
    position:absolute;inset:0;
    top:-35.1%;
    width:236%;height:135.1%;
    object-fit:fill;
    pointer-events:none;
    z-index:0;
  }
  .side-menu-content{
    position:relative;z-index:1;
    height:100%;
    display:flex;flex-direction:column;
    justify-content:center;
    padding:clamp(30px,6vh,60px) clamp(24px,7vw,90px);
  }

  .menu-wordmark{
    display:block;
    font-family:"Permanent Marker",cursive;
    font-size:max(3.6rem,10vw);
    line-height:.85;
    color:#ffffff;
    text-decoration:none;
    margin:0 0 max(40px,8vh);
    transform:rotate(-3deg) translateY(clamp(-60px,-6vh,-30px));
    text-shadow:0 6px 0 rgba(0,0,0,.4);
    filter:drop-shadow(0 0 22px rgba(255,255,255,.3));
    transition:filter .18s ease, color .18s ease, transform .15s ease;
  }
  .menu-wordmark:hover, .menu-wordmark:focus-visible{
    color:#e9d6ff;
    filter:drop-shadow(0 0 30px rgba(255,255,255,.5));
    transform:rotate(-3deg) translateY(clamp(-60px,-6vh,-30px)) scale(1.05);
  }

  .menu-links{
    list-style:none;margin:0;padding:0;
    display:flex;flex-direction:column;gap:clamp(16px,3vh,30px);
  }
  .menu-links a{
    font-family:"Permanent Marker",cursive;
    font-size:max(2.4rem,7vw);
    color:#ffffff;
    text-decoration:none;
    display:inline-block;
    text-shadow:0 6px 0 rgba(0,0,0,.4);
    filter:drop-shadow(0 0 22px rgba(255,255,255,.3));
    transition:color .15s ease, transform .15s ease, filter .18s ease;
  }
  .menu-links li:nth-child(1) a{ transform:rotate(-2deg); }
  .menu-links li:nth-child(2) a{ transform:rotate(1.5deg); }
  .menu-secret{
    position:absolute;left:clamp(24px,7vw,90px);bottom:max(16px,2vh);
    font-family:"Chakra Petch",system-ui,sans-serif;
    font-size:.68rem;
    color:rgba(244,241,236,.55);
    text-decoration:none;
    letter-spacing:.02em;
    transition:color .2s ease;
  }
  .menu-secret:hover, .menu-secret:focus-visible{
    color:#ffffff;
  }
  .menu-links li a:hover, .menu-links li a:focus-visible{
    color:#e9d6ff;
    filter:drop-shadow(0 0 30px rgba(255,255,255,.5));
    transform:scale(1.05) rotate(0deg);
  }
  .signature{
    position:absolute;bottom:calc(max(14px,2.4vh) + env(safe-area-inset-bottom,0px));left:50%;
    transform:translateX(-50%);
    z-index:5;
    font-family:"Permanent Marker",cursive;
    font-size:max(.68rem,1.15vw);
    color:rgba(244,241,236,.45);
    letter-spacing:.04em;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
  }
  .stage.menu-open .signature{
    z-index:11;
  }

  @media (max-width: 720px){
    .side-menu{
      width:100vw;
    }
    .side-menu-bg{
      width:100%;
    }
    .side-menu-content{
      padding:clamp(56px,var(--vh, 1vh) * 12,100px) 26px clamp(24px,var(--vh, 1vh) * 6,40px);
      overflow-y:auto;
    }
    .menu-wordmark{ font-size:clamp(2.4rem,var(--vh, 1vh) * 9,5rem); margin-bottom:clamp(24px,var(--vh, 1vh) * 6,64px); }
    .menu-links a{ font-size:clamp(1.8rem,var(--vh, 1vh) * 7,3.8rem); }
  }

/* ===================== Design v2 — micro-interactions ===================== */

/* Slow purple fog drifting behind the content. */
.stage::after{
  content:"";position:absolute;inset:-10%;z-index:1;pointer-events:none;
  background:
    radial-gradient(40% 30% at 22% 72%, rgba(107,33,168,.12), transparent 70%),
    radial-gradient(35% 28% at 72% 22%, rgba(58,14,92,.16), transparent 70%);
  animation:fogDrift 26s ease-in-out infinite alternate;
}
@keyframes fogDrift{
  from{ transform:translate3d(-3%,2%,0) scale(1); }
  to{ transform:translate3d(3%,-2%,0) scale(1.08); }
}

/* Text for screen readers only (e.g. the word behind the split neon letters). */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Neon wordmark: letters flicker on one by one, then an occasional buzz. */
.neon-letter{
  display:inline-block;
  animation:neonOn 1.1s steps(1,end) both;
  animation-delay:calc(.35s + var(--i,0) * .13s);
}
@keyframes neonOn{
  0%{ opacity:.06; }
  12%{ opacity:1; }
  18%{ opacity:.15; }
  26%{ opacity:1; }
  32%{ opacity:.35; }
  40%,100%{ opacity:1; }
}
[data-neon]{ animation:neonBuzz 9s linear 2.5s infinite; }
@keyframes neonBuzz{
  0%,91%,93.5%,96%,100%{ opacity:1; }
  92%,95%{ opacity:.55; }
}
.wordmark-tag:hover [data-neon]{ animation:neonGlitch .45s steps(2,end) 1; }
@keyframes neonGlitch{
  0%{ transform:translate(0); text-shadow:-3px 0 rgba(254,44,85,.7), 3px 0 rgba(37,244,238,.7); }
  33%{ transform:translate(2px,-1px); text-shadow:3px 0 rgba(254,44,85,.7), -3px 0 rgba(37,244,238,.7); }
  66%{ transform:translate(-2px,1px); text-shadow:-2px 0 rgba(254,44,85,.6), 2px 0 rgba(37,244,238,.6); }
  100%{ transform:translate(0); }
}

/* Character: soft purple aura that breathes, plus pointer parallax. */
.character::before{
  content:"";position:absolute;inset:12% 8% 4%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(139,63,209,.32), rgba(107,33,168,.12) 55%, transparent);
  filter:blur(28px);
  animation:auraBreath 5.5s ease-in-out infinite;
}
@keyframes auraBreath{
  0%,100%{ opacity:.55; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1.04); }
}
[data-parallax] img{
  translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -9px);
}

/* Menu: entries cascade in when it opens, neon glow on hover. */
.stage.menu-open .side-menu .menu-wordmark,
.stage.menu-open .side-menu .menu-secret{ animation:menuFade .5s ease .12s backwards; }
.stage.menu-open .side-menu .menu-secret{ animation-delay:.42s; }
.stage.menu-open .side-menu .menu-links li{ animation:menuIn .55s var(--ease-out) backwards; }
.stage.menu-open .side-menu .menu-links li:nth-child(1){ animation-delay:.2s; }
.stage.menu-open .side-menu .menu-links li:nth-child(2){ animation-delay:.27s; }
.stage.menu-open .side-menu .menu-links li:nth-child(3){ animation-delay:.34s; }
@keyframes menuFade{ from{ opacity:0; } }
@keyframes menuIn{ from{ opacity:0; transform:translateX(-28px); } }
.menu-links li a:hover, .menu-links li a:focus-visible{
  text-shadow:0 6px 0 rgba(0,0,0,.4), 0 0 18px rgba(201,139,255,.9), 0 0 42px rgba(139,63,209,.6);
}
.menu-btn:active{ transform:scale(.9); }

/* Social icons take their brand colour on hover. */
a[href*="discord"]:hover, a[href*="discord"]:focus-visible{ --brand:var(--brand-discord); }
a[href*="tiktok"]:hover, a[href*="tiktok"]:focus-visible{ --brand:var(--brand-tiktok); }
a[href*="instagram"]:hover, a[href*="instagram"]:focus-visible{ --brand:var(--brand-instagram); }
.top-socials a:hover, .top-socials a:focus-visible{
  color:var(--brand,var(--purple));
  filter:drop-shadow(0 0 8px var(--brand,var(--purple)));
  transform:translateY(-3px) scale(1.12);
}
.top-socials a:active{ transform:translateY(0) scale(.95); }

/* Staggered entrance for children of [data-reveal] (index set by site.js). */
body.page-loaded [data-reveal] > *{
  animation:revealUp .6s var(--ease-out) backwards;
  animation-delay:calc(.15s + var(--reveal-i,0) * .08s);
}
@keyframes revealUp{
  from{ opacity:0; transform:translateY(16px); }
}

/* <details> open/close smoothly where the browser supports it. */
details::details-content{
  block-size:0;overflow:clip;
  transition:block-size .35s var(--ease-out), content-visibility .35s allow-discrete;
}
details[open]::details-content{ block-size:auto; }

@media (prefers-reduced-motion: reduce){
  .stage::after, .neon-letter, [data-neon], .character::before,
  body.page-loaded [data-reveal] > *, .stage.menu-open .side-menu *{ animation:none !important; }
  [data-parallax] img{ translate:none; }
}