/* =========================================================
   VENTURI — acid-trip tech house / minimal / indie tech DJ frontpage
   ========================================================= */

:root{
  --bg:        #050109;
  --bg-2:      #03130a;
  --fg:        #f2eefc;
  --green:     #16ff8f;   /* primary brand color — neon spring green */
  --green-2:   #39ff14;   /* secondary acid-green, for gradients/sparkle */
  --cyan:      #17f7ff;   /* teal, green-family secondary */
  --lime:      #c6ff1a;   /* yellow-green, green-family secondary */
  --purple:    #8b2bff;   /* rare accent — used sparingly for contrast pop */
  --pink:      #ff2bd6;   /* rare accent — glitch flicker only */
  --orange:    #ff7a1a;   /* status accent (sold-out tags etc.) */
  --ink:       #05010c;   /* near-black used for button faces/shadows/text */
  --font-display: 'Bungee', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  --bass: 0;   /* driven by JS: 0..1 */
  --mid: 0;
  --treble: 0;
}

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  overflow-x: hidden;
  cursor: none;
  min-height: 100%;
}

@media (max-width: 860px), (hover:none){
  body{ cursor: auto; }
  .cursor-dot, .cursor-ring{ display:none; }
}

a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background: var(--green); color: var(--ink); }

/* ---------------- background canvas ---------------- */
#bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display:block;
}

/* ---------------- overlays: grain / scanlines / vignette ---------------- */
.grain{
  position: fixed; inset:-100px; z-index: 5; pointer-events:none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain-shift 1s steps(2) infinite;
}
@keyframes grain-shift{
  0%{ transform: translate(0,0); }
  50%{ transform: translate(-2%,1%); }
  100%{ transform: translate(1%,-2%); }
}

.scanlines{
  position: fixed; inset:0; z-index: 6; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 2px,
    transparent 3px
  );
  opacity:.5;
  mix-blend-mode: overlay;
}

.vignette{
  position: fixed; inset:0; z-index:7; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(2,0,6,0.75) 100%);
}

/* ---------------- custom cursor ---------------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index: 9999;
  pointer-events:none; border-radius:50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot{
  width:6px; height:6px; background: var(--cyan);
}
.cursor-ring{
  width:34px; height:34px; border: 1.5px solid var(--green);
  transition: width .18s ease, height .18s ease, border-color .18s ease, opacity .18s ease;
}
.cursor-ring.active{
  width: 60px; height:60px; border-color: var(--lime);
}

/* ---------------- glitch text ---------------- */
.glitch{
  position: relative;
  color: var(--fg);
  letter-spacing: .02em;
}
.glitch::before,
.glitch::after{
  content: attr(data-text);
  position: absolute; left:0; top:0; width:100%; height:100%;
  background: transparent;
  overflow:hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before{
  color: var(--pink);
  transform: translate(0,0);
  animation: glitch-1 4.5s infinite steps(1);
  mix-blend-mode: screen;
}
.glitch::after{
  color: var(--cyan);
  transform: translate(0,0);
  animation: glitch-2 3.7s infinite steps(1);
  mix-blend-mode: screen;
}
@keyframes glitch-1{
  0%, 89%, 100%{ clip-path: inset(0 0 0 0); transform: translate(0,0); opacity:0; }
  90%{ clip-path: inset(10% 0 60% 0); transform: translate(-4px,-2px); opacity:.9; }
  92%{ clip-path: inset(60% 0 5% 0); transform: translate(4px,1px); opacity:.9; }
  94%{ clip-path: inset(30% 0 40% 0); transform: translate(-3px,2px); opacity:.9; }
  96%{ clip-path: inset(5% 0 80% 0); transform: translate(2px,-1px); opacity:.9; }
  98%{ opacity:0; }
}
@keyframes glitch-2{
  0%, 91%, 100%{ clip-path: inset(0 0 0 0); transform: translate(0,0); opacity:0; }
  92%{ clip-path: inset(70% 0 5% 0); transform: translate(3px,2px); opacity:.85; }
  94%{ clip-path: inset(15% 0 55% 0); transform: translate(-4px,-1px); opacity:.85; }
  96%{ clip-path: inset(45% 0 20% 0); transform: translate(3px,-2px); opacity:.85; }
  98%{ opacity:0; }
}

.glitch-hover{ position:relative; display:inline-block; cursor:none; }
.glitch-hover::before, .glitch-hover::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; width:100%; opacity:0;
  pointer-events:none;
}
.glitch-hover:hover::before{
  color: var(--pink); opacity:.8; transform: translate(-3px,2px);
  clip-path: inset(20% 0 30% 0);
}
.glitch-hover:hover::after{
  color: var(--cyan); opacity:.8; transform: translate(3px,-2px);
  clip-path: inset(50% 0 10% 0);
}

