/* WOAH! NIGHT CLUB — Styles */
:root{
  --pink:#FF2E97; --cyan:#00F0FF; --violet:#8B5CF6; --gold:#FFD700;
  --bg:#06060C; --bg2:#0F0E1A; --glass:rgba(255,46,151,.04);
  --bord:rgba(0,240,255,.18);
  --text:#fff; --text2:#B8B5C8; --muted:#6B6880;
  --glow-pink:0 0 24px rgba(255,46,151,.6), 0 0 48px rgba(255,46,151,.3);
  --glow-cyan:0 0 24px rgba(0,240,255,.6), 0 0 48px rgba(0,240,255,.3);
  --glow-gold:0 0 32px rgba(255,215,0,.7);
  --grad-holo:linear-gradient(135deg,#FF2E97 0%,#8B5CF6 50%,#00F0FF 100%);
  --grad-gold:linear-gradient(135deg,#FFD700 0%,#FF2E97 100%);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#06060C;color:var(--text);font-family:'Inter','Noto Sans JP',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{scroll-behavior:smooth}

img{max-width:100%;display:block}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--text2)}
.bracket{font-family:'JetBrains Mono',monospace;color:var(--cyan);font-size:.78rem;letter-spacing:.2em;display:inline-block;padding:.3rem .55rem;border:1px solid var(--bord);border-radius:3px;background:rgba(0,240,255,.04)}
.hud-label{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;color:var(--cyan);opacity:.85}
.pill{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;padding:.25rem .55rem;border:1px solid rgba(255,255,255,.18);border-radius:99px;color:var(--text);background:rgba(255,255,255,.04);text-transform:uppercase;display:inline-block;margin:.18rem .25rem .18rem 0}

/* gradient title */
.gradient-title{font-family:'Bebas Neue','Oswald',sans-serif;font-size:clamp(3rem,7.5vw,7rem);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;background:linear-gradient(140deg,#fff 0%,#FF2E97 35%,#00F0FF 70%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 60px rgba(255,46,151,.25);font-weight:400}
.gold-title{font-family:'Bebas Neue','Oswald',sans-serif;font-size:clamp(3rem,7.5vw,7rem);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;background:linear-gradient(135deg,#FFE470 0%,#FFD700 30%,#FF8E1D 60%,#FFD700 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldShimmer 4s linear infinite;text-shadow:0 0 80px rgba(255,215,0,.4)}
@keyframes goldShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* sections */
.section{position:relative;padding:8rem 5vw 6rem;max-width:1600px;margin:0 auto}
.section__head{display:grid;grid-template-columns:1fr auto;gap:2rem 3rem;align-items:end;margin-bottom:3.5rem}
.section__title{margin-top:1rem;display:block}
.section__jp{font-family:'Noto Sans JP',sans-serif;color:var(--cyan);font-size:1.1rem;letter-spacing:.3em;display:block;margin-top:.4rem;opacity:.85}
.section__lead{max-width:380px;color:var(--text2);font-size:.95rem;line-height:1.6;text-wrap:pretty}
@media(max-width:880px){.section{padding:5rem 1.2rem 4rem}.section__head{grid-template-columns:1fr}}

/* === Buttons === */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;padding:.85rem 1.4rem;border-radius:4px;transition:all .25s var(--ease);cursor:pointer;position:relative;overflow:hidden;white-space:nowrap}
.btn--xl{padding:1.05rem 1.8rem;font-size:.85rem}
.btn--cyan{background:var(--cyan);color:#000;box-shadow:var(--glow-cyan)}
.btn--cyan:hover{transform:scale(1.02);box-shadow:0 0 32px rgba(0,240,255,.9), 0 0 64px rgba(0,240,255,.5)}
.btn--pink{background:var(--pink);color:#fff;box-shadow:var(--glow-pink)}
.btn--pink:hover{transform:scale(1.02);box-shadow:0 0 36px rgba(255,46,151,.9), 0 0 72px rgba(255,46,151,.5)}
.btn--violet{background:var(--violet);color:#fff;box-shadow:0 0 24px rgba(139,92,246,.6)}
.btn--ghost-cyan{border:1px solid var(--cyan);color:var(--cyan);background:transparent}
.btn--ghost-cyan:hover{background:rgba(0,240,255,.08);box-shadow:var(--glow-cyan)}
.btn--ghost-gold{border:1px solid var(--gold);color:var(--gold);background:transparent}
.btn--ghost-gold:hover{background:rgba(255,215,0,.08);box-shadow:var(--glow-gold)}
.btn--gold{background:var(--grad-gold);color:#1a0a0a;box-shadow:var(--glow-gold);font-weight:700}
.btn--gold:hover{transform:scale(1.02);box-shadow:0 0 40px rgba(255,215,0,.9), 0 0 80px rgba(255,215,0,.5)}
.btn--twitch{background:#9146FF;color:#fff;box-shadow:0 0 24px rgba(145,70,255,.6)}
.btn--twitch:hover{box-shadow:0 0 36px rgba(145,70,255,.9), 0 0 64px rgba(145,70,255,.4)}

.link-arrow{font-family:'JetBrains Mono',monospace;font-size:.85rem;letter-spacing:.18em;color:var(--cyan);display:inline-flex;align-items:center;gap:.6rem;border-bottom:1px solid transparent;padding-bottom:.2rem;transition:all .25s var(--ease)}
.link-arrow:hover{border-color:var(--cyan)}

/* === WOAH! Mark === */
.woah-mark{font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:-.04em;line-height:.9;display:inline-block;font-size:1rem}
.woah-mark__text{background:linear-gradient(180deg,#fff 0%,#fff 35%,#aaa 50%,#fff 65%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 12px rgba(255,255,255,.4);padding:0 .1em}
.woah-mark__bang{color:var(--pink);background:none;-webkit-text-fill-color:var(--pink);text-shadow:0 0 14px rgba(255,46,151,.7)}

/* === NAV === */
.nav{
  position:fixed !important;
  top:0;left:0;right:0;
  z-index:100;
  /* Always have a solid base so the nav never looks "cut" at the top of the page.
     The .nav--scrolled state below adds extra blur/saturation when scrolling. */
  background:linear-gradient(180deg, rgba(6,6,12,.78) 0%, rgba(6,6,12,.55) 100%);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(0,240,255,.08);
  transition:all .35s var(--ease)
}
.nav__inner{max-width:1700px;margin:0 auto;padding:1rem 1.6rem;display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center}
.nav--scrolled{background:rgba(6,6,12,.85);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--bord);box-shadow:0 4px 24px rgba(0,0,0,.4)}
.nav__logo{display:flex;align-items:center;gap:.8rem;transition:transform .25s var(--ease)}
.nav__logo:hover{transform:scale(1.04)}
.nav__logo-block{padding:.45rem .9rem;background:linear-gradient(180deg,#0F0E1A 0%,#06060C 100%);border:1px solid rgba(255,255,255,.1);border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);position:relative;overflow:hidden}
.nav__logo:hover .nav__logo-block{box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 24px rgba(255,46,151,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.nav__logo-tag{display:flex;flex-direction:column;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.25em;color:var(--cyan);line-height:1.4;opacity:.8}
.nav__links{list-style:none;display:flex;justify-content:center;gap:1.6rem}
.nav__links a{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.22em;font-weight:500;padding:.4rem 0;position:relative;transition:color .25s var(--ease);display:inline-flex;align-items:center;gap:.3rem}
.nav__triangle{opacity:0;transform:translateX(-4px);transition:all .25s var(--ease);color:var(--cyan)}
.nav__links a:hover .nav__triangle, .nav__links a.is-active .nav__triangle{opacity:1;transform:translateX(0)}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover, .nav__links a.is-active{color:var(--cyan);text-shadow:0 0 12px rgba(0,240,255,.5)}
.nav__links a:hover::after, .nav__links a.is-active::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;gap:.7rem}
.nav__icon{width:42px;height:42px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--bord);transition:all .25s var(--ease);position:relative}
.nav__icon[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;background:var(--bg2);border:1px solid var(--bord);padding:.4rem .6rem;white-space:nowrap;color:var(--cyan);border-radius:3px;pointer-events:none}
.nav__icon--ig{border-color:rgba(245,133,41,.4)}
.nav__icon--ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);transform:scale(1.08);box-shadow:0 0 20px rgba(221,42,123,.6);border-color:transparent}
.nav__icon--dc:hover{background:#5865F2;transform:scale(1.08);box-shadow:0 0 20px rgba(88,101,242,.7);border-color:#5865F2}
.nav__cta{padding:.7rem 1rem;font-size:.72rem}
.nav__hamburger{display:none;width:42px;height:42px;border-radius:99px;background:rgba(0,240,255,.06);border:1px solid var(--bord);align-items:center;justify-content:center;color:var(--cyan)}
@media(max-width:1100px){.nav__links{display:none}.nav__cta{display:none}}
@media(max-width:720px){.nav__icon{display:none}.nav__hamburger{display:inline-flex}.nav__logo-tag{display:none}}

/* === MOBILE MENU === */
.mobile-menu{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;transition:opacity .35s var(--ease)}
.mobile-menu.is-open{opacity:1;pointer-events:auto}
.mobile-menu__bg{position:absolute;inset:0;background:rgba(6,6,12,.85);backdrop-filter:blur(40px)}
.mobile-menu__content{position:absolute;top:0;right:0;bottom:0;width:88%;max-width:420px;background:linear-gradient(180deg,rgba(15,14,26,.95),rgba(6,6,12,.95));border-left:1px solid var(--bord);padding:5rem 2.2rem 2rem;display:flex;flex-direction:column;gap:1rem;transform:translateX(100%);transition:transform .4s var(--ease)}
.mobile-menu.is-open .mobile-menu__content{transform:translateX(0)}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:auto}
.mobile-menu li{opacity:0;animation:fadeUp .4s var(--ease) forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.mobile-menu li a{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.06em;color:var(--text);transition:color .2s var(--ease)}
.mobile-menu li a:hover{color:var(--cyan)}
.mobile-menu__socials{display:flex;gap:1rem;margin:1rem 0}
.mobile-menu__socials .nav__icon{width:60px;height:60px}

/* === AMBIENT PARTICLES === */
.amb-particles{position:fixed;inset:0;pointer-events:none;z-index:1}
.amb-particles span{position:absolute;width:3px;height:3px;border-radius:99px;background:currentColor;opacity:.4;box-shadow:0 0 8px currentColor;animation:drift linear infinite}
@keyframes drift{0%{transform:translate(0,0)}100%{transform:translate(40px,-120vh)}}
@media (prefers-reduced-motion:reduce){.amb-particles{display:none}}

/* ============================================================
   HERO — Editorial cyberpunk design
   Inspired by: club night flyers, Apple keynote, GQ magazine,
   Studio Ghibli openings, Tokyo neon nightlife
   ============================================================ */

.hero{
  position:relative;
  height:100vh;
  max-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8rem 0 0;
  overflow:hidden;
  isolation:isolate;
}
/* Content sits naturally — centered by parent flex */
.hero__content{
  flex:0 0 auto;
}

/* ---------- Atmospheric layered background ---------- */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg-layer{position:absolute;inset:0}

/* === LOGO AS BACKGROUND ELEMENT ===
   Massive, integrated into the hero atmosphere. Centered behind everything.
   Inherits all the existing chrome/holographic glitch animations from extras.css.
   These overrides are also in extras.css to win the cascade. */
.hero__bg-logo{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  margin:0 !important;
  width:min(85vh, 70vw, 1000px) !important;
  height:min(85vh, 70vw, 1000px) !important;
  pointer-events:auto;
  perspective:1200px;
  transform-style:preserve-3d;
  z-index:1;
  opacity:.42;
  filter:blur(.5px) saturate(1.15);
  mix-blend-mode:screen;
}
.hero__bg-logo:hover{
  opacity:.60;
  filter:blur(0) saturate(1.3);
  transition:opacity .5s ease, filter .5s ease;
}
.hero__bg--1{
  background:
    radial-gradient(ellipse at 78% 35%, rgba(255,46,151,.50) 0%, transparent 50%),
    radial-gradient(ellipse at 18% 75%, rgba(139,92,246,.40) 0%, transparent 55%),
    radial-gradient(circle at 88% 20%, rgba(0,240,255,.32) 0%, transparent 45%);
}
.hero__bg--scan{
  background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,240,255,.04) 2px, rgba(0,240,255,.04) 3px);
  mix-blend-mode:screen;
  animation:scanShift 8s linear infinite;
  opacity:.7;
}
@keyframes scanShift{from{background-position:0 0}to{background-position:0 100px}}
.hero__bg--vignette{
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(6,6,12,.85) 100%),
    linear-gradient(180deg, rgba(6,6,12,.5) 0%, transparent 15%, transparent 85%, rgba(6,6,12,.95) 100%);
}
.hero__silhouette{
  position:absolute; right:-8%; top:8%;
  width:50%; height:90%;
  background:radial-gradient(ellipse at center, rgba(255,46,151,.45) 0%, rgba(139,92,246,.25) 35%, transparent 70%);
  filter:blur(28px);
  animation:siloFloat 9s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero__silhouette::before,.hero__silhouette::after{content:'';position:absolute}
.hero__silhouette::before{
  inset:18% 28% 6% 28%;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.85) 100%);
  clip-path:polygon(45% 0%,55% 0%,68% 8%,72% 22%,68% 38%,75% 55%,80% 80%,70% 100%,30% 100%,20% 80%,25% 55%,32% 38%,28% 22%,32% 8%);
  filter:blur(2px);
}
.hero__silhouette::after{
  inset:18% 30% 50% 30%;
  background:radial-gradient(circle, rgba(255,46,151,.55) 0%, transparent 70%);
  filter:blur(20px);
}
@keyframes siloFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.hero__particles{position:absolute;inset:0;pointer-events:none}
.particle{
  position:absolute; width:3px; height:3px; border-radius:99px;
  background:currentColor; box-shadow:0 0 12px currentColor;
  animation:rise linear infinite; opacity:.6;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.7} 90%{opacity:.7}
  100%{transform:translateY(-110vh) translateX(40px);opacity:0}
}

/* ---------- Editorial side rail (left vertical strip) ---------- */
.hero__rail{
  position:absolute; top:8rem; bottom:6rem; left:1.4rem;
  z-index:5;
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none;
}
.hero__rail-top, .hero__rail-bottom{
  display:flex; flex-direction:column; gap:.7rem; align-items:center;
}
.hero__rail-num{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.3em;
  color:var(--cyan);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-shadow:0 0 10px rgba(0,240,255,.4);
}
.hero__rail-line{
  width:1px; height:120px;
  background:linear-gradient(180deg, transparent 0%, var(--cyan) 50%, transparent 100%);
  opacity:.55;
}
.hero__rail-jp{
  font-family:'Noto Sans JP', sans-serif;
  font-size:.85rem; letter-spacing:.5em;
  color:rgba(255,255,255,.5);
  writing-mode:vertical-rl;
}
.hero__rail-vol{
  font-family:'JetBrains Mono', monospace;
  font-size:.65rem; letter-spacing:.3em;
  color:rgba(255,46,151,.85);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  text-shadow:0 0 8px rgba(255,46,151,.4);
}

/* ---------- HUD positions ---------- */
.hero__hud-tr{position:absolute;top:8rem;right:2rem;z-index:5}
.hero__hud-br{position:absolute;bottom:6rem;right:2rem;z-index:5}

/* ============================================================
   MAIN CONTENT — clean 2-column layout (text | video)
   ============================================================ */
.hero__content{
  position:relative; z-index:10;
  width:100%;
  max-width:1700px;
  margin:0 auto;
  padding:0 clamp(2rem, 5vw, 4rem) 0 clamp(4.5rem, 7vw, 6rem); /* extra-left gutter for the rail */
  display:grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap:clamp(2rem, 4vw, 4rem);
  align-items:center;
  animation:heroFadeIn .9s cubic-bezier(.2,.7,.2,1.05);
}
/* Subtle dark veil so text reads cleanly over the bg logo */
.hero__content::before{
  content:'';
  position:absolute;
  inset:-2rem;
  background:radial-gradient(ellipse at 25% 50%, rgba(6,6,12,.55) 0%, rgba(6,6,12,.20) 50%, transparent 75%);
  z-index:-1;
  pointer-events:none;
  filter:blur(8px);
}

/* --- LEFT column: textual content --- */
.hero__left{
  display:flex; flex-direction:column;
  gap:clamp(.6rem, 1vw, .9rem);
  min-width:0;
}
.hero__left > *{animation:heroChildIn .8s cubic-bezier(.2,.7,.2,1.05) backwards}
.hero__left > *:nth-child(1){animation-delay:.05s}
.hero__left > *:nth-child(2){animation-delay:.15s}
.hero__left > *:nth-child(3){animation-delay:.25s}
.hero__left > *:nth-child(4){animation-delay:.35s}
.hero__left > *:nth-child(5){animation-delay:.45s}
.hero__left > *:nth-child(6){animation-delay:.55s}
.hero__left > *:nth-child(7){animation-delay:.65s}
@keyframes heroChildIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* --- RIGHT column: video + next-event --- */
.hero__right{
  display:flex; flex-direction:column;
  gap:1rem;
  min-width:0;
  animation:heroChildIn 1s cubic-bezier(.2,.7,.2,1.05) .3s backwards;
}
.hero__video-wrap{
  position:relative;
  width:100%;
}
/* Override the default vbroadcast margins/padding when nested inside the hero */
.hero__video-wrap .vbroadcast{
  margin:0;
  padding:0;
  max-width:none;
}
.hero__video-wrap .vbroadcast__head{
  margin-bottom:.5rem;
  gap:10px;
}
.hero__video-wrap .vbroadcast__head h3{
  font-size:clamp(.85rem, 1vw, .95rem);
  letter-spacing:.04em;
}
.hero__video-wrap .vbroadcast__head .lbl{
  font-size:.55rem;
  padding:2px 7px;
}
.hero__video-wrap .vbroadcast__hud-r{
  font-size:.55rem;
}
/* Force the video to a slightly less tall aspect inside the hero */
.hero__video-wrap .vplayer{
  aspect-ratio: 16 / 9.6;
  max-height: 52vh;
}
@keyframes heroFadeIn{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}
.hero__content > *{animation:heroChildIn .8s cubic-bezier(.2,.7,.2,1.05) backwards}
.hero__content > *:nth-child(1){animation-delay:.05s}
.hero__content > *:nth-child(2){animation-delay:.18s}
.hero__content > *:nth-child(3){animation-delay:.32s}
.hero__content > *:nth-child(4){animation-delay:.46s}
.hero__content > *:nth-child(5){animation-delay:.60s}
@keyframes heroChildIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Meta line (LIVE + location stamp) ---------- */
.hero__meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero__live{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem; letter-spacing:.25em;
  color:#fff;
  padding:.4rem .85rem;
  border:1px solid rgba(255,46,151,.45);
  background:linear-gradient(90deg, rgba(255,46,151,.10) 0%, rgba(255,46,151,.04) 100%);
  border-radius:99px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  white-space:nowrap;
}
.hero__meta-sep{color:rgba(255,255,255,.25); margin:0 .2rem}
.hero__meta-loc{color:rgba(0,240,255,.85); font-size:.65rem; letter-spacing:.22em}
.live-dot{
  width:7px; height:7px; border-radius:99px;
  background:var(--pink);
  box-shadow:0 0 10px var(--pink), 0 0 20px var(--pink);
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{opacity:1; transform:scale(1)}
  50%{opacity:.45; transform:scale(.85)}
}

/* ---------- Masthead (title + video on the right) ---------- */
.hero__masthead{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
  gap:clamp(1.5rem, 3vw, 3rem);
  align-items:center;
  width:100%;
}
.hero__title-col{display:flex; flex-direction:column; min-width:0}
.hero__video-col{
  position:relative;
  width:100%;
  min-width:0;
}
/* Override the default vbroadcast margins/padding when nested inside the hero */
.hero__video-col .vbroadcast{
  margin:0;
  padding:0;
  max-width:none;
}
.hero__video-col .vbroadcast__head{
  margin-bottom:.7rem;
}
.hero__video-col .vbroadcast__head h3{
  font-size:clamp(.95rem, 1.3vw, 1.15rem);
}
.hero__video-col .vbroadcast__head .lbl{
  font-size:.6rem;
  padding:3px 8px;
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem; letter-spacing:.3em;
  color:var(--cyan);
  margin-bottom:.4rem;
  text-shadow:0 0 8px rgba(0,240,255,.3);
}
.hero__eyebrow-dot{
  width:4px; height:4px; border-radius:99px;
  background:var(--pink);
  box-shadow:0 0 6px var(--pink);
}

/* The title — refined, less screaming */
.hero__title{
  display:flex; flex-direction:column;
  line-height:.82;
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:-.005em;
  margin:0;
}
.hero__woah{
  position:relative;
  font-size:clamp(3rem, 9vw, 7rem);
  line-height:.85;
  background:linear-gradient(180deg,
    #ffffff 0%,
    #ffffff 25%,
    #c8c8e0 50%,
    #ffffff 70%,
    #FF2E97 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 80px rgba(255,46,151,.4);
  letter-spacing:-.02em;
}
.hero__woah-bang{
  display:inline-block;
  background:linear-gradient(180deg, #FF2E97 0%, #FF6BCB 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:bangBounce 4s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes bangBounce{
  0%,90%,100%{transform:translateY(0) rotate(0)}
  93%{transform:translateY(-8px) rotate(-3deg)}
  96%{transform:translateY(-4px) rotate(2deg)}
}
.hero__sub{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:clamp(1.4rem, 3.6vw, 2.6rem);
  background:linear-gradient(135deg, #00F0FF 0%, #8B5CF6 55%, #FF2E97 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:.05em;
  margin-top:-.05em;
}
.hero__sub-mark{
  font-family:'JetBrains Mono', monospace;
  font-weight:300;
  font-size:.55em;
  background:none;
  -webkit-text-fill-color:rgba(0,240,255,.5);
  color:rgba(0,240,255,.5);
  letter-spacing:0;
  align-self:center;
  margin-top:.05em;
}
.hero__jp{
  font-family:'Noto Sans JP', sans-serif;
  color:var(--cyan);
  font-size:.9rem;
  letter-spacing:.4em;
  margin-top:.6rem;
  text-shadow:0 0 14px rgba(0,240,255,.45);
  opacity:.85;
}

/* ---------- Editorial dek (lead paragraph) ---------- */
.hero__dek{
  font-family:'Inter', sans-serif;
  color:rgba(255,255,255,.78);
  max-width:560px;
  line-height:1.5;
  font-size:clamp(.85rem, .95vw, .98rem);
  letter-spacing:.005em;
  margin:0;
  position:relative;
  padding-left:1rem;
  border-left:2px solid rgba(255,46,151,.45);
  text-wrap:pretty;
}
.hero__dek strong{
  color:#fff;
  font-weight:600;
  background:linear-gradient(90deg, transparent 0%, rgba(255,46,151,.12) 50%, transparent 100%);
  padding:0 .15em;
}

/* ---------- Action row — CTAs ---------- */
.hero__action-row{
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center;
}
.hero__ctas{display:flex; flex-wrap:wrap; gap:.7rem; align-items:center}

/* Next-event editorial card */
.hero__next-card{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto;
  grid-template-areas:
    "label label arrow"
    "name  date  arrow";
  gap:.15rem 1.2rem;
  align-items:center;
  min-width:280px;
  padding:.85rem 1.3rem .85rem 1.1rem;
  background:linear-gradient(135deg, rgba(15,14,26,.85) 0%, rgba(6,6,12,.92) 100%);
  border:1px solid rgba(0,240,255,.25);
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:all .35s cubic-bezier(.2,.7,.2,1.05);
  cursor:pointer;
}
.hero__next-card::before{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--pink) 0%, var(--cyan) 100%);
  box-shadow:0 0 12px var(--pink);
}
.hero__next-card::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 100% 0%, rgba(0,240,255,.15) 0%, transparent 50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .35s;
}
.hero__next-card:hover{
  border-color:rgba(0,240,255,.55);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.35), 0 0 28px rgba(0,240,255,.18);
}
.hero__next-card:hover::after{opacity:1}
.hero__next-card-label{
  grid-area:label;
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem; letter-spacing:.28em;
  color:var(--cyan);
}
.hero__next-card-pulse{
  width:6px; height:6px; border-radius:99px;
  background:var(--pink);
  box-shadow:0 0 8px var(--pink);
  animation:livePulse 1.4s ease-in-out infinite;
}
.hero__next-card-name{
  grid-area:name;
  font-family:'Bebas Neue', sans-serif;
  font-size:1.15rem; letter-spacing:.06em;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:200px;
}
.hero__next-card-date{
  grid-area:date;
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.18em;
  color:rgba(255,255,255,.65);
  text-align:right;
}
.hero__next-card-arrow{
  grid-area:arrow;
  font-size:1.4rem;
  color:var(--cyan);
  opacity:.6;
  transition:transform .35s, opacity .35s;
}
.hero__next-card:hover .hero__next-card-arrow{
  opacity:1;
  transform:translateX(4px);
  text-shadow:0 0 12px var(--cyan);
}

/* ---------- Stats strip ---------- */
.hero__stats{
  display:grid;
  grid-template-columns:repeat(4, auto);
  gap:clamp(1rem, 2.5vw, 2.2rem);
  align-items:end;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:.7rem;
  margin-top:.2rem;
  max-width:600px;
}
.hero__stat{
  display:flex; flex-direction:column;
  position:relative;
}
.hero__stat-num{
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  line-height:1;
  background:linear-gradient(180deg, #fff 0%, #c8c8e0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  letter-spacing:-.01em;
}
.hero__stat-plus{
  font-size:.55em;
  background:linear-gradient(180deg, var(--cyan) 0%, var(--pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-left:.05em;
}
.hero__stat-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.55rem; letter-spacing:.22em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  margin-top:.2rem;
}

/* ---------- Marquee strip at bottom of hero ---------- */
.hero__marquee{
  position:relative;
  margin-top:auto;
  padding:.65rem 0;
  border-top:1px solid rgba(255,46,151,.25);
  border-bottom:1px solid rgba(0,240,255,.25);
  background:linear-gradient(90deg, rgba(255,46,151,.05) 0%, rgba(0,240,255,.05) 100%);
  overflow:hidden;
  z-index:6;
  mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  flex-shrink:0;
}
.hero__marquee-track{
  display:inline-flex; align-items:center; gap:1.4rem;
  white-space:nowrap;
  font-family:'Bebas Neue', sans-serif;
  font-size:.85rem; letter-spacing:.2em;
  color:rgba(255,255,255,.85);
  animation:marqueeScroll 40s linear infinite;
  padding-left:100%;
}
.hero__marquee-track > span:not(.hero__marquee-dot){
  background:linear-gradient(90deg, #fff 0%, var(--cyan) 50%, var(--pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__marquee-dot{
  color:var(--pink);
  font-size:.6em;
  text-shadow:0 0 6px var(--pink);
  flex-shrink:0;
}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.hero__marquee:hover .hero__marquee-track{animation-play-state:paused}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero{padding-top:6rem}
  .hero__rail{display:none}
  .hero__content{padding:0 1.5rem}
  .hero__masthead{
    grid-template-columns:1fr;
    gap:1.5rem;
    text-align:left;
  }
  .hero__hud-tr{top:7rem; right:1rem}
  .hero__hud-br{display:none}
  .hero__action-row{flex-direction:column; align-items:stretch}
  .hero__next-card{min-width:0}
  .hero__stats{
    grid-template-columns:repeat(2, 1fr);
    gap:1.2rem;
  }
  .hero__dek{padding-left:1rem}
  /* Bg logo: smaller, even more sutil on mobile */
  .hero__bg-logo{
    width:min(60vh, 80vw, 500px) !important;
    height:min(60vh, 80vw, 500px) !important;
    opacity:.30 !important;
  }
}
@media (max-width: 560px){
  .hero__meta-sep, .hero__meta-loc{display:none}
  .hero__eyebrow{font-size:.55rem; gap:.5rem}
  .hero__sub{font-size:1.6rem}
  .hero__marquee-track{font-size:.85rem; gap:1.2rem}
  .hero__stats{
    grid-template-columns:repeat(4, 1fr);
    gap:.8rem;
  }
  .hero__stat-num{font-size:1.4rem}
  .hero__stat-label{font-size:.5rem}
  .hero__bg-logo{
    opacity:.22 !important;
  }
}

.now-playing{display:flex;gap:.9rem;align-items:center;background:rgba(15,14,26,.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--bord);padding:.7rem .9rem .7rem .7rem;border-radius:6px;max-width:340px;font-family:'JetBrains Mono',monospace}
.now-playing__art{width:46px;height:46px;border-radius:4px;background:linear-gradient(135deg,var(--pink),var(--violet));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.now-playing__eq{display:flex;gap:2px;align-items:flex-end;height:18px}
.now-playing__eq span{width:3px;background:#fff;border-radius:1px;animation:eq .9s ease-in-out infinite}
.now-playing__eq span:nth-child(1){height:60%;animation-delay:0s}
.now-playing__eq span:nth-child(2){height:90%;animation-delay:.2s}
.now-playing__eq span:nth-child(3){height:40%;animation-delay:.4s}
.now-playing__eq span:nth-child(4){height:75%;animation-delay:.1s}
@keyframes eq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.now-playing__label{font-size:.6rem;letter-spacing:.2em;color:var(--cyan);opacity:.85}
.now-playing__track{font-size:.78rem;color:#fff;margin:.15rem 0;letter-spacing:.05em}
.now-playing__src{font-size:.6rem;letter-spacing:.18em;color:var(--text2);display:inline-flex;align-items:center;gap:.3rem}

.scroll-ind{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.25em;color:var(--cyan)}
.scroll-ind__line{width:1px;height:60px;background:linear-gradient(180deg,var(--cyan),transparent);position:relative;overflow:hidden}
.scroll-ind__line::after{content:'';position:absolute;top:0;width:1px;height:30%;background:#fff;animation:scrollDot 2s ease-in-out infinite}
@keyframes scrollDot{0%{top:-30%}100%{top:100%}}

@media(max-width:880px){
  .hero__hud-tr,.hero__hud-bl{position:static;margin:1rem 0}
  .hero__hud-br{display:none}
  .hero__sticker{top:6rem;right:1rem;transform:scale(.7) rotate(8deg)}
  .hero{padding:6rem 1.2rem 3rem}
  .hero__content{margin-bottom:2rem}
}

/* === EVENTS === */
.section--events{padding-bottom:7rem}
.events-track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .5rem 2rem;margin:0 -.5rem;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent;cursor:grab}
.events-track:active{cursor:grabbing}
.events-track::-webkit-scrollbar{height:6px}
.events-track::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:99px}
.event-card{flex:0 0 420px;height:480px;position:relative;border-radius:8px;overflow:hidden;background:var(--bg2);scroll-snap-align:start;transition:transform .35s var(--ease);border:1px solid rgba(255,255,255,.08);cursor:pointer}
@media(max-width:520px){.event-card{flex:0 0 88vw;height:420px}}
.event-card:hover{transform:translateY(-6px)}
.event-card__art{position:absolute;inset:0;height:60%}
.event-card__art-bg{position:absolute;inset:0;background:linear-gradient(135deg,hsl(var(--hue) 90% 50%) 0%,hsl(calc(var(--hue) + 50) 80% 35%) 50%,#06060C 100%);opacity:.85}
.event-card__art-noise{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 6px)}
.event-card__art-mark{position:absolute;right:1.4rem;bottom:1.6rem;font-family:'Bebas Neue',sans-serif;font-size:5rem;color:rgba(255,255,255,.18);line-height:1}
.event-card__halo{position:absolute;inset:0;border-radius:8px;border:1px solid transparent;background:linear-gradient(135deg,hsl(var(--hue) 90% 60%),hsl(calc(var(--hue) + 50) 90% 60%)) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease)}
.event-card:hover .event-card__halo{opacity:1}
.event-card__body{position:absolute;inset:auto 0 0 0;padding:1.4rem;background:linear-gradient(180deg,transparent 0%,rgba(6,6,12,.85) 30%,#06060C 100%);height:55%}
.event-card__tag{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.25em;color:hsl(var(--hue) 90% 70%);margin-bottom:.5rem}
.event-card__name{font-family:'Bebas Neue',sans-serif;font-size:2.5rem;line-height:.95;letter-spacing:.01em;color:#fff;margin-bottom:.2rem}
.event-card__jp{font-family:'Noto Sans JP',sans-serif;color:var(--cyan);font-size:.78rem;letter-spacing:.25em;opacity:.8;margin-bottom:.85rem}
.event-card__date{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--text);letter-spacing:.1em;margin-bottom:.4rem}
.event-card__lineup{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text2);letter-spacing:.1em;margin-bottom:1rem}
.event-card__cta{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.2em;color:var(--cyan);display:inline-flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--cyan);padding-bottom:.2rem}
.event-card__cta svg{transition:transform .25s var(--ease)}
.event-card:hover .event-card__cta svg{transform:translateX(4px)}

/* PROMO BANNER === */
.promo-banner{margin:5rem auto 0;max-width:1100px;padding:3rem 2rem;background:linear-gradient(135deg,rgba(255,46,151,.18),rgba(0,240,255,.12));border:2px solid;border-image:linear-gradient(135deg,var(--pink),var(--cyan),var(--gold)) 1;text-align:center;position:relative;overflow:hidden;border-radius:6px}
.promo-banner::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 1px,transparent 1px,transparent 80px);pointer-events:none}
.promo-banner__sticker{position:absolute;font-family:'Bebas Neue',sans-serif;color:var(--gold);font-size:3rem;text-shadow:0 0 20px rgba(255,215,0,.7)}
.promo-banner__sticker--l{top:.6rem;left:1.2rem;animation:spin 8s linear infinite}
.promo-banner__sticker--r{bottom:.6rem;right:1.2rem;animation:spin 8s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.promo-banner__confetti{position:absolute;inset:0;pointer-events:none}
.promo-banner__confetti span{position:absolute;width:8px;height:14px;border-radius:1px;animation:confetti 3.5s ease-in-out infinite}
@keyframes confetti{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(180deg)}}
.promo-banner__title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:.95;background:linear-gradient(135deg,#fff,var(--pink),var(--cyan),#fff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 40px rgba(255,46,151,.4);letter-spacing:.02em;font-weight:400;display:flex;flex-direction:column;align-items:center;gap:.4rem;position:relative;z-index:2;transform:perspective(800px) rotateX(8deg)}
.promo-banner__title span{font-size:.6em;background:linear-gradient(135deg,var(--gold),#FF8E1D);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-banner__sub{font-family:'JetBrains Mono',monospace;font-size:.85rem;letter-spacing:.3em;color:var(--gold);margin-top:1rem;position:relative;z-index:2}

/* === DJ GRID === */
/* ============================================
   DJs SECTION — Gacha banner-style cards
   ============================================
   - Featured DJ (Gaia): 2x2 hero card with golden frame, particles, flames
   - Residents: 3:4 portrait cards in a grid
   - Photo fills the whole card; identity logo + status + info overlay it
   - Placeholder mode: big logo on gradient (while waiting for in-game photos)
   ============================================ */

.djs-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.4rem;
  align-items:stretch;
}
@media(max-width:1100px){
  .djs-grid{ grid-template-columns: repeat(3, 1fr); gap:1rem; }
}
@media(max-width:760px){
  .djs-grid{ grid-template-columns: repeat(2, 1fr); gap:.7rem; }
}
@media(max-width:420px){
  .djs-grid{ grid-template-columns: 1fr; }
}

/* Featured DJ (Gaia) — same size as others, distinguished by gold border + crown + effects only */
.dj-card--featured{ /* no grid-span — same size as residents */ }

.dj-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg,#10101e 0%,#06060C 100%);
  border:1px solid rgba(255,255,255,.1);
  aspect-ratio: 3/4;
  cursor:pointer;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .25s ease;
  isolation: isolate;
  will-change: transform;
  display: block;
}
.dj-card:hover{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-10px) scale(1.02);
  box-shadow:
    0 24px 60px rgba(0,0,0,.6),
    0 0 50px color-mix(in srgb, var(--g) 45%, transparent),
    0 0 100px color-mix(in srgb, var(--g) 20%, transparent);
  border-color: color-mix(in srgb, var(--g) 70%, white);
  z-index: 5;
}

/* === PHOTO (cover layer) === */
.dj-card__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 20%;
  z-index:0;
  filter: contrast(1.06) saturate(1.12);
  transition: transform .8s var(--ease), filter .4s ease;
}
.dj-card:hover .dj-card__photo{
  transform: scale(1.06);
  filter: contrast(1.12) saturate(1.25) brightness(1.06);
}
/* When placeholder mode, hide the broken img */
.dj-card--placeholder .dj-card__photo{ display:none; }

/* === PLACEHOLDER (when no photo) === */
.dj-card__placeholder-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--g) 35%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, #0F0E1A 0%, #06060C 100%);
  display: none;
}
.dj-card__placeholder-logo{
  position:absolute; inset:0; z-index:1;
  display: none;
  align-items:center; justify-content:center;
  padding: 2rem;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--g) 60%, transparent));
  animation: dj-logo-float 6s ease-in-out infinite;
}
@keyframes dj-logo-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.dj-card--placeholder .dj-card__placeholder-bg{ display: block; }
.dj-card--placeholder .dj-card__placeholder-logo{ display: flex; }

/* Placeholder scanlines */
.dj-card--placeholder::after{
  content:'';
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--g) 18%, transparent) 0 1px, transparent 1px 4px);
  animation: vScan 6s linear infinite;
  mix-blend-mode: screen;
  opacity: .5;
}

/* === ATMOSPHERIC OVERLAYS === */
.dj-card__halo{
  position:absolute; inset:0; z-index:1;
  background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--g) 15%, transparent) 0%, transparent 60%);
  pointer-events:none;
  mix-blend-mode: screen;
}
.dj-card__scan-overlay{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.06) 0 1px, transparent 1px 4px);
  animation: vScan 8s linear infinite;
  mix-blend-mode: screen;
  opacity: .55;
}
.dj-card__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, transparent 35%, rgba(5,2,12,.55) 65%, rgba(5,2,12,.95) 100%);
}
.dj-card__shimmer{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 1s var(--ease);
}
.dj-card:hover .dj-card__shimmer{ transform: translateX(100%); }

/* === ANIMATED COLOR FRAME — every card gets its own colored ring === */
.dj-card{
  box-shadow: 0 0 30px color-mix(in srgb, var(--g) 15%, transparent) inset;
}
/* Animated conic-gradient border using the DJ's own color */
.dj-card::before{
  content:'';
  position:absolute; inset:-1px; z-index:4;
  border-radius:13px;
  padding:1.5px;
  background: conic-gradient(
    from var(--ang,0deg),
    var(--g),
    color-mix(in srgb, var(--g) 40%, white),
    var(--g),
    color-mix(in srgb, var(--g) 60%, #ffffff),
    var(--g)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .75;
  animation: dj-ring-spin 6s linear infinite;
  pointer-events:none;
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes dj-ring-spin{ to{ --ang: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red, blue)){
  .dj-card::before{ background: var(--g); }
}
.dj-card:hover::before{ opacity: 1; }

/* HUD corner brackets — each card uses its DJ color */
.dj-card__corner{
  position:absolute; width:20px; height:20px;
  border:2px solid var(--g);
  z-index:5; pointer-events:none;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--g) 70%, transparent));
  opacity: .9;
}
.dj-card__corner--tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.dj-card__corner--tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.dj-card__corner--bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.dj-card__corner--br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.dj-card:hover .dj-card__corner{ opacity: 1; }