/* ================= GRADIENT NEON TEXT ================= */
/* used on the big display headings — a shifting green→cyan→lime→acid
   gradient fill instead of a flat color, on top of the existing glow */
.gate-logo, .nav-logo, .section-title{
  background: linear-gradient(100deg, var(--green), var(--cyan) 35%, var(--lime) 60%, var(--green-2) 85%, var(--green));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: grad-shift 7s ease-in-out infinite;
}
/* the main VENTURI hero title stays solid white — reads cleanest against
   the glow/shader behind it, letting the colored text-shadow do the
   color work instead of a gradient fill */
.hero-title{
  color: var(--fg);
  -webkit-text-fill-color: var(--fg);
}
@keyframes grad-shift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

/* =========================================================
   GLOSSY "GUMMY" 3D BUTTONS
   Shared visual+motion system for every button-like control:
   a glassy convex candy face (radial sheen + domed inset shadows),
   a floor shadow that reads as levitation, a diagonal sheen sweep
   and a live mouse-tracked highlight (--mx/--my, set by ui.js) for
   a hyper-glossy reflective feel, and a jelly squish-and-settle
   replayed on every click (.jelly-pop, triggered from JS).
   ========================================================= */
.btn-gloss{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink);
  background:
    radial-gradient(120% 200% at 28% -40%, rgba(255,255,255,.95), rgba(255,255,255,0) 50%),
    linear-gradient(160deg, #d9ffec 0%, var(--green) 30%, #00d488 62%, #049e63 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    inset 0 -10px 16px rgba(0,50,30,.35),
    0 10px 0 #067a4d,
    0 20px 30px rgba(0,0,0,.5),
    0 0 40px rgba(22,255,143,.4);
  transform: translateY(0) scale(1);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
/* live mouse-tracked specular highlight */
.btn-gloss::before{
  content:'';
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient(90px 90px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.7), transparent 70%);
  opacity:0;
  transition: opacity .3s ease;
  z-index:2;
}
.btn-gloss:hover::before{ opacity:1; }
/* diagonal glass sheen sweep */
.btn-gloss::after{
  content:'';
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 48%, rgba(255,255,255,.7) 52%, transparent 65%);
  transform: translateX(-140%);
  transition: transform .8s ease;
  z-index:2;
}
.btn-gloss:hover::after{ transform: translateX(140%); }
.btn-gloss > *{ position:relative; z-index:3; }

.btn-gloss:hover{
  transform: translateY(-10px) scale(1.05) rotate(-1deg);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.85),
    inset 0 -10px 16px rgba(0,50,30,.3),
    0 10px 0 #067a4d,
    0 38px 46px rgba(0,0,0,.55),
    0 0 60px rgba(22,255,143,.75);
}
.btn-gloss:active{
  transform: translateY(2px) scale(.96);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.6),
    inset 0 -6px 10px rgba(0,50,30,.4),
    0 3px 0 #067a4d,
    0 8px 16px rgba(0,0,0,.5),
    0 0 24px rgba(22,255,143,.5);
}
/* the "gello" squish — re-triggered from ui.js on every click */
.btn-gloss.jelly-pop{ animation: jelly-squish .65s cubic-bezier(.36,.07,.19,.97); }
@keyframes jelly-squish{
  0%{ transform: scale(1,1); }
  15%{ transform: scale(1.26,.72); }
  32%{ transform: scale(.8,1.26); }
  48%{ transform: scale(1.12,.9); }
  64%{ transform: scale(.94,1.07); }
  80%{ transform: scale(1.03,.98); }
  100%{ transform: scale(1,1); }
}
.gate-enter[disabled]{
  opacity:.35; pointer-events:none;
  filter: grayscale(.7) brightness(.6);
  animation: none !important;
}
.gate-enter:not([disabled]){
  animation: gloss-pulse 2.2s ease-in-out infinite;
}
@keyframes gloss-pulse{
  0%,100%{ filter: drop-shadow(0 0 8px rgba(22,255,143,.35)); }
  50%{ filter: drop-shadow(0 0 26px rgba(22,255,143,.85)); }
}