.dj-card__flames{
  position:absolute; left:0; right:0; bottom:0; height:60%;
  z-index:1; pointer-events:none; overflow:hidden;
}
.dj-card__flames span{
  position:absolute; bottom:-40px;
  width:60px; height:120px;
  background: radial-gradient(ellipse at 50% 80%, var(--gold) 0%, var(--pink) 40%, transparent 70%);
  filter: blur(14px);
  animation: flame 3.4s ease-in-out infinite;
  opacity:.55;
  mix-blend-mode: screen;
}
@keyframes flame{
  0%,100%{ transform:translateY(0) scale(1); opacity:.55; }
  50%{ transform:translateY(-40px) scale(1.2); opacity:.3; }
}

.dj-card__particles{
  position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden;
}
.dj-card__particles span{
  position:absolute; bottom:-20px;
  width:3px; height:3px;
  border-radius:50%;
  background: #FFD700;
  box-shadow: 0 0 12px #FFD700, 0 0 24px rgba(255,215,0,.6);
  animation: dj-rise linear infinite;
  opacity:.85;
}
@keyframes dj-rise{
  from{ transform: translateY(0); opacity:0; }
  20%{ opacity:.9; }
  to{ transform: translateY(-120vh); opacity:0; }
}

/* === IDENTITY LOGO (top-left small badge) === */
.dj-card__id-logo{
  position:absolute; top:14px; left:14px; z-index:6;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(5,2,12,.7);
  border: 1px solid color-mix(in srgb, var(--g) 60%, transparent);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  padding: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb, var(--g) 30%, transparent);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dj-card--featured .dj-card__id-logo{
  border-color: rgba(255,215,0,.7);
  background: rgba(20,12,4,.75);
  box-shadow: 0 4px 12px rgba(0,0,0,.4), 0 0 16px rgba(255,215,0,.4);
}
.dj-card:hover .dj-card__id-logo{
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 24px color-mix(in srgb, var(--g) 60%, transparent);
}
.dj-card__id-logo .dj-logo{ width:100%; height:100%; filter: none; }

/* In placeholder mode, hide the small id-logo (the big placeholder logo already shows identity) */
.dj-card--placeholder .dj-card__id-logo{ display:none; }

/* === CROWN (Gaia's distinguishing mark — only on featured) === */
.dj-card__crown{
  position:absolute; top:8px; left:50%;
  transform: translateX(-50%);
  z-index:7;
  font-size: 22px;
  color: #FFD700;
  text-shadow:
    0 0 8px #FFD700,
    0 0 18px rgba(255,215,0,.9),
    0 0 32px rgba(255,143,29,.6),
    0 2px 4px rgba(0,0,0,.6);
  animation: dj-crown-float 3s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,215,0,.8));
}
@keyframes dj-crown-float{
  0%,100%{ transform: translateX(-50%) translateY(0) rotate(0deg); }
  50%{ transform: translateX(-50%) translateY(-3px) rotate(2deg); }
}

/* === STATUS PILL (top-right) === */
.dj-card__status-pill{
  position:absolute; top:14px; right:14px; z-index:6;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .55rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.55rem; letter-spacing:.2em;
  color:#fff;
  background: rgba(5,2,12,.7);
  border:1px solid rgba(0,240,255,.4);
  border-radius:99px;
  backdrop-filter: blur(6px);
  text-transform: uppercase;
}
.dj-card--featured .dj-card__status-pill{
  color:#FFD700;
  border-color: rgba(255,215,0,.6);
  background: rgba(20,12,4,.75);
}
.dj-card__status-dot{
  width:6px; height:6px;
  border-radius:50%;
  background: #6BFF6B;
  box-shadow: 0 0 8px #6BFF6B, 0 0 14px rgba(107,255,107,.5);
  animation: dj-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dj-dot-pulse{
  0%,100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.5; transform: scale(.85); }
}
.dj-card--featured .dj-card__status-dot{
  background: #FFD700;
  box-shadow: 0 0 8px #FFD700, 0 0 14px rgba(255,215,0,.6);
}

/* === INFO BLOCK (bottom) === */
.dj-card__info{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  padding: 1rem 1rem 1.1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(5,2,12,.5) 35%, rgba(5,2,12,.95) 100%);
}
.dj-card--featured .dj-card__info{
  padding: 1rem 1rem 1.1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(20,12,4,.6) 40%, rgba(20,8,2,.96) 100%);
}

.dj-card__pills{ margin-bottom: .55rem; display:flex; flex-wrap:wrap; gap:.2rem; }
.dj-card__pills .pill{
  font-size:.55rem;
  padding:.18rem .45rem;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  border-color: color-mix(in srgb, var(--g) 50%, rgba(255,255,255,.2));
}
.dj-card--featured .dj-card__pills .pill{
  border-color: rgba(255,215,0,.5);
  color: rgba(255,235,150,.95);
}

.dj-card__name{
  font-family:'Bebas Neue', sans-serif;
  font-size: 1.55rem;
  line-height: .95;
  letter-spacing: .02em;
  margin-bottom: .2rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 18px color-mix(in srgb, var(--g) 30%, transparent);
}
/* Featured: same SIZE as residents but with gold shimmer treatment */
.dj-card--featured .dj-card__name{
  background: linear-gradient(135deg, #FFE470 0%, #FFD700 30%, #FF8E1D 60%, #FFD700 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: goldShimmer 5s linear infinite;
  text-shadow: 0 0 30px rgba(255,215,0,.5);
}

.dj-card__jp{
  font-family:'Noto Sans JP', sans-serif;
  font-size:.62rem; letter-spacing:.22em;
  color: rgba(0,240,255,.85);
  margin-bottom:.4rem;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
}
.dj-card--featured .dj-card__jp{
  color: rgba(255,215,0,.85);
}

.dj-card__tag{
  font-size:.7rem; line-height:1.35;
  color: rgba(255,255,255,.85);
  margin-bottom:.4rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dj-card--featured .dj-card__tag{
  font-style: italic;
  color: rgba(255,235,150,.95);
}

.dj-card__badge{
  font-family:'JetBrains Mono', monospace;
  font-size:.55rem; letter-spacing:.15em;
  color: rgba(0,240,255,.9);
  background: rgba(0,240,255,.08);
  border:1px solid rgba(0,240,255,.3);
  padding:.25rem .5rem;
  border-radius:3px;
  display: inline-block;
  margin-right:.3rem;
  margin-top:.3rem;
}
.dj-card__badge--gold{
  color: var(--gold);
  background: rgba(255,215,0,.1);
  border-color: rgba(255,215,0,.4);
  text-shadow: 0 0 8px rgba(255,215,0,.5);
}

/* === HOVER CTA (slides up) === */
.dj-card__cta{
  position:absolute; bottom:0; left:0; right:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.7rem 1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem; letter-spacing:.22em;
  color: #06060C; font-weight: 700;
  background: linear-gradient(135deg, #00F0FF 0%, color-mix(in srgb, var(--g) 70%, white) 100%);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(255,255,255,.4);
}
.dj-card--featured .dj-card__cta{
  background: linear-gradient(135deg, #FFD700 0%, #FF8E1D 100%);
  color: #1a0a0a;
}
.dj-card:hover .dj-card__cta{ transform: translateY(0); }

/* Mobile tweaks */
@media(max-width:760px){
  .dj-card__id-logo{ width:36px; height:36px; top:10px; left:10px; }
  .dj-card__status-pill{ font-size:.5rem; top:10px; right:10px; }
  .dj-card__name{ font-size:1.2rem; }
  .dj-card__info{ padding: .8rem .8rem 1rem; }
}

.dj-logo{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--g) 60%, transparent))}

/* === MODAL === */
.modal{position:fixed;inset:0;z-index:300;background:rgba(6,6,12,.88);backdrop-filter:blur(40px);display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn .25s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal__panel{position:relative;width:100%;max-width:780px;max-height:92vh;overflow:hidden;background:linear-gradient(180deg,#10101e 0%,#06060C 100%);border-radius:8px;border:1px solid color-mix(in srgb,var(--g) 30%, transparent);box-shadow:0 0 60px color-mix(in srgb,var(--g) 30%, transparent),0 20px 60px rgba(0,0,0,.6);animation:scaleUp .3s var(--ease)}

/* === MODAL BACKGROUND PHOTO LAYERS === */
/* DJ photo blurred fullscreen, with slow cinematic zoom */
.modal__bg-photo{
  position:absolute; inset:-20px;
  width:calc(100% + 40px); height:calc(100% + 40px);
  object-fit: cover;
  object-position: 50% 15%;
  z-index: 0;
  filter: blur(14px) saturate(1.25) contrast(1.05);
  opacity: .9;
  animation: dj-modal-zoom 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dj-modal-zoom{
  from{ transform: scale(1.05) translate(0, 0); }
  to{   transform: scale(1.18) translate(-1%, -2%); }
}

/* Color vignette using DJ's own color (var(--g)) */
.modal__bg-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 18%, color-mix(in srgb, var(--g) 18%, rgba(8,4,16,.5)) 60%, rgba(6,4,12,.95) 100%),
    linear-gradient(180deg, rgba(6,4,12,.35) 0%, rgba(6,4,12,.55) 60%, rgba(6,4,12,.85) 100%);
}

/* Subtle scanlines */
.modal__bg-scan{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .55;
  animation: vScan 10s linear infinite;
}

/* Content sits on top of all the bg layers, with its own scroll.
   IMPORTANT: max-height ties to the panel's max-height (92vh) so when
   content is tall, scroll happens INSIDE the modal — not on the page. */
.modal__content{
  position:relative; z-index:3;
  padding: 3rem 2.4rem 2.4rem;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
.modal__content::-webkit-scrollbar{ width: 6px; }
.modal__content::-webkit-scrollbar-track{ background: transparent; }
.modal__content::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--g) 50%, transparent);
  border-radius: 99px;
}
@keyframes scaleUp{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.modal__close{position:absolute;top:1rem;right:1rem;z-index:10;width:38px;height:38px;border-radius:99px;background:rgba(6,4,12,.7);border:1px solid var(--bord);color:var(--cyan);display:inline-flex;align-items:center;justify-content:center;transition:all .2s var(--ease);backdrop-filter:blur(8px)}
.modal__close:hover{background:rgba(0,240,255,.2);transform:rotate(90deg)}
.modal__logo{display:flex;justify-content:center;margin-bottom:1rem}
.modal__status{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.22em;color:color-mix(in srgb,var(--g) 80%, white);margin-bottom:.5rem;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.modal__name{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,5vw,3.6rem);line-height:.95;letter-spacing:.02em;margin-bottom:.2rem;text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 30px color-mix(in srgb,var(--g) 30%, transparent)}
.modal__jp{font-family:'Noto Sans JP',sans-serif;color:var(--cyan);font-size:.95rem;letter-spacing:.3em;margin-bottom:.8rem;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.modal__tag{font-style:italic;color:var(--cyan);margin-bottom:1rem;text-shadow:0 1px 6px rgba(0,0,0,.85)}
.modal__badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.18em;color:var(--gold);background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.3);padding:.3rem .6rem;border-radius:3px;margin:.3rem .25rem}
.modal__badge--origin{color:var(--cyan);background:rgba(0,240,255,.06);border-color:var(--bord)}
.modal__pills{margin:1rem 0}
.modal__bio{color:#e8e6f0;line-height:1.7;font-size:.98rem;margin:1.4rem auto;max-width:580px;text-wrap:pretty;text-align:left;background:rgba(6,4,12,.5);backdrop-filter:blur(6px);padding:1.1rem 1.3rem;border-radius:6px;border:1px solid rgba(255,255,255,.06)}
.modal__note{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.15em;color:var(--gold);margin-bottom:1.4rem;padding:.6rem;border:1px dashed rgba(255,215,0,.3);display:inline-block}
.modal__handle{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.2em;color:var(--muted);margin-top:.8rem}

/* === STAFF MODAL — Layout B: photo right, info left === */
.staff-modal-b{
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16/10;
  max-height: 92vh;
  background: linear-gradient(135deg, #0a0612 0%, #1a0d24 50%, #25103a 100%);
  border: 1px solid hsl(var(--hue) 80% 50% / .45);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 42%;
  gap: 0;
  animation: scaleUp .35s var(--ease);
  box-shadow:
    0 24px 60px rgba(0,0,0,.7),
    0 0 60px hsl(var(--hue) 80% 50% / .35),
    0 0 120px hsl(var(--hue) 80% 50% / .15),
    inset 0 0 80px hsl(var(--hue) 60% 25% / .15);
}
.staff-modal-b__close{
  position: absolute; top: 14px; right: 14px; z-index: 20;
  width: 34px; height: 34px;
  border-radius: 99px;
  background: rgba(8,4,20,.78);
  border: 1px solid rgba(0,240,255,.5);
  color: var(--cyan);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: all .2s var(--ease);
}
.staff-modal-b__close:hover{ background: rgba(0,240,255,.18); transform: rotate(90deg); }

/* ===== LEFT SIDE — info column ===== */
.staff-modal-b__info{
  padding: 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.staff-modal-b__info::-webkit-scrollbar{ width: 6px; }
.staff-modal-b__info::-webkit-scrollbar-track{ background: transparent; }
.staff-modal-b__info::-webkit-scrollbar-thumb{
  background: hsl(var(--hue) 80% 50% / .4);
  border-radius: 99px;
}

.staff-modal-b__division{
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem; letter-spacing: .25em;
  padding: .45rem .85rem;
  border-radius: 99px;
  background: rgba(8,4,20,.7);
  border: 1px solid hsl(var(--hue) 80% 60% / .7);
  color: hsl(var(--hue) 90% 80%);
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 1rem;
  backdrop-filter: blur(6px);
  text-shadow: 0 0 6px hsl(var(--hue) 80% 50% / .4);
}

.staff-modal-b__headbadge{
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem; letter-spacing: .22em;
  padding: .3rem .65rem;
  border-radius: 3px;
  background: rgba(255,215,0,.1);
  border: 1px solid rgba(255,215,0,.5);
  color: var(--gold);
  margin-bottom: .8rem;
  width: fit-content;
  text-shadow: 0 0 6px rgba(255,215,0,.5);
}

.staff-modal-b__role{
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; letter-spacing: .3em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: .35rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.7);
}

.staff-modal-b__name{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: .95;
  letter-spacing: .04em;
  color: #fff;
  margin: 0 0 1.1rem;
  text-shadow:
    0 2px 12px rgba(0,0,0,.85),
    0 0 28px hsl(var(--hue) 80% 50% / .35);
}

.staff-modal-b__divider{
  width: 48px; height: 1px;
  background: linear-gradient(90deg, hsl(var(--hue) 85% 65%), transparent);
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 0 4px hsl(var(--hue) 80% 50% / .6));
}

.staff-modal-b__about-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem; letter-spacing: .3em;
  color: hsl(var(--hue) 85% 78%);
  text-transform: uppercase;
  margin-bottom: .6rem;
  opacity: .9;
}

.staff-modal-b__about{
  font-size: .92rem;
  line-height: 1.65;
  color: #e8e6f0;
  font-style: italic;
  text-wrap: pretty;
  margin: 0;
}

/* ===== RIGHT SIDE — photo frame ===== */
.staff-modal-b__photo-frame{
  position: relative;
  margin: 1.3rem 1.3rem 1.3rem 0;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, hsl(var(--hue) 80% 45% / .35) 0%, transparent 35%),
    radial-gradient(circle at 50% 65%, hsl(var(--hue) 70% 30% / .5) 0%, transparent 60%),
    linear-gradient(180deg, #1a0d2e 0%, #06060C 100%);
  border: 1px solid hsl(var(--hue) 80% 55% / .65);
  box-shadow:
    0 0 32px hsl(var(--hue) 80% 50% / .35),
    inset 0 0 30px hsl(var(--hue) 60% 25% / .35);
}
.staff-modal-b__photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  z-index: 1;
}
.staff-modal-b__photo-placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem; letter-spacing: .25em;
  color: hsl(var(--hue) 70% 60% / .55);
}
.staff-modal-b__photo-scan{
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,240,255,.08) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: .55;
  animation: vScan 8s linear infinite;
}