/* ================= GATE / PRELOADER ================= */
#gate{
  position: fixed; inset:0; z-index: 1000;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 40%, #0a2818 0%, #05010c 70%);
  transition: opacity .9s ease, visibility .9s ease;
}
#gate.hidden{
  opacity:0; visibility:hidden; pointer-events:none;
}
.gate-inner{
  text-align:center; padding: 2rem;
}
.gate-logo{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  text-transform:uppercase;
  text-shadow: 0 0 30px rgba(22,255,143,.55), 0 0 70px rgba(23,247,255,.3);
}
.gate-sub{
  font-size:.85rem; letter-spacing:.35em; text-transform:uppercase;
  color: var(--cyan); margin-top: .6rem; opacity:.85;
}
.gate-bar-track{
  width: min(360px, 70vw); height:3px; background: rgba(255,255,255,.12);
  margin: 2.5rem auto 0.6rem; position:relative; overflow:hidden;
}
.gate-bar-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--lime));
  box-shadow: 0 0 12px var(--green);
  transition: width .15s ease-out;
}
.gate-pct{
  font-size:.7rem; letter-spacing:.2em; color: rgba(242,238,252,.6);
}
.gate-enter{
  margin-top: 2.2rem;
  padding: .9rem 2.4rem;
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .25em; text-transform: uppercase;
  font-weight: 700;
}
.gate-note{
  margin-top: 1.6rem; font-size:.65rem; letter-spacing:.08em;
  color: rgba(242,238,252,.4); max-width: 320px; margin-inline:auto;
}

/* ================= NAV ================= */
/* nav and the hero marquee share one "glass bar" treatment — the same
   dark blurred glass + neon gradient edge used on the about-section
   panels, just adapted to a full-bleed horizontal strip instead of a
   boxed card */
#nav, .marquee-wrap{
  border: 1px solid transparent;
  background-image:
    linear-gradient(rgba(5,1,9,.72), rgba(5,1,9,.72)),
    linear-gradient(90deg, var(--lime), var(--green) 50%, var(--cyan));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  border-width: 0 0 1px 0;
  transition: transform .4s ease;
}
#nav.nav-hide{ transform: translateY(-110%); }
.nav-logo{
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing:.05em;
  filter: drop-shadow(0 0 12px rgba(22,255,143,.65));
}
.nav-links{
  display:flex; gap: clamp(1rem, 3vw, 2.2rem);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.nav-links a{ position:relative; padding-bottom:2px; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--green); transition: width .25s ease;
}
.nav-links a:hover::after{ width:100%; }
@media (max-width: 700px){ .nav-links{ display:none; } }