/* HUD corner brackets ON the photo frame */
.staff-modal-b__photo-corner{
  position: absolute; width: 18px; height: 18px;
  border: 2px solid hsl(var(--hue) 90% 70%);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 5px hsl(var(--hue) 80% 50% / .8));
  opacity: .95;
}
.staff-modal-b__photo-corner--tl{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.staff-modal-b__photo-corner--tr{ top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.staff-modal-b__photo-corner--bl{ bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.staff-modal-b__photo-corner--br{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

@media(max-width: 760px){
  .staff-modal-b{
    aspect-ratio: auto;
    max-height: 92vh;
    grid-template-columns: 1fr;
    grid-template-rows: 50% 1fr;
    overflow-y: auto;
  }
  .staff-modal-b__photo-frame{
    grid-row: 1;
    margin: 1rem 1rem 0;
    min-height: 280px;
  }
  .staff-modal-b__info{
    grid-row: 2;
    padding: 1.5rem 1.4rem 1.8rem;
  }
  .staff-modal-b__name{ font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* === STAFF === */
.staff-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem}
@media(max-width:880px){.staff-grid{grid-template-columns:repeat(2,1fr)}}
.staff-card{position:relative;padding:1.6rem 1.2rem;background:linear-gradient(180deg,#10101e,#06060C);border:1px solid rgba(255,255,255,.06);border-radius:8px;text-align:center;transition:all .3s var(--ease)}
.staff-card:hover{transform:translateY(-6px);border-color:hsl(var(--hue) 80% 50%)}
.staff-card--mgr{border-color:rgba(255,215,0,.3);background:linear-gradient(180deg,rgba(255,215,0,.05),#06060C)}
.staff-card__portrait{width:96px;height:96px;border-radius:99px;margin:0 auto 1rem;background:radial-gradient(circle,hsl(var(--hue) 80% 45%) 0%,hsl(var(--hue) 70% 25%) 100%);display:flex;align-items:center;justify-content:center;border:1px solid hsl(var(--hue) 80% 50%);box-shadow:0 0 24px hsl(var(--hue) 80% 50% / .4)}
.staff-card__initials{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:#fff;letter-spacing:.04em}
.staff-card__role{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.22em;color:hsl(var(--hue) 80% 70%);margin-bottom:.3rem}
.staff-card__name{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.04em;margin-bottom:.15rem}
.staff-card__jp{font-family:'Noto Sans JP',sans-serif;font-size:.65rem;letter-spacing:.2em;color:var(--cyan);opacity:.6}
.staff-card__contact{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.2em;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:.2rem}

/* === COCKTAILS === */
.section--cocktails{position:relative}
.section--cocktails__bg{position:absolute;inset:0;pointer-events:none;opacity:.4}
.blueprint{position:absolute;inset:0;width:100%;height:100%}
.cocktail-cat{margin-bottom:2.2rem;position:relative}
.cocktail-cat__head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.cocktail-cat__line{flex:1;height:1px;background:linear-gradient(90deg,var(--bord),transparent)}
.cocktail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1280px){.cocktail-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cocktail-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.cocktail-grid{grid-template-columns:1fr}}
.cocktail-card{position:relative;background:linear-gradient(180deg,#10101e,#06060C);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:transform .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column}
.cocktail-card::before{content:'';position:absolute;inset:0;border-radius:8px;padding:1px;background:linear-gradient(135deg,var(--c1),var(--c2),var(--c1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.4;pointer-events:none}
.cocktail-card:hover{transform:translateY(-8px) perspective(900px) rotateX(2deg);box-shadow:0 24px 40px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--c1) 30%, transparent)}
.cocktail-card:hover::before{opacity:.9}
.cocktail-card__visual{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--c1) 18%, transparent) 0%,transparent 70%),linear-gradient(180deg,#10101e,#06060C);overflow:hidden}
.cocktail-svg{width:80%;height:80%}
.cocktail-card__corner{position:absolute;width:14px;height:14px;border:1px solid var(--cyan);pointer-events:none}
.cocktail-card__corner--tl{top:8px;left:8px;border-right:0;border-bottom:0}
.cocktail-card__corner--br{bottom:8px;right:8px;border-left:0;border-top:0}
.cocktail-card__code{position:absolute;top:8px;right:10px;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--cyan);opacity:.7}
.cocktail-card__ribbon{position:absolute;top:14px;left:-30px;background:var(--grad-gold);color:#1a0a0a;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.2em;padding:.3rem 2.5rem;font-weight:700;transform:rotate(-30deg);box-shadow:0 0 16px rgba(255,215,0,.5)}
.cocktail-card__shimmer{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);transform:translateX(-100%);transition:transform .8s var(--ease);pointer-events:none}
.cocktail-card:hover .cocktail-card__shimmer{transform:translateX(100%)}

/* Photo mode — when a real image is provided for the drink, fill the visual area
   with the photo (matches the staff card photo treatment but in 1:1 square format). */
.cocktail-card__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  filter:contrast(1.05) saturate(1.1);
  transition:transform .6s var(--ease), filter .35s var(--ease);
}
.cocktail-card--has-photo .cocktail-card__visual{
  /* Slightly darker base so photo edges blend cinematically */
  background:#06060C;
}
.cocktail-card--has-photo:hover .cocktail-card__photo{
  transform:scale(1.04);
  filter:contrast(1.08) saturate(1.18) brightness(1.04);
}
/* Keep corners, code, and ribbon clearly visible above the photo */
.cocktail-card--has-photo .cocktail-card__corner,
.cocktail-card--has-photo .cocktail-card__code,
.cocktail-card--has-photo .cocktail-card__ribbon,
.cocktail-card--has-photo .cocktail-card__shimmer{
  z-index:2;
}
.cocktail-card--has-photo .cocktail-card__code{
  /* Subtle backdrop so the code stays readable on bright drinks */
  background:rgba(6,6,12,.55);
  padding:.15rem .4rem;
  border-radius:3px;
  backdrop-filter:blur(4px);
}
.cocktail-card__body{position:relative;padding:.8rem .85rem .8rem;border-top:1px solid rgba(0,240,255,.1);background:rgba(15,14,26,.55);backdrop-filter:blur(10px);overflow:hidden}
.cocktail-card__name{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;line-height:1;letter-spacing:.02em;margin-bottom:.15rem;text-transform:uppercase}
.cocktail-card__jp{font-family:'Noto Sans JP',sans-serif;font-size:.62rem;letter-spacing:.2em;color:var(--cyan);opacity:.75;margin-bottom:.4rem}
.cocktail-card__ing{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--text2);margin-bottom:.5rem;line-height:1.4}
/* Note se vuelve un overlay que aparece al hover, ya no ocupa espacio fijo */
.cocktail-card__note{position:absolute;left:.85rem;right:.85rem;top:.8rem;bottom:2.6rem;display:flex;align-items:center;justify-content:center;text-align:center;font-style:italic;font-size:.78rem;color:var(--text);line-height:1.4;background:linear-gradient(180deg,rgba(15,14,26,.92),rgba(10,10,20,.96));backdrop-filter:blur(6px);border-radius:4px;padding:.5rem;opacity:0;transform:translateY(6px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;z-index:2}
.cocktail-card:hover .cocktail-card__note{opacity:1;transform:translateY(0)}
.cocktail-card__foot{display:flex;justify-content:space-between;align-items:center;padding-top:.5rem;border-top:1px dashed rgba(255,255,255,.08)}
.cocktail-card__abv{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.16em;padding:.25rem .45rem;border:1px solid var(--bord);border-radius:99px;color:var(--cyan)}
.cocktail-card__abv.is-zero{color:var(--gold);border-color:rgba(255,215,0,.3)}
.cocktail-card__price{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--gold);letter-spacing:.05em;font-weight:600}

/* === MERCH === */
.merch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:1024px){.merch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.merch-grid{grid-template-columns:1fr}}
.merch-card{padding:1.4rem;background:linear-gradient(180deg,#10101e,#06060C);border:1px solid rgba(255,255,255,.06);border-radius:8px;transition:all .3s var(--ease);position:relative;overflow:hidden}
.merch-card:hover{transform:translateY(-6px);border-color:hsl(var(--hue) 80% 50%);box-shadow:0 20px 32px rgba(0,0,0,.4),0 0 24px hsl(var(--hue) 80% 50% / .25)}
.merch-card__art{aspect-ratio:1/1;background:radial-gradient(circle at 50% 40%,hsl(var(--hue) 70% 35%) 0%,#0a0a14 75%);border-radius:6px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;overflow:hidden;animation:floatY 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.merch-card__shape{width:60%;height:60%;background:repeating-linear-gradient(45deg,hsl(var(--hue) 70% 50% / .3) 0,hsl(var(--hue) 70% 50% / .3) 6px,transparent 6px,transparent 12px);border:1px dashed hsl(var(--hue) 70% 60% / .5)}
.merch-card[data-shape='1'] .merch-card__shape{border-radius:50%}
.merch-card__placeholder{position:absolute;bottom:.6rem;left:.6rem;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.2em;color:hsl(var(--hue) 70% 70%)}
.merch-card__code{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:var(--cyan);margin-bottom:.4rem}
.merch-card__name{font-family:'Bebas Neue',sans-serif;font-size:1.25rem;letter-spacing:.04em;line-height:1.05;margin-bottom:.4rem}
.merch-card__price{font-family:'JetBrains Mono',monospace;color:var(--gold);font-size:.9rem;margin-bottom:.8rem}
.merch-card__cta{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.22em;color:var(--cyan);padding:.6rem 0;border-top:1px solid var(--bord);width:100%;display:inline-flex;align-items:center;justify-content:space-between;transition:all .25s var(--ease)}
.merch-card__cta:hover{color:#fff;background:linear-gradient(90deg,transparent,rgba(0,240,255,.08),transparent)}
.merch-foot{text-align:center;margin-top:2.5rem}

/* === VIP === */
.section--vip{position:relative;background:linear-gradient(180deg,rgba(6,6,12,.55) 0%,rgba(8,7,15,.55) 100%);overflow:hidden;padding-top:9rem;padding-bottom:8rem;margin-top:2rem;border-top:1px solid rgba(255,215,0,.18);border-bottom:1px solid rgba(255,215,0,.18)}
.section--vip__bg{position:absolute;inset:0;pointer-events:none}
.section--vip__radial{position:absolute;inset:-20%;background:radial-gradient(circle at 50% 40%,rgba(255,215,0,.12) 0%,transparent 50%)}
.section--vip__watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Noto Sans JP',sans-serif;font-size:clamp(20rem,40vw,42rem);font-weight:900;color:rgba(255,215,0,.04);letter-spacing:.02em;line-height:.85;mix-blend-mode:screen}
.section--vip__particles{position:absolute;inset:0}
.section--vip__particles span{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:99px;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:rise linear infinite;opacity:.7}
.section--vip__crown{position:absolute;top:5%;right:5%;font-size:6rem;color:rgba(255,215,0,.12);animation:spin 30s linear infinite}
.section--vip .section__head{position:relative;z-index:5}

.vip-block{position:relative;z-index:5;margin-bottom:4rem;max-width:1400px;margin-left:auto;margin-right:auto}
.vip-block__head{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.vip-block__sub{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.2em;color:var(--text2)}
.vip-perks{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
@media(max-width:880px){.vip-perks{grid-template-columns:1fr}}
.vip-perk{position:relative;padding:1.6rem;background:linear-gradient(180deg,rgba(15,14,26,.6),rgba(6,6,12,.8));backdrop-filter:blur(10px);border-radius:8px;transition:all .35s var(--ease);overflow:hidden}
.vip-perk::before{content:'';position:absolute;inset:0;border-radius:8px;padding:1px;background:linear-gradient(135deg,var(--gold),var(--pink));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;transition:opacity .3s var(--ease)}
.vip-perk:hover{transform:translateY(-6px);box-shadow:0 0 32px rgba(255,215,0,.3)}
.vip-perk:hover::before{opacity:1}
.vip-perk__corner{position:absolute;width:12px;height:12px;border:1.5px solid var(--gold);pointer-events:none}
.vip-perk__corner--tl{top:8px;left:8px;border-right:0;border-bottom:0}
.vip-perk__corner--br{bottom:8px;right:8px;border-left:0;border-top:0}
.vip-perk__icon{margin-bottom:.9rem;color:var(--gold);filter:drop-shadow(0 0 12px rgba(255,215,0,.5));transition:transform .35s var(--ease)}
.vip-perk:hover .vip-perk__icon{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.vip-perk__title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.08em;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.4rem}
.vip-perk__desc{color:var(--text2);font-size:.9rem;line-height:1.5;font-style:italic}

.vip-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;align-items:start}
@media(max-width:1100px){.vip-tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vip-tiers{grid-template-columns:1fr}}
.vip-tier{position:relative;padding:1.8rem 1.4rem;background:linear-gradient(180deg,rgba(15,14,26,.85),rgba(6,6,12,.9));backdrop-filter:blur(10px);border-radius:10px;border:1px solid color-mix(in srgb,var(--c) 40%, transparent);text-align:center;transition:all .35s var(--ease);overflow:hidden}
.vip-tier:hover{transform:translateY(-12px);border-color:var(--c);box-shadow:0 28px 48px rgba(0,0,0,.5),0 0 36px color-mix(in srgb,var(--c) 40%, transparent)}
.vip-tier--pop{border-width:2px;box-shadow:0 0 20px color-mix(in srgb,var(--c) 30%, transparent)}
.vip-tier--life{position:relative;animation:floatY 4s ease-in-out infinite;background:linear-gradient(180deg,rgba(255,215,0,.12),rgba(15,14,26,.9) 50%,rgba(255,46,151,.08));border:0;padding:2.4rem 1.4rem 2rem;transform:scale(1.04)}
.vip-tier--life::before{content:'';position:absolute;inset:0;border-radius:10px;padding:2px;background:conic-gradient(from var(--a,0deg),var(--gold),var(--pink),var(--gold),var(--cyan),var(--gold));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rotate 4s linear infinite}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rotate{to{--a:360deg}}
.vip-tier--life::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,215,0,.1) 0%,transparent 60%);pointer-events:none;animation:goldShimmer 3s ease-in-out infinite alternate}
.vip-tier__ribbon{position:absolute;top:14px;right:-30px;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.22em;padding:.3rem 2.5rem;font-weight:700;transform:rotate(28deg)}
.vip-tier__ribbon--pop{background:var(--pink);color:#fff;box-shadow:0 0 16px rgba(255,46,151,.6)}
.vip-tier__ribbon--life{background:var(--grad-gold);color:#1a0a0a;box-shadow:0 0 20px rgba(255,215,0,.7)}
.vip-tier__sparkles span{position:absolute;color:var(--gold);font-size:1.2rem;animation:sparkle 2s ease-in-out infinite;text-shadow:0 0 12px rgba(255,215,0,.8)}
@keyframes sparkle{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.vip-tier__icon{display:flex;justify-content:center;margin-bottom:.9rem;filter:drop-shadow(0 0 12px var(--c))}
.vip-tier__name{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:.04em;line-height:1;margin-bottom:.3rem;color:#fff}
.vip-tier--life .vip-tier__name{font-size:2.4rem;background:var(--grad-gold);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:goldShimmer 4s linear infinite}
.vip-tier__sub{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.22em;color:var(--text2);margin-bottom:1.2rem}
.vip-tier__price{font-family:'JetBrains Mono',monospace;font-size:1.4rem;color:var(--c);margin-bottom:.4rem;letter-spacing:.04em;font-weight:700}
.vip-tier__price span{font-size:.7rem;letter-spacing:.2em;opacity:.7}
.vip-tier--life .vip-tier__price{font-size:1.7rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.vip-tier__once{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.18em;color:var(--gold);border-bottom:1px solid var(--gold);display:inline-block;padding-bottom:.2rem;margin-bottom:.8rem}
.vip-tier__tag{font-style:italic;font-size:.78rem;color:var(--text2);margin-bottom:1.2rem;min-height:2.4em}
.vip-tier .btn{width:100%;justify-content:center}

.vip-final{position:relative;z-index:5;text-align:center;padding:3rem 1rem 1rem;max-width:760px;margin:2rem auto 0}
.vip-final__title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,3.4rem);background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em;margin:1rem 0 .6rem}
.vip-final__sub{color:var(--text2);max-width:520px;margin:0 auto 1.6rem;line-height:1.6;font-style:italic}
.vip-final__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.vip-final__note{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.2em;color:var(--muted);margin-top:1.4rem}

/* === MEMORIES === */
.mem-filters{display:flex;gap:.5rem;flex-wrap:wrap}
.mem-filters button{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.2em;padding:.5rem .85rem;border:1px solid var(--bord);border-radius:99px;color:var(--text2);transition:all .2s var(--ease)}
.mem-filters button:hover{color:var(--cyan)}
.mem-filters button.is-active{background:var(--cyan);color:#000;border-color:var(--cyan);box-shadow:0 0 12px rgba(0,240,255,.5)}
.mem-grid{column-count:4;column-gap:1rem}
@media(max-width:1024px){.mem-grid{column-count:3}}
@media(max-width:640px){.mem-grid{column-count:2}}
.mem-tile{break-inside:avoid;margin-bottom:1rem;position:relative;border-radius:6px;overflow:hidden;height:var(--h);border:1px solid hsl(var(--hue) 50% 30% / .4);cursor:zoom-in;transition:transform .3s var(--ease)}
.mem-tile:hover{transform:scale(1.02);border-color:hsl(var(--hue) 80% 60%);box-shadow:0 0 20px hsl(var(--hue) 80% 50% / .35)}
.mem-tile__art{position:absolute;inset:0;background:linear-gradient(135deg,hsl(var(--hue) 70% 35%) 0%,hsl(calc(var(--hue) + 40) 60% 20%) 60%,#06060C 100%);transition:transform .5s var(--ease)}
.mem-tile__art::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 8px)}
.mem-tile:hover .mem-tile__art{transform:scale(1.08)}
.mem-tile__placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.2em;color:rgba(255,255,255,.45);text-align:center;pointer-events:none}
.mem-tile__cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.18em;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));transform:translateY(100%);transition:transform .3s var(--ease)}
.mem-tile:hover .mem-tile__cap{transform:translateY(0)}


/* prefers reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero__particles,.section--vip__particles,.amb-particles,.promo-banner__confetti{display:none}
}

/* focus rings */
button:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 4px rgba(0,240,255,.2)}


/* ============================================
   ROUTING — TRANSITIONS + PER-PAGE THEMES
   ============================================ */

.app {
  min-height: 100vh;
  position: relative;
  /* GLOBAL CYBERPUNK BACKGROUND on every page — same vibe as the hero */
  background:
    radial-gradient(ellipse at 70% 40%, rgba(255,46,151,.32) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 70%, rgba(139,92,246,.28) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(0,240,255,.22) 0%, transparent 50%),
    #06060C;
  background-attachment: fixed;
}
/* Subtle noise + scan overlay across every page */
.app::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,240,255,.025) 2px, rgba(0,240,255,.025) 3px);
  mix-blend-mode: overlay;
  opacity: .55;
}
/* Giant kanji watermark "ウォア" floating in the background — visible on every page,
   like a global atmospheric brand mark. */
.app::after {
  content: 'ウォア';
  position: fixed;
  left: 5%;
  top: 18%;
  z-index: 0;
  pointer-events: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(20rem, 38vw, 40rem);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.025);
  letter-spacing: -0.08em;
  line-height: 0.85;
  writing-mode: vertical-rl;
  mix-blend-mode: screen;
  user-select: none;
}
/* Make sure all direct content stays above the bg overlays.
   We exclude the nav AND the cursor elements AND the transition overlay
   AND the modal (which must keep its own position:fixed for centering)
   so they keep their own z-index and positioning. */
.app > *:not(.nav):not(.cur-dot):not(.cur-halo):not(.cur-trails):not(.cur-pulse):not(.tx):not(.top-marquee):not(.modal) {
  position: relative;
  z-index: 1;
}
/* The modal must stay position:fixed to center over the viewport, not its parent */
.app > .modal { z-index: 300; }
/* Nav lives above all overlays and stays pinned to the top */
.app > .nav { z-index: 100; }
/* Top marquee sits just below the nav */
.app > .top-marquee { z-index: 99; }
/* Transition overlay covers everything during page transitions */
.app > .tx { z-index: 9999; }
/* Cursor elements ALWAYS render on top of everything, including the nav.
   Forced at body level to escape any backdrop-filter stacking context. */
.cur-dot, .cur-halo, .cur-trails, .cur-pulse, .cur-trail {
  z-index: 2147483647 !important; /* max 32-bit int — guaranteed top */
}
.page-wrap { position: relative; }
.page {
  animation: pageIn 460ms cubic-bezier(.2,.7,.2,1) both;
  will-change: transform, opacity, filter;
}
.phase--out .page { animation: pageOut 150ms linear both; }
.phase--mid .page { opacity: 0; visibility: hidden; }
.phase--in  .page { animation: pageIn 320ms cubic-bezier(.2,.7,.2,1) both; }

@keyframes pageOut {
  0%   { opacity: 1; filter: none; transform: none; }
  60%  { filter: contrast(1.1) saturate(1.3); transform: translateX(2px); }
  100% { opacity: .55; filter: contrast(1.2) saturate(1.4) blur(.5px); transform: translateX(-3px); }
}
@keyframes pageIn {
  0%   { opacity: 0; transform: scale(.96) translateY(8px); filter: contrast(1.2) saturate(1.4); }
  40%  { opacity: 1; filter: contrast(1.05); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* RGB split during glitch */
.phase--out .page::before,
.phase--out .page::after,
.phase--in .page::before {
  content:""; position: absolute; inset: 0; pointer-events:none; z-index: 5;
  mix-blend-mode: screen;
  background: inherit;
}

/* Transition overlay */
/* ============================================================
   PAGE TRANSITIONS — cyberpunk holographic glitch
   Phases: out (300ms) → mid (400ms) → in (500ms) → idle
   ============================================================ */
.tx {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* ---------- Hexagonal grid backdrop (mid phase) ---------- */
.tx__hex {
  position:absolute; inset:0; opacity:0;
  background-image:
    radial-gradient(circle at center, rgba(0,240,255,.18) 1px, transparent 1.5px),
    repeating-linear-gradient(60deg, transparent 0 28px, rgba(0,240,255,.04) 28px 29px),
    repeating-linear-gradient(-60deg, transparent 0 28px, rgba(255,46,151,.04) 28px 29px),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(0,240,255,.04) 28px 29px);
  background-size: 32px 32px, auto, auto, auto;
  mix-blend-mode: screen;
  transition: opacity 100ms linear;
}
.tx--mid .tx__hex {
  opacity: .9;
  animation: txHexShift 600ms linear;
}
@keyframes txHexShift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; transform: scale(1.06); }
  to   { background-position: 32px 32px, 0 0, 0 0, 0 0; transform: scale(1); }
}

/* ---------- Vertical slabs that smash into center ---------- */
.tx__slabs {
  position:absolute; inset:0;
  pointer-events:none;
}
.tx__slab {
  position:absolute; top:0; bottom:0; width:55%;
  background: linear-gradient(180deg,
    #06060c 0%,
    rgba(20,8,30,.95) 30%,
    rgba(40,10,50,.92) 50%,
    rgba(20,8,30,.95) 70%,
    #06060c 100%);
  transform: translateX(-105%);
  will-change: transform;
}
.tx__slab--l {
  left:0;
  border-right: 2px solid var(--cyan);
  box-shadow: inset -1px 0 12px rgba(0,240,255,.6), 0 0 30px rgba(0,240,255,.5);
  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}
.tx__slab--r {
  right:0; left:auto;
  transform: translateX(105%);
  border-left: 2px solid var(--pink);
  box-shadow: inset 1px 0 12px rgba(255,46,151,.6), 0 0 30px rgba(255,46,151,.5);
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%);
}
.tx--out .tx__slab--l { animation: txSlabInL 280ms cubic-bezier(.7,.1,.3,1) both; }
.tx--out .tx__slab--r { animation: txSlabInR 280ms cubic-bezier(.7,.1,.3,1) both; }
.tx--mid .tx__slab--l { transform: translateX(0); }
.tx--mid .tx__slab--r { transform: translateX(0); }
.tx--in  .tx__slab--l { animation: txSlabOutL 320ms cubic-bezier(.7,.1,.3,1) both; }
.tx--in  .tx__slab--r { animation: txSlabOutR 320ms cubic-bezier(.7,.1,.3,1) both; }
@keyframes txSlabInL  { from { transform: translateX(-105%); } to { transform: translateX(0); } }
@keyframes txSlabInR  { from { transform: translateX(105%);  } to { transform: translateX(0); } }
@keyframes txSlabOutL { from { transform: translateX(0); } to { transform: translateX(-105%); } }
@keyframes txSlabOutR { from { transform: translateX(0); } to { transform: translateX(105%); } }

/* ---------- Static noise + RGB chromatic split ---------- */
.tx__static {
  position:absolute; inset:0; opacity:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 30%, rgba(0,240,255,.12), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,46,151,.10), transparent 40%);
  transition: opacity 80ms linear;
  z-index: 5;
}
.tx--mid .tx__static { opacity: 1; animation: txStatic 200ms steps(8) infinite; }
@keyframes txStatic {
  0% { background-position: 0 0; } 100% { background-position: 50px -30px; }
}

/* ---------- RGB chromatic aberration glitch ---------- */
.tx__chroma {
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0 4px,
      rgba(255,255,255,.05) 4px 5px);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 4;
}
.tx__chroma--r { background-color: rgba(255, 46, 151, .25); }
.tx__chroma--g { background-color: rgba(124, 217, 47, .18); }
.tx__chroma--b { background-color: rgba(0, 240, 255, .25); }
.tx--mid .tx__chroma--r { animation: chromaR 320ms steps(4) infinite; opacity: 1; }
.tx--mid .tx__chroma--g { animation: chromaG 280ms steps(4) infinite; opacity: 1; }
.tx--mid .tx__chroma--b { animation: chromaB 360ms steps(4) infinite; opacity: 1; }
@keyframes chromaR { 0% { transform: translate(-3px, 0); } 50% { transform: translate(2px, 1px); } 100% { transform: translate(-3px, 0); } }
@keyframes chromaG { 0% { transform: translate(0, 0); } 50% { transform: translate(-1px, -2px); } 100% { transform: translate(0, 0); } }
@keyframes chromaB { 0% { transform: translate(3px, 0); } 50% { transform: translate(-2px, 1px); } 100% { transform: translate(3px, 0); } }

/* ---------- Horizontal cyan light bands ---------- */
.tx__bands {
  position:absolute; inset:0; pointer-events:none;
  z-index: 6;
}
.tx__bands span {
  position:absolute; left:-10%; right:-10%; height: 12%;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,.35), rgba(255,46,151,.25), transparent);
  mix-blend-mode: screen; opacity: 0;
}
.tx--out .tx__bands span {
  animation: txBand 280ms cubic-bezier(.6,.1,.4,1) both;
}
@keyframes txBand {
  0% { transform: translateX(-30%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(30%); opacity: 0; }
}

/* ---------- Energy wave from center ---------- */
.tx__wave {
  position: absolute;
  left: 50%; top: 50%;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--pink);
  box-shadow: 0 0 30px rgba(255,46,151,.7), inset 0 0 20px rgba(255,46,151,.4);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 7;
}
.tx--mid .tx__wave { animation: txWave 700ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes txWave {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(60); }
}