.audio-toggle{
  display:flex; align-items:center; gap:.55rem;
  padding: .5rem .9rem;
  font-size:1rem;
}
.audio-toggle[aria-pressed="true"]{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.8),
    inset 0 -10px 16px rgba(0,50,30,.35),
    0 10px 0 #067a4d,
    0 20px 30px rgba(0,0,0,.5),
    0 0 50px rgba(198,255,26,.65);
}
.audio-label{ font-size:.62rem; letter-spacing:.15em; }
.audio-bars{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.audio-bars i{
  display:block; width:2.5px; height: 30%; background: var(--ink);
  transform-origin: bottom;
  transition: height .12s ease;
  opacity: .75;
}
.audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(1){ animation: bar-bounce 0.62s ease-in-out infinite; }
.audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(2){ animation: bar-bounce 0.45s ease-in-out infinite .1s; }
.audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(3){ animation: bar-bounce 0.53s ease-in-out infinite .05s; }
.audio-toggle[aria-pressed="true"] .audio-bars i:nth-child(4){ animation: bar-bounce 0.38s ease-in-out infinite .15s; }
@keyframes bar-bounce{
  0%,100%{ height:20%; } 50%{ height:100%; }
}

/* ================= HERO ================= */
#hero{
  position: relative; z-index: 2;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 6rem 1.2rem 2rem;
}
.hero-content{ max-width: 900px; }
.hero-title{
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 9rem);
  line-height: .95;
  text-transform: uppercase;
  /* a tight dark halo first for guaranteed edge contrast against the
     shifting background, then the colorful glow bloom on top */
  text-shadow:
    0 0 3px rgba(5,1,9,.9),
    0 2px 14px rgba(5,1,9,.85),
    0 0 22px rgba(22,255,143, calc(.45 + var(--bass) * .55)),
    0 0 60px rgba(23,247,255, calc(.3 + var(--bass) * .5)),
    0 0 110px rgba(198,255,26, calc(.15 + var(--bass) * .4));
}
.hero-tag{
  margin-top: 1.1rem;
  font-size: clamp(.8rem, 1.6vw, 1.05rem);
  letter-spacing:.08em;
  color: rgba(242,238,252,.9);
  font-style: italic;
  text-shadow: 0 1px 6px rgba(5,1,9,.85), 0 0 14px rgba(5,1,9,.7);
}
.marquee-wrap{
  overflow:hidden;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 2.2rem;
  border-width: 1px 0;
  padding: .55rem 0;
}
.marquee{
  display:flex; width: max-content;
  animation: marquee-scroll 14s linear infinite;
  font-size:.72rem; letter-spacing:.25em; text-transform:uppercase;
  color: var(--lime);
  white-space:nowrap;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.hero-cta{
  display:inline-flex; margin-top: 2.4rem;
  padding: .95rem 2.6rem;
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  font-weight: 700;
}

.scroll-cue{
  position:absolute; bottom: 2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.62rem; letter-spacing:.25em; text-transform:uppercase;
  color: rgba(242,238,252,.65);
  text-shadow: 0 1px 6px rgba(5,1,9,.85);
}

/* short viewports (landscape phones, small laptop windows): the hero
   stack (title + tag + marquee + cta) can run taller than the space
   left above the absolutely-positioned scroll cue — thin the stack out
   and drop the cue rather than let them overlap */
@media (max-height: 760px){
  #hero{ padding-top: 5rem; }
  .hero-tag{ margin-top: .6rem; }
  .marquee-wrap{ margin-top: 1.3rem; padding: .4rem 0; }
  .hero-cta{ margin-top: 1.4rem; padding: .75rem 2.2rem; }
  .scroll-cue{ display:none; }
}
@media (max-height: 560px){
  .marquee-wrap{ display:none; }
}
.scroll-cue-line{
  width:1px; height: 34px; background: linear-gradient(to bottom, var(--green), transparent);
  animation: scroll-cue-move 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-move{
  0%{ transform: scaleY(0); transform-origin: top; opacity:0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity:1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity:1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity:0; }
}

/* ================= SECTIONS (general) ================= */
.section{
  position: relative; z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.2rem, 4vw, 2.5rem);
  opacity: 0; transform: translateY(50px);
  transition: opacity .9s cubic-bezier(.16,.9,.32,1), transform .9s cubic-bezier(.16,.9,.32,1);
}
.section.in-view{ opacity:1; transform:none; }

.section-head{
  display:flex; align-items:baseline; gap: 1rem;
  margin-bottom: 2.6rem;
}
.section-num{
  font-size:.75rem; color: var(--green); letter-spacing:.2em;
}
.section-title{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 3rem);
  text-transform: uppercase;
  filter: drop-shadow(0 1px 10px rgba(5,1,9,.7));
}

/* ================= GRADIENT-BORDER PANELS ================= */
/* the two-layer background trick: one gradient clipped to the padding
   box (the dark glass fill) sitting on top of another clipped to the
   border box (the neon rim) — gives every content panel a glowing
   multicolor edge instead of a flat line */
.about-text, .about-stats, .mix-card, .dates-table, .gallery-tile,
.booking-side, .booking-cta-panel{
  border: 1px solid transparent;
  background-origin: border-box;
}
.about-text{
  background-image:
    linear-gradient(rgba(5,1,9,.6), rgba(5,1,9,.6)),
    linear-gradient(135deg, var(--green), var(--cyan) 50%, var(--purple));
  background-clip: padding-box, border-box;
}
.about-stats{
  background-image:
    linear-gradient(rgba(5,1,9,.75), rgba(5,1,9,.75)),
    linear-gradient(135deg, var(--lime), var(--green) 50%, var(--cyan));
  background-clip: padding-box, border-box;
}
.mix-card{
  background-image:
    linear-gradient(160deg, rgba(5,1,9,.85), rgba(5,1,9,.7) 60%),
    linear-gradient(135deg, var(--green), var(--cyan), var(--lime), var(--green));
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 260% 260%;
  animation: border-flow 7s linear infinite;
}
@keyframes border-flow{
  0%{ background-position: 0 0, 0% 50%; }
  100%{ background-position: 0 0, 200% 50%; }
}
.dates-table{
  background-image:
    linear-gradient(rgba(5,1,9,.78), rgba(5,1,9,.78)),
    linear-gradient(135deg, var(--cyan), var(--green) 50%, var(--lime));
  background-clip: padding-box, border-box;
}
.gallery-tile{
  background-image:
    linear-gradient(rgba(5,1,9,.4), rgba(5,1,9,.4)),
    linear-gradient(135deg, var(--purple), var(--green) 50%, var(--cyan));
  background-clip: padding-box, border-box;
}
.booking-side, .booking-cta-panel{
  background-image:
    linear-gradient(rgba(5,1,9,.75), rgba(5,1,9,.75)),
    linear-gradient(135deg, var(--green), var(--lime) 50%, var(--cyan));
  background-clip: padding-box, border-box;
}