/* ---------- Horizontal scanlines ---------- */
.tx__scan {
  position:absolute; left:0; right:0; height: 4px; top:50%; margin-top:-2px;
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(0,240,255,.9), 0 0 60px rgba(0,240,255,.5);
  transform: scaleX(0); transform-origin: left center;
  opacity: 0;
  z-index: 10;
}
.tx__scan--out {
  background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--cyan), transparent);
}
.tx__scan--in {
  background: linear-gradient(90deg, transparent, var(--theme-accent, var(--cyan)), #fff, var(--theme-accent, var(--cyan)), transparent);
  transform-origin: right center;
}
.tx--out .tx__scan--out { animation: scanOut 240ms cubic-bezier(.5,0,.7,1) both; }
.tx--mid .tx__scan--out, .tx--mid .tx__scan--in { opacity: 1; transform: scaleX(1); }
.tx--in  .tx__scan--in  { animation: scanIn 280ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes scanOut {
  0% { opacity: 0; transform: scaleX(0); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes scanIn {
  0% { opacity: 1; transform: scaleX(1); transform-origin: right center; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right center; }
}

/* ---------- Vertical scanlines (cross-hair feel) ---------- */
.tx__scan-v {
  position:absolute; top:0; bottom:0; width: 3px; left:50%; margin-left:-1.5px;
  background: var(--pink);
  box-shadow: 0 0 24px rgba(255,46,151,.9), 0 0 60px rgba(255,46,151,.5);
  transform: scaleY(0); transform-origin: top center;
  opacity: 0;
  z-index: 10;
}
.tx__scan-v--out { background: linear-gradient(180deg, transparent, var(--pink), #fff, var(--pink), transparent); }
.tx__scan-v--in {
  background: linear-gradient(180deg, transparent, var(--theme-accent, var(--pink)), #fff, var(--theme-accent, var(--pink)), transparent);
  transform-origin: bottom center;
}
.tx--out .tx__scan-v--out { animation: scanVOut 240ms cubic-bezier(.5,0,.7,1) 60ms both; }
.tx--mid .tx__scan-v--out, .tx--mid .tx__scan-v--in { opacity: 1; transform: scaleY(1); }
.tx--in  .tx__scan-v--in  { animation: scanVIn 280ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes scanVOut {
  0% { opacity: 0; transform: scaleY(0); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes scanVIn {
  0% { opacity: 1; transform: scaleY(1); transform-origin: bottom center; }
  100% { opacity: 0; transform: scaleY(0); transform-origin: bottom center; }
}

/* ---------- Theme color flash ---------- */
.tx__flash {
  position:absolute; inset:0; opacity: 0;
  mix-blend-mode: screen;
  z-index: 11;
}
.tx--in .tx__flash { animation: themeFlash 480ms ease-out both; }
@keyframes themeFlash {
  0% { opacity: 0; }
  20% { opacity: .55; }
  100% { opacity: 0; }
}

/* ---------- Big section title (mid phase) ---------- */
.tx__title {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 14;
  opacity: 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: .8rem;
  pointer-events: none;
}
.tx--mid .tx__title { animation: txTitleIn 500ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes txTitleIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.85); letter-spacing: .5em; filter: blur(8px); }
  40%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); letter-spacing: .12em; filter: blur(0); }
}
.tx__title-prefix {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .35em;
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0,240,255,.7);
}
.tx__title-text {
  position: relative;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  color: #fff;
  text-shadow:
    0 0 20px rgba(255,46,151,.7),
    0 0 40px rgba(0,240,255,.4),
    0 0 80px rgba(139,92,246,.3);
}
/* RGB split shadow on the title for that cyberpunk feel */
.tx__title-text::before,
.tx__title-text::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.tx__title-text::before {
  color: var(--pink); mix-blend-mode: screen;
  transform: translate(-3px, 0);
  text-shadow: 0 0 18px rgba(255,46,151,.6);
  animation: txTitleGlitchA 420ms steps(2) infinite;
}
.tx__title-text::after {
  color: var(--cyan); mix-blend-mode: screen;
  transform: translate(3px, 0);
  text-shadow: 0 0 18px rgba(0,240,255,.6);
  animation: txTitleGlitchB 380ms steps(2) infinite;
}
@keyframes txTitleGlitchA {
  0%, 100% { transform: translate(-3px, 0); clip-path: inset(0 0 60% 0); }
  50%      { transform: translate(-5px, 1px); clip-path: inset(40% 0 20% 0); }
}
@keyframes txTitleGlitchB {
  0%, 100% { transform: translate(3px, 0); clip-path: inset(60% 0 0 0); }
  50%      { transform: translate(5px, -1px); clip-path: inset(20% 0 40% 0); }
}
.tx__title-bar {
  display:block;
  width: clamp(120px, 18vw, 240px);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
  box-shadow: 0 0 12px rgba(0,240,255,.6);
}

/* ---------- Loader at bottom ---------- */
.tx__loader {
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  display:flex; flex-direction:row; align-items:center; gap:.9rem;
  opacity: 0;
  z-index: 15;
}
.tx--mid .tx__loader { opacity: 1; animation: loaderBlink 200ms steps(2) infinite; }
@keyframes loaderBlink {
  0%,49% { opacity: 1; } 50%,100% { opacity: .55; }
}
.tx__loader-mark {
  filter: drop-shadow(0 0 16px rgba(0,240,255,.8));
}
.tx__loader-text {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--cyan); letter-spacing: .15em;
  text-shadow: 0 0 12px rgba(0,240,255,.7);
}

/* ---------- Corner brackets (HUD frame) ---------- */
.tx__corner {
  position:absolute;
  width: 60px; height: 60px;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 20px rgba(0,240,255,.6);
  opacity: 0;
  z-index: 13;
  pointer-events: none;
}
.tx__corner--tl { top: 30px; left: 30px; border-right: none; border-bottom: none; }
.tx__corner--tr { top: 30px; right: 30px; border-left: none; border-bottom: none; }
.tx__corner--bl { bottom: 30px; left: 30px; border-right: none; border-top: none; }
.tx__corner--br { bottom: 30px; right: 30px; border-left: none; border-top: none; }
.tx--mid .tx__corner { opacity: 1; animation: txCornerIn 400ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes txCornerIn {
  0%   { opacity: 0; transform: scale(1.6); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tx__static, .tx__bands span, .tx__scan, .tx__scan-v,
  .tx__chroma, .tx__hex, .tx__slab, .tx__wave, .tx__title-text::before, .tx__title-text::after { display: none !important; }
  .tx__title { animation: none !important; opacity: 1 !important; }
}

/* Session ID */
.session-id {
  position: fixed; bottom: 14px; right: 14px; z-index: 50;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text3, rgba(184,181,200,.45));
  letter-spacing: .14em;
  padding: 6px 10px;
  border: 1px solid rgba(0,240,255,.14);
  background: rgba(6,6,12,.6);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
@media (max-width: 640px) { .session-id { bottom: 10px; right: 10px; font-size: 9px; padding: 4px 7px; } }

/* Cursor flash on transition */
.cursor-flash {
  position: fixed; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--cyan);
  transform: translate(-50%,-50%);
  pointer-events:none; z-index: 10000;
  box-shadow: 0 0 24px rgba(0,240,255,.9), inset 0 0 12px rgba(0,240,255,.6);
  animation: cursorFlash 380ms ease-out both;
}
@keyframes cursorFlash {
  0% { transform: translate(-50%,-50%) scale(.4); opacity:1; }
  100% { transform: translate(-50%,-50%) scale(3.4); opacity:0; }
}
@media (pointer: coarse) { .cursor-flash { display:none; } }

/* Per-page themes (subtle accent shifts) */
.theme--home     { --theme-accent: #FF2E97; --theme-flash: rgba(255,46,151,.4); }
.theme--events   { --theme-accent: #FF6A1D; --theme-flash: rgba(255,106,29,.45); }
.theme--djs      { --theme-accent: #B57BFF; --theme-flash: rgba(181,123,255,.42); }
.theme--staff    { --theme-accent: #5DD3FF; --theme-flash: rgba(93,211,255,.32); }
.theme--cocktails{ --theme-accent: #00F0FF; --theme-flash: rgba(0,240,255,.4); }
.theme--merch    { --theme-accent: #FFD700; --theme-flash: rgba(255,215,0,.38); }
.theme--vip      { --theme-accent: #FFD700; --theme-flash: rgba(255,215,0,.55); }
.theme--memories { --theme-accent: #C9B7FF; --theme-flash: rgba(201,183,255,.34); }

/* Events page tint */
.theme--events main { background:
  radial-gradient(900px 600px at 30% 20%, rgba(255,106,29,.08), transparent 60%),
  radial-gradient(800px 500px at 70% 80%, rgba(255,46,85,.07), transparent 60%);
}
.theme--staff main { background:
  radial-gradient(800px 500px at 50% 0%, rgba(93,211,255,.05), transparent 60%);
}
.theme--memories main { background:
  radial-gradient(900px 600px at 30% 30%, rgba(139,92,246,.06), transparent 60%);
}

/* Page wrapper top padding so nav doesn't overlap (Hero handles its own) */
.page-wrap { min-height: calc(100vh - 80px); }
.app:not(.theme--home) .page-wrap { padding-top: 92px; }

/* Sound icon button */
.nav__icon--snd { color: var(--cyan); }

/* Mobile transition timing */
@media (max-width: 640px) {
  .page { animation-duration: 280ms; }
  .phase--out .page { animation-duration: 100ms; }
  .phase--in  .page { animation-duration: 220ms; }
  .tx__loader-text { font-size: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tx__static, .tx__bands span, .tx__scan, .tx__flash { display: none !important; }
  .page { animation: none !important; opacity: 1 !important; }
}

/* ============================================================
   FOOTER — Compact horizontal cyberpunk close
   ============================================================ */
.footer.footer--pro{
  position:relative;
  padding:1.4rem clamp(1.5rem, 4vw, 3rem) 0;
  background:linear-gradient(180deg, transparent 0%, rgba(6,6,12,.5) 12%, #06060C 60%);
  overflow:hidden;
  isolation:isolate;
}
/* Animated hairline accent at the top — subtle, single elegant line */
.footer__top-line{
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,46,151,.35) 30%,
    rgba(0,240,255,.35) 50%,
    rgba(139,92,246,.35) 70%,
    transparent 100%);
  background-size:200% 100%;
  animation:footerLineShift 10s linear infinite;
}
@keyframes footerLineShift{
  from{background-position:0% 0}
  to{background-position:-200% 0}
}

/* ---------- Inner: 3-zone horizontal flex (single row on desktop) ---------- */
.footer__inner{
  position:relative; z-index:2;
  max-width:1500px;
  margin:0 auto;
  padding-bottom:.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem, 3vw, 2.5rem);
  flex-wrap:wrap;
}

/* ---------- LEFT: Brand block (compact) ---------- */
.footer__brand-block{
  display:flex; align-items:center; gap:.9rem;
  flex-shrink:0;
}
.footer__logo-mark{
  display:inline-flex; align-items:baseline; gap:.45rem;
  text-decoration:none;
  transition:transform .25s var(--ease);
  flex-shrink:0;
}
.footer__logo-mark:hover{transform:translateY(-1px)}
.footer__logo-text{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.7rem;
  letter-spacing:-.01em;
  line-height:1;
  background:linear-gradient(180deg, #fff 0%, #c8c8e0 60%, #FF2E97 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer__logo-bang{
  background:linear-gradient(180deg, #FF2E97 0%, #FF6BCB 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer__logo-jp{
  font-family:'Noto Sans JP', sans-serif;
  font-size:.7rem;
  letter-spacing:.25em;
  color:var(--cyan);
  opacity:.6;
}
.footer__tagline{
  color:rgba(255,255,255,.45);
  font-size:.72rem;
  line-height:1.4;
  font-style:italic;
  max-width:280px;
  border-left:2px solid rgba(255,46,151,.4);
  padding-left:.7rem;
}

/* ---------- CENTER: Copyright credit ---------- */
.footer__facts{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono', monospace;
  font-size:.65rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
  text-align:center;
  flex:1 1 auto;
}
.footer__facts .footer__copyright{
  display:inline-flex; align-items:center; gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
.footer__facts .footer__copyright strong{
  color:rgba(255,255,255,.85);
  font-weight:600;
}
.footer__facts .footer__copyright sup{
  font-size:.6em;
  color:rgba(0,240,255,.7);
  margin-left:1px;
}
.footer__facts .footer__copyright .footer__credit-flower{
  font-size:1em;
  display:inline-block;
  animation:footerFlowerSpin 8s linear infinite;
}

/* ---------- RIGHT: Nav pills + social icons ---------- */
.footer__actions{
  display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap;
}
.footer__nav-inline{
  display:inline-flex; align-items:center; gap:.05rem;
  flex-wrap:wrap;
}
.footer__nav-pill{
  font-family:'JetBrains Mono', monospace;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  padding:.4rem .65rem;
  text-decoration:none;
  border-radius:4px;
  transition:all .2s var(--ease);
  position:relative;
}
.footer__nav-pill:hover{
  color:var(--cyan);
  background:rgba(0,240,255,.06);
  text-shadow:0 0 8px rgba(0,240,255,.4);
}
.footer__social{
  display:inline-flex; align-items:center; gap:.5rem;
  padding-left:1rem;
  border-left:1px solid rgba(255,255,255,.08);
}
.footer__social-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  text-decoration:none;
  transition:all .25s var(--ease);
  position:relative;
}
.footer__social-btn:hover{
  color:var(--cyan);
  border-color:rgba(0,240,255,.5);
  background:rgba(0,240,255,.08);
  transform:translateY(-2px);
  box-shadow:0 0 14px rgba(0,240,255,.3);
}
.footer__social-btn--accent{
  border-color:rgba(255,46,151,.4);
  color:rgba(255,46,151,.85);
  background:rgba(255,46,151,.05);
}
.footer__social-btn--accent::after{
  content:'';
  position:absolute;
  top:3px; right:3px;
  width:6px; height:6px;
  border-radius:99px;
  background:var(--pink);
  box-shadow:0 0 6px var(--pink);
  animation:footerStatusPulse 1.6s ease-in-out infinite;
}
.footer__social-btn--accent:hover{
  color:#fff;
  border-color:var(--pink);
  background:rgba(255,46,151,.18);
  box-shadow:0 0 14px rgba(255,46,151,.5);
}
.footer__social-btn[data-tip]:hover::before{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace;
  font-size:.55rem;
  letter-spacing:.2em;
  color:var(--cyan);
  background:rgba(6,6,12,.95);
  border:1px solid rgba(0,240,255,.3);
  padding:.3rem .55rem;
  white-space:nowrap;
  border-radius:3px;
  pointer-events:none;
}

/* ---------- Bottom strip — copyright ---------- */
.footer__bottom{
  position:relative; z-index:2;
  max-width:1500px;
  margin:0 auto;
  padding:.7rem 0 1.1rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem;
  letter-spacing:.18em;
  color:rgba(255,255,255,.4);
}
.footer__bottom-spacer{flex:1 1 auto}
.footer__copyright strong{color:rgba(255,255,255,.75); font-weight:600}
.footer__copyright sup{font-size:.6em; color:rgba(0,240,255,.7); margin-left:1px}
.footer__sep{color:rgba(255,255,255,.18)}
.footer__credit{color:rgba(255,255,255,.45)}
.footer__credit strong{
  color:var(--pink); font-weight:600;
  text-shadow:0 0 6px rgba(255,46,151,.35);
}
.footer__credit-flower{
  font-size:.95em; display:inline-block;
  animation:footerFlowerSpin 8s linear infinite;
}
@keyframes footerFlowerSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.footer__bookings{color:rgba(255,255,255,.4)}
.footer__bookings a{
  color:var(--pink);
  text-decoration:none;
  font-weight:600;
  transition:text-shadow .2s;
}
.footer__bookings a:hover{
  text-shadow:0 0 8px rgba(255,46,151,.6);
}
.footer__status{
  display:inline-flex; align-items:center; gap:.4rem;
  color:rgba(124,217,47,.85);
}
.footer__status-dot{
  width:6px; height:6px; border-radius:99px;
  background:#7CD92F;
  box-shadow:0 0 8px #7CD92F;
  animation:footerStatusPulse 2s ease-in-out infinite;
}
@keyframes footerStatusPulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

/* ---------- Marquee at the very bottom (clean, no borders) ---------- */
.footer__marquee{
  position:relative;
  margin:0 calc(-1 * clamp(1.5rem, 4vw, 3rem));
  padding:.8rem 0;
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.footer__marquee-track{
  display:inline-flex; align-items:center; gap:1.4rem;
  white-space:nowrap;
  font-family:'Bebas Neue', sans-serif;
  font-size:.85rem;
  letter-spacing:.22em;
  color:rgba(255,255,255,.65);
  animation:footerMarqueeScroll 50s linear infinite;
  padding-left:100%;
}
.footer__marquee-track > span:not(.footer__marquee-dot){
  background:linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(0,240,255,.7) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.footer__marquee-dot{
  color:var(--pink);
  font-size:.55em;
  text-shadow:0 0 6px var(--pink);
  flex-shrink:0;
}
@keyframes footerMarqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.footer__marquee:hover .footer__marquee-track{animation-play-state:paused}

/* ---------- Responsive ---------- */
@media (max-width: 1280px){
  .footer__tagline{display:none}
}
@media (max-width: 980px){
  .footer__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:1.2rem;
  }
  .footer__nav-inline{display:none}
  .footer__facts{justify-content:flex-start}
}
@media (max-width: 560px){
  .footer__bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    font-size:.55rem;
  }
  .footer__bottom-spacer{display:none}
  .footer__facts{gap:.5rem}
  .footer__fact{font-size:.55rem; padding:.3rem .55rem}
  .footer__fact-sep{display:none}
}

/* ============================================================
   TOP MARQUEE — fixed banner just below the nav
   `top` is set inline via JS based on real nav height.
   ============================================================ */
.top-marquee{
  position:fixed;
  left:0; right:0;
  z-index:99;
  height:32px;
  background:linear-gradient(90deg,
    rgba(6,6,12,.78) 0%,
    rgba(20,8,30,.7) 50%,
    rgba(6,6,12,.78) 100%);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid rgba(0,240,255,.15);
  border-top:1px solid rgba(255,46,151,.12);
  overflow:hidden;
  pointer-events:none;
  display:flex;
  align-items:center;
  mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.top-marquee__track{
  display:flex;
  align-items:center;
  gap:1.6rem;
  white-space:nowrap;
  font-family:'Bebas Neue', sans-serif;
  font-size:.9rem;
  letter-spacing:.22em;
  color:rgba(255,255,255,.85);
  animation:topMarqueeScroll 60s linear infinite;
  flex-shrink:0;
  will-change:transform;
}
.top-marquee__track > span:not(.top-marquee__dot){
  flex-shrink:0;
  background:linear-gradient(90deg, #ffffff 0%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 12px rgba(0,240,255,.3);
}
.top-marquee__dot{
  color:var(--pink);
  font-size:.55em;
  text-shadow:0 0 8px var(--pink);
  flex-shrink:0;
  opacity:.9;
}
/* Each set takes exactly half the track width.
   Translating -50% loops seamlessly because both sets are identical. */
@keyframes topMarqueeScroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ============================================================
   HERO COUNTDOWN — large neon flip-style timer
   ============================================================ */
.hero-cd{
  display:flex; flex-direction:column;
  gap:.65rem;
  margin-top:.4rem;
  max-width:560px;
}
.hero-cd__head{
  display:inline-flex; align-items:center; gap:.7rem;
  flex-wrap:wrap;
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem;
  letter-spacing:.25em;
}
.hero-cd__label{
  color:var(--cyan);
  text-shadow:0 0 6px rgba(0,240,255,.4);
}
.hero-cd__event{
  color:rgba(255,255,255,.85);
  padding:.2rem .55rem;
  border:1px solid rgba(255,46,151,.4);
  background:rgba(255,46,151,.06);
  border-radius:99px;
  text-shadow:0 0 6px rgba(255,46,151,.4);
}
.hero-cd__date{
  color:rgba(255,255,255,.5);
  margin-left:auto;
}
.hero-cd__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.7rem;
}
.hero-cd__cell{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  padding:.85rem .4rem .55rem;
  background:linear-gradient(180deg, rgba(15,8,25,.7) 0%, rgba(6,6,12,.85) 100%);
  border:1px solid rgba(255,46,151,.3);
  border-radius:6px;
  overflow:hidden;
  isolation:isolate;
}
/* Subtle inner grid pattern reminiscent of the reference image */
.hero-cd__cell::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,46,151,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,46,151,.06) 1px, transparent 1px);
  background-size:18px 18px;
  pointer-events:none;
  z-index:0;
}
/* Pink glow on top edge */
.hero-cd__cell::after{
  content:'';
  position:absolute; left:10%; right:10%; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--pink), transparent);
  box-shadow:0 0 8px var(--pink);
  opacity:.55;
  pointer-events:none;
}
.hero-cd__num{
  position:relative;
  z-index:1;
  font-family:'Bebas Neue', 'Inter', sans-serif;
  font-size:clamp(2rem, 3.6vw, 3rem);
  line-height:1;
  font-weight:700;
  color:var(--pink);
  letter-spacing:.04em;
  text-shadow:
    0 0 10px rgba(255,46,151,.85),
    0 0 24px rgba(255,46,151,.55),
    0 0 48px rgba(255,46,151,.3);
  font-variant-numeric:tabular-nums;
}
.hero-cd__unit{
  position:relative;
  z-index:1;
  font-family:'JetBrains Mono', monospace;
  font-size:.55rem;
  letter-spacing:.3em;
  color:rgba(255,255,255,.45);
  margin-top:.4rem;
}
/* Subtle pulse on the seconds cell every second */
.hero-cd__cell--seconds{
  animation:heroCdSecondsPulse .85s ease-out;
}
@keyframes heroCdSecondsPulse{
  0%   { box-shadow:0 0 0 0 rgba(255,46,151,.45); }
  100% { box-shadow:0 0 0 6px rgba(255,46,151,0); }
}
/* Live state */
.hero-cd__live{
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6rem;
  letter-spacing:.18em;
  color:var(--pink);
  text-align:center;
  padding:1rem;
  border:1px solid rgba(255,46,151,.5);
  border-radius:6px;
  background:rgba(255,46,151,.08);
  text-shadow:0 0 14px rgba(255,46,151,.7);
  animation:heroCdLivePulse 1.4s ease-in-out infinite;
}
@keyframes heroCdLivePulse{
  0%,100%{ box-shadow:0 0 18px rgba(255,46,151,.3) }
  50%   { box-shadow:0 0 32px rgba(255,46,151,.55) }
}
@media (max-width: 560px){
  .hero-cd__grid{gap:.5rem}
  .hero-cd__cell{padding:.6rem .3rem .45rem}
  .hero-cd__date{margin-left:0; flex-basis:100%}
}

/* ============================================================
   Hero floating logo — sits next to the title (between text and video)
   Reuses .hero__logo-img + .hero__logo-glitch + .hero__logo-halo styling
   from extras.css, but positioned independently as a floating element.
   ============================================================ */
.hero__floating-logo{
  position:absolute;
  top: 18%;
  left: clamp(28%, 32%, 36%);
  width: clamp(220px, 22vw, 360px);
  height: clamp(220px, 22vw, 360px);
  z-index: 4;
  pointer-events:auto;
  perspective:1000px;
  transform-style:preserve-3d;
  cursor:pointer;
  animation:
    heroFloatingLogoDance 6s ease-in-out infinite,
    heroLogoIn 700ms cubic-bezier(.2,.7,.2,1.05) 350ms both,
    heroLogoBreathe 2.6s ease-in-out infinite;
}
@keyframes heroFloatingLogoDance{
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: translate(4px, -8px) rotate(.8deg) scale(1.01); }
  50%      { transform: translate(-3px, 5px) rotate(-.6deg) scale(1.02); }
  75%      { transform: translate(6px, -4px) rotate(.4deg) scale(1.005); }
}
.hero__floating-logo:hover{
  filter:saturate(1.2) brightness(1.05);
  transition:filter .4s ease;
}
@media (max-width: 980px){
  .hero__floating-logo{display:none}
}

/* ============================================================
   NAV HOME BUTTON — cyberpunk holographic pill
   Sits next to the logo image, signals "click to return home"
   ============================================================ */
.nav__home-pill{
  display:inline-flex; align-items:center;
  gap:.5rem;
  padding:.4rem .65rem;
  font-family:'JetBrains Mono', monospace;
  background:
    linear-gradient(180deg, rgba(20,8,30,.9) 0%, rgba(6,6,12,.95) 100%);
  border:1px solid rgba(0,240,255,.25);
  border-radius:4px;
  position:relative;
  overflow:hidden;
  transition:all .3s var(--ease);
  box-shadow:
    0 0 0 0 rgba(255,46,151,0),
    inset 0 1px 0 rgba(255,255,255,.04);
  isolation:isolate;
}
/* Subtle scanline pattern over the pill */
.nav__home-pill::before{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,
    transparent 0 2px,
    rgba(0,240,255,.04) 2px 3px);
  pointer-events:none;
  z-index:0;
  opacity:.6;
}
/* Animated gradient sweep */
.nav__home-pill::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(110deg,
    transparent 30%,
    rgba(0,240,255,.18) 45%,
    rgba(255,46,151,.14) 55%,
    transparent 70%);
  background-size:200% 100%;
  background-position:200% 0;
  pointer-events:none;
  z-index:1;
  transition:background-position .6s var(--ease);
}
.nav__home-pill-bracket{
  position:relative; z-index:2;
  font-size:.85rem;
  color:var(--cyan);
  text-shadow:0 0 6px rgba(0,240,255,.5);
  font-weight:700;
}
.nav__home-pill-bracket--l{ margin-right:.05rem; }
.nav__home-pill-bracket--r{ margin-left:.05rem; }
.nav__home-pill-stack{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:flex-start;
  line-height:1;
}
.nav__home-pill-row{
  display:inline-flex; align-items:center; gap:.4rem;
}
.nav__home-pill-ico{
  font-size:.6rem;
  color:var(--pink);
  text-shadow:0 0 8px rgba(255,46,151,.7);
  animation:navHomeIcoSpin 4s linear infinite;
}
@keyframes navHomeIcoSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.nav__home-pill-text{
  position:relative;
  font-size:.78rem;
  letter-spacing:.32em;
  font-weight:700;
  background:linear-gradient(180deg, #fff 0%, #c8c8e0 50%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 12px rgba(0,240,255,.3);
}
/* RGB chromatic split layers (visible on hover) */
.nav__home-pill-text::before,
.nav__home-pill-text::after{
  content:attr(data-text);
  position:absolute; left:0; top:0;
  width:100%; height:100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.nav__home-pill-text::before{
  background:var(--pink); -webkit-background-clip:text; background-clip:text;
  color:var(--pink);
  transform:translate(0,0);
  mix-blend-mode:screen;
}
.nav__home-pill-text::after{
  background:var(--cyan); -webkit-background-clip:text; background-clip:text;
  color:var(--cyan);
  transform:translate(0,0);
  mix-blend-mode:screen;
}
.nav__home-pill-sub{
  font-size:.42rem;
  letter-spacing:.32em;
  color:rgba(255,255,255,.35);
  margin-top:.3rem;
  text-transform:uppercase;
}

/* HOVER state — light up the whole pill */
.nav__logo:hover .nav__home-pill{
  border-color:rgba(255,46,151,.55);
  background:
    linear-gradient(180deg, rgba(40,12,40,.95) 0%, rgba(20,8,30,.98) 100%);
  box-shadow:
    0 0 24px rgba(255,46,151,.35),
    0 0 48px rgba(0,240,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.nav__logo:hover .nav__home-pill::after{
  background-position:-100% 0;
}
.nav__logo:hover .nav__home-pill-text::before{
  opacity:.7;
  transform:translate(-2px, 0);
}
.nav__logo:hover .nav__home-pill-text::after{
  opacity:.7;
  transform:translate(2px, 0);
}
.nav__logo:hover .nav__home-pill-bracket{
  color:var(--pink);
  text-shadow:0 0 10px rgba(255,46,151,.8);
}
.nav__logo:hover .nav__home-pill-sub{
  color:rgba(0,240,255,.7);
}
.nav__logo:hover .nav__home-pill-ico{
  animation-duration:1s;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,240,255,.9);
}

/* ACTIVE / pressed state */
.nav__logo:active .nav__home-pill{
  transform:translateY(0);
  box-shadow:
    0 0 16px rgba(255,46,151,.5),
    inset 0 0 20px rgba(255,46,151,.2);
}

/* Hide pill on small screens — only the logo image stays */
@media (max-width: 720px){
  .nav__home-pill{display:none}
}

/* ============================================================
   SECTION HEAD — SIDE / FLOATING variant
   Higher specificity (header.section__head--side) overrides the
   default .section__head grid completely.
   ============================================================ */
/* When a section contains a side-head, push ALL content right so
   the vertical aside lives in the gutter without overlapping anything. */
.section:has(.section__head--side){
  padding-left: 8rem !important;
}
/* Fallback for browsers without :has() — apply via section variants too */
@supports not selector(:has(*)){
  .section--staff,
  .section--vip,
  .section{ /* generic fallback */ }
}

header.section__head--side,
.section__head.section__head--side{
  display:block !important;
  grid-template-columns:none !important;
  position:static !important; /* aside positions against .section, not against header */
  margin:0 0 1.4rem !important;
  padding-left:0;
  min-height:auto;
  align-items:initial !important;
  gap:0 !important;
}

/* ---------- Vertical floating aside ----------
   Positioned against the .section (which is relative) so it sits
   in the section's left gutter and stays through ALL content height. */
.section__head--side .section__head-aside{
  position:absolute;
  left:0;
  top:8rem; /* matches .section padding-top so it aligns with content top */
  bottom:auto;
  display:flex; flex-direction:column;
  align-items:center;
  gap:.7rem;
  padding:.6rem 0;
  width:6rem;
  pointer-events:none;
  z-index:2;
}
.section__head--side .section__head-num{
  font-family:'Bebas Neue', sans-serif;
  font-size:2.2rem;
  line-height:1;
  letter-spacing:.04em;
  background:linear-gradient(180deg, var(--gold, #FFD700) 0%, #FF9900 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,215,0,.4)) drop-shadow(0 0 14px rgba(255,153,0,.3));
}
.section__head--side .section__head-line{
  width:1px; height:34px;
  background:linear-gradient(180deg, var(--cyan), transparent);
  opacity:.85;
  box-shadow:0 0 6px rgba(0,240,255,.7);
}
.section__head--side .section__head-title-vert{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:'Bebas Neue', sans-serif;
  font-size:1.4rem;
  letter-spacing:.18em;
  background:linear-gradient(180deg, #fff 0%, var(--pink) 50%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(0 0 8px rgba(255,46,151,.65))
    drop-shadow(0 0 18px rgba(255,46,151,.35))
    drop-shadow(0 0 32px rgba(0,240,255,.25));
  margin-top:.2rem;
  animation:sectionHeadVertGlow 3s ease-in-out infinite;
}
@keyframes sectionHeadVertGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 8px rgba(255,46,151,.65))
      drop-shadow(0 0 18px rgba(255,46,151,.35))
      drop-shadow(0 0 32px rgba(0,240,255,.25));
  }
  50%{
    filter:
      drop-shadow(0 0 12px rgba(255,46,151,.85))
      drop-shadow(0 0 24px rgba(255,46,151,.5))
      drop-shadow(0 0 42px rgba(0,240,255,.4));
  }
}
.section__head--side .section__head-jp-vert{
  writing-mode:vertical-rl;
  font-family:'Noto Sans JP', sans-serif;
  font-size:.7rem;
  letter-spacing:.4em;
  color:var(--cyan);
  opacity:.85;
  text-shadow:0 0 10px rgba(0,240,255,.7);
  margin:0 !important;
  display:block !important;
}

/* ---------- Horizontal compact bar ---------- */
.section__head--side .section__head-bar{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem 1.1rem;
  padding:.55rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin:0;
}
.section__head--side .section__head-bar .hud-label{
  font-size:.6rem;
  letter-spacing:.28em;
  padding:.25rem .55rem;
  border:1px solid rgba(0,240,255,.25);
  border-radius:99px;
  background:rgba(0,240,255,.04);
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,240,255,.4);
  flex-shrink:0;
  opacity:1;
}
/* Compact horizontal title — overrides the giant default .section__title */
.section__head--side .section__head-bar .section__title.section__head-title-h{
  font-size:1rem;
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  margin:0;
  padding:0;
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1.1;
  background:linear-gradient(90deg, #fff 0%, var(--pink) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.section__head--side .section__head-bar .section__jp.section__head-jp-h{
  font-size:.7rem;
  letter-spacing:.32em;
  margin:0 !important;
  padding:0;
  color:rgba(0,240,255,.55);
  display:inline-block;
}
.section__head--side .section__head-bar .section__lead.section__head-lead-wrap,
.section__head--side .section__head-bar .section__head-lead-wrap{
  margin:0 0 0 auto;
  padding:0;
  flex-shrink:1;
  font-size:.85rem;
  line-height:1.5;
  color:rgba(255,255,255,.55);
  max-width:none;
  text-align:right;
  flex-basis:auto;
}

/* Gold variant for VIP */
.section__head--side.section__head--gold .section__head-title-vert{
  background:linear-gradient(180deg, #fff 0%, var(--gold, #FFD700) 50%, #FF9900 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:
    drop-shadow(0 0 8px rgba(255,215,0,.65))
    drop-shadow(0 0 18px rgba(255,153,0,.4));
  animation:sectionHeadVertGoldGlow 3s ease-in-out infinite;
}
@keyframes sectionHeadVertGoldGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 8px rgba(255,215,0,.65))
      drop-shadow(0 0 18px rgba(255,153,0,.4));
  }
  50%{
    filter:
      drop-shadow(0 0 14px rgba(255,215,0,.85))
      drop-shadow(0 0 26px rgba(255,153,0,.55));
  }
}
.section__head--side.section__head--gold .section__head-jp-vert{
  color:var(--gold, #FFD700);
  text-shadow:0 0 10px rgba(255,215,0,.7);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px){
  .section:has(.section__head--side){padding-left:5vw !important}
  header.section__head--side,
  .section__head.section__head--side{padding-left:0}
  .section__head--side .section__head-aside{
    position:relative; left:auto; top:auto;
    flex-direction:row;
    width:auto;
    gap:.6rem;
    padding:0 0 .4rem;
  }
  .section__head--side .section__head-line{
    width:24px; height:1px;
    background:linear-gradient(90deg, var(--cyan), transparent);
  }
  .section__head--side .section__head-title-vert{
    writing-mode:horizontal-tb;
    transform:none;
    font-size:1.6rem;
  }
  .section__head--side .section__head-jp-vert{
    writing-mode:horizontal-tb;
  }
  .section__head--side .section__head-num{font-size:1.8rem}
  .section__head--side .section__head-bar{padding:.4rem 0}
  .section__head--side .section__head-bar .section__head-title-h{display:none}
  .section__head--side .section__head-bar .section__head-lead-wrap{
    margin:0;
    text-align:left;
    flex-basis:100%;
  }
}