/* ---- about ---- */
.about-grid{
  display:grid; grid-template-columns: 1.4fr .8fr; gap: 3rem;
  align-items:start;
}
@media (max-width: 760px){ .about-grid{ grid-template-columns:1fr; } }
.about-text{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height:1.75; color: rgba(242,238,252,.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.2rem 1.4rem;
}
.about-stats{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.4rem;
}
.about-stats li{ display:flex; flex-direction:column; gap:.2rem; }
.about-stats strong{
  font-family: var(--font-display); font-size: 2rem; color: var(--green);
  text-shadow: 0 0 18px rgba(22,255,143,.5);
}
.about-stats span{ font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; opacity:.7; }

/* ---- mixes ---- */
.mix-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
@media (max-width: 920px){ .mix-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .mix-grid{ grid-template-columns: 1fr; } }

.mix-card{
  position:relative;
  padding: 1.3rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s ease, box-shadow .3s ease;
  overflow:hidden;
}
.mix-card:hover{
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 46px rgba(22,255,143,.22);
}
.mix-card-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom: 1rem;
}
.mix-card-title{ font-size:.95rem; font-weight:700; }
.mix-card-genre{
  font-size:.6rem; letter-spacing:.15em; text-transform:uppercase;
  color: var(--lime); opacity:.9;
}
.mix-play{
  width: 34px; height:34px;
  flex-shrink:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -3px 6px rgba(0,50,30,.3),
    0 3px 0 #067a4d,
    0 6px 10px rgba(0,0,0,.4);
}
.mix-play:hover{
  transform: translateY(-4px) scale(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 0 #067a4d,
    0 10px 16px rgba(0,0,0,.45),
    0 0 22px rgba(22,255,143,.6);
}
.mix-play:active{
  transform: translateY(1px) scale(.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #067a4d, 0 3px 6px rgba(0,0,0,.4);
}
.mix-play svg{ width:12px; height:12px; }
.mix-waveform{
  display:flex; align-items:flex-end; gap:2px; height: 40px; margin: .8rem 0;
}
.mix-waveform i{
  flex:1; background: linear-gradient(to top, var(--green), var(--cyan));
  min-width:2px; border-radius:1px;
  transition: height .08s ease;
}
.mix-card-meta{
  display:flex; justify-content:space-between;
  font-size:.62rem; letter-spacing:.1em; opacity:.6; text-transform:uppercase;
}

/* ---- dates ---- */
.dates-table{
  width:100%; border-collapse: separate; border-spacing:0; font-size:.85rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dates-table thead th{
  text-align:left; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(242,238,252,.6); padding: .9rem .9rem .8rem; border-bottom:1px solid rgba(255,255,255,.18);
}
.dates-table tbody td{
  padding: 1rem .9rem; border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle;
}
.dates-table tbody tr{ transition: background .25s ease; position:relative; }
.dates-table tbody tr:hover{ background: rgba(22,255,143,.08); }
.dates-table tbody tr:hover .dates-city{ color: var(--green); }
.dates-city{ font-weight:700; transition: color .25s ease; }
.dates-venue{ opacity:.75; }
.date-ticket{
  padding:.4rem 1rem; font-size:.62rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; white-space:nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -3px 6px rgba(0,50,30,.3),
    0 3px 0 #067a4d,
    0 6px 10px rgba(0,0,0,.35);
}
.date-ticket:hover{
  transform: translateY(-5px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 0 #067a4d,
    0 12px 18px rgba(0,0,0,.4),
    0 0 22px rgba(22,255,143,.6);
}
.date-ticket:active{
  transform: translateY(1px) scale(.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #067a4d, 0 3px 6px rgba(0,0,0,.4);
}
.date-soldout{
  font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color: var(--orange); opacity:.9;
}

/* ---- gallery ---- */
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
}
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 620px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }
.gallery-tile{
  position:relative; aspect-ratio: 1/1; overflow:hidden;
  transition: transform .3s ease;
}
.gallery-tile:hover{ transform: translateY(-4px) rotate(-1deg); }
.gallery-tile canvas{
  width:100%; height:100%; display:block;
  transition: transform .5s ease, filter .5s ease;
}
.gallery-tile:hover canvas{ transform: scale(1.14) rotate(1deg); filter: saturate(1.6) brightness(1.15); }

/* ---- booking ---- */
.booking-grid{
  display:grid; grid-template-columns: 1.3fr .8fr; gap: 3.5rem;
}
@media (max-width: 800px){ .booking-grid{ grid-template-columns:1fr; } }

.booking-cta-panel{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap: 1.4rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 2.4rem;
}
.booking-cta-text{
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height:1.6; color: rgba(242,238,252,.95);
}
.book-now-btn{
  padding: 1.25rem 3.2rem;
  font-size: .9rem; letter-spacing:.3em; text-transform:uppercase; font-weight: 800;
}

.booking-form{ display:flex; flex-direction:column; gap: 1.3rem; }
.booking-form label{ display:flex; flex-direction:column; gap:.5rem; }
.booking-form label span{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color: var(--cyan);
  text-shadow: 0 1px 8px rgba(5,1,9,.9);
}
.booking-form input, .booking-form textarea{
  background: rgba(5,1,9,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  color: var(--fg); font-family: var(--font-mono); font-size:.9rem;
  padding: .75rem .85rem; resize: vertical;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.booking-form input:focus, .booking-form textarea:focus{
  outline:none; border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green), 0 0 18px rgba(22,255,143,.3);
}
.transmit-btn{
  align-self:flex-start;
  padding: .9rem 2.4rem; font-size:.78rem; letter-spacing:.25em; text-transform:uppercase;
  font-weight:700; margin-top:.5rem;
}
.booking-response{
  font-size:.72rem; letter-spacing:.1em; color: var(--lime); min-height:1em;
  text-shadow: 0 1px 6px rgba(5,1,9,.9);
}
.booking-side{
  display:flex; flex-direction:column; gap: 1.6rem;
  padding: 1.4rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.booking-quote{
  font-style:italic; font-size:1.05rem; line-height:1.6; color: rgba(242,238,252,.88);
  border-left: 2px solid var(--green); padding-left: 1rem;
}
.social-links{ display:flex; flex-direction:column; gap:.6rem; font-size:.85rem; }
.social-links a{ width:fit-content; position:relative; }
.social-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--cyan);
  transition: width .25s ease;
}
.social-links a:hover::after{ width:100%; }
.booking-email{ font-size:.72rem; opacity:.8; letter-spacing:.05em; }

/* ================= BOOKING MODAL ================= */
.modal-overlay{
  position: fixed; inset:0; z-index: 2000;
  display:flex; align-items:center; justify-content:center;
  padding: 1.5rem;
  background: rgba(2,0,6,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal-overlay.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
}
.modal-burst{
  position:absolute; left: var(--burst-x, 50%); top: var(--burst-y, 50%);
  width: 40px; height:40px; border-radius:50%;
  background: radial-gradient(circle, rgba(22,255,143,.9), rgba(23,247,255,.4) 40%, transparent 70%);
  transform: translate(-50%,-50%) scale(0);
  pointer-events:none;
}
.modal-overlay.is-open .modal-burst{
  animation: modal-burst-pop .6s cubic-bezier(.16,1,.3,1);
}
@keyframes modal-burst-pop{
  0%{ transform: translate(-50%,-50%) scale(0); opacity:1; }
  70%{ opacity:.5; }
  100%{ transform: translate(-50%,-50%) scale(48); opacity:0; }
}
.modal-panel{
  position:relative;
  width: min(520px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 2px solid transparent;
  border-radius: 28px;
  background-image:
    linear-gradient(rgba(6,2,12,.97), rgba(6,2,12,.97)),
    linear-gradient(135deg, var(--green), var(--cyan), var(--lime), var(--purple), var(--green));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  animation: border-flow 6s linear infinite;
  padding: 2.6rem 2rem 2rem;
  box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 90px rgba(22,255,143,.3);
  transform: scale(.2) rotate(-8deg);
  opacity: 0;
}
.modal-title{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--green), var(--cyan) 50%, var(--lime));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.modal-subtitle{
  font-size:.75rem; letter-spacing:.05em; opacity:.75; margin: .5rem 0 1.8rem;
}
.modal-close{
  position:absolute; top: 1.1rem; right: 1.1rem;
  width: 38px; height:38px;
  font-size: 1.3rem; line-height:1; padding:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -3px 6px rgba(0,50,30,.3),
    0 3px 0 #067a4d,
    0 6px 10px rgba(0,0,0,.4);
}
.modal-close:hover{
  transform: translateY(-3px) rotate(90deg) scale(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 0 #067a4d,
    0 10px 16px rgba(0,0,0,.45),
    0 0 20px rgba(22,255,143,.6);
}
.modal-close:active{
  transform: translateY(1px) rotate(90deg) scale(.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #067a4d, 0 3px 6px rgba(0,0,0,.4);
}
@media (max-width: 560px){
  .modal-panel{ padding: 2.2rem 1.4rem 1.6rem; border-radius: 20px; }
}

/* ================= FOOTER ================= */
#footer{
  position:relative; z-index:2;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(5,1,9,.3);
}
.footer-marquee .marquee{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(242,238,252,.5);
  animation-duration: 18s;
}
.footer-marquee.marquee-wrap{
  border:none; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  width:100%; margin:0; transform:none; padding: 1rem 0;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 1rem;
  padding: 1.6rem clamp(1.2rem, 4vw, 2.5rem) 2.4rem;
  font-size:.68rem; letter-spacing:.08em; opacity:.7;
  text-shadow: 0 1px 6px rgba(5,1,9,.8);
}
.back-to-top{ opacity:1; transition: color .25s ease; }
.back-to-top:hover{ color: var(--green); }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html{ scroll-behavior:auto; }
}