:root{
    --bg:#150C24; --bg-alt:#1F1233; --surface:#241638; --surface-2:#2C1B45;
    --ink:#FBF3E7; --ink-dim:#C6B7DA;
    --gold:#F2A93B; --magenta:#E8438F; --emerald:#22B37A;
    --line: rgba(251,243,231,0.14);
    --grain-opacity: 0.05;
  }
  html.light{
    --bg:#FBF3E7; --bg-alt:#F5E8D4; --surface:#FFFFFF; --surface-2:#FFF7EC;
    --ink:#1D1030; --ink-dim:#5E4D75;
    --gold:#C97A12; --magenta:#C22E74; --emerald:#0F8F5C;
    --line: rgba(29,16,48,0.12);
    --grain-opacity: 0.035;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg); color:var(--ink);
    font-family:'Inter', sans-serif;
    transition:background .5s ease, color .5s ease;
    overflow-x:hidden;
  }
  .font-display{ font-family:'Bricolage Grotesque', sans-serif; }
  .font-mono{ font-family:'Space Mono', monospace; }

  /* film grain overlay for texture */
  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:60; mix-blend-mode:overlay;
    opacity:var(--grain-opacity);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .text-gold{ color:var(--gold); }
  .text-magenta{ color:var(--magenta); }
  .text-emerald{ color:var(--emerald); }
  .bg-surface{ background:var(--surface); }
  .border-line{ border-color:var(--line); }

  .grad-blob{
    background: radial-gradient(circle at 30% 30%, var(--magenta), transparent 60%),
                radial-gradient(circle at 70% 70%, var(--gold), transparent 55%),
                radial-gradient(circle at 50% 90%, var(--emerald), transparent 50%);
    filter: blur(60px);
    opacity:.55;
  }

  /* section reveal */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

  /* equalizer bars */
  .eq{ display:flex; align-items:flex-end; gap:5px; height:34px; }
  .eq span{ width:4px; background:var(--gold); border-radius:2px; animation:eqbeat 1.15s ease-in-out infinite; }
  .eq span:nth-child(1){ animation-delay:-1.1s; }
  .eq span:nth-child(2){ animation-delay:-0.9s; background:var(--magenta); }
  .eq span:nth-child(3){ animation-delay:-0.6s; }
  .eq span:nth-child(4){ animation-delay:-0.3s; background:var(--emerald); }
  .eq span:nth-child(5){ animation-delay:-0.75s; }
  .eq span:nth-child(6){ animation-delay:-0.45s; background:var(--magenta); }
  .eq span:nth-child(7){ animation-delay:-0.15s; }
  @keyframes eqbeat{
    0%,100%{ height:20%; } 50%{ height:100%; }
  }

  /* marquee ticker */
  .marquee-track{ display:flex; white-space:nowrap; animation:marquee 26s linear infinite; }
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ticket stub cards */
  /* .ticket{
    position:relative;
    background:var(--surface);
    border:1.5px dashed var(--line);
    border-radius:14px;
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .3s ease;
  }
  .ticket:hover{ transform: translateY(-10px) rotate(0deg) !important; box-shadow:0 24px 48px -18px rgba(0,0,0,.45); border-color:var(--gold); }
  .ticket::before, .ticket::after{
    content:""; position:absolute; width:22px; height:22px; background:var(--bg);
    border-radius:50%; top:50%; transform:translateY(-50%); z-index:2;
  }
  .ticket::before{ left:-11px; }
  .ticket::after{ right:-11px; }
  .ticket-tear{ border-top:1.5px dashed var(--line); } */

  /* gallery */
  .gal-item{ position:relative; overflow:hidden; border-radius:16px; }
  .gal-item img{ transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease; }
  .gal-item:hover img{ transform:scale(1.08); }
  .gal-overlay{
    position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
    background: linear-gradient(0deg, rgba(21,12,36,.85), transparent 55%);
    display:flex; align-items:flex-end; padding:1.1rem;
  }
  .gal-item:hover .gal-overlay{ opacity:1; }

  /* toggle switch */
  .switch{ width:56px; height:30px; border-radius:999px; background:var(--surface-2); border:1.5px solid var(--line); position:relative; cursor:pointer; transition:.3s; }
  .switch .knob{
    position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
    background: linear-gradient(135deg, var(--gold), var(--magenta));
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    display:flex; align-items:center; justify-content:center; font-size:12px;
  }
  html.light .switch .knob{ transform:translateX(26px); }

  .btn-primary{
    background: linear-gradient(120deg, var(--gold), var(--magenta));
    color:#150C24; font-weight:700;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
  }
  .btn-primary:hover{ transform: translateY(-3px) scale(1.02); box-shadow:0 16px 30px -10px rgba(232,67,143,.45); }

  .link-underline{ position:relative; }
  .link-underline::after{
    content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
    background: linear-gradient(90deg, var(--gold), var(--magenta)); transition:width .35s ease;
  }
  .link-underline:hover::after{ width:100%; }

  .vinyl{ animation: spin 7s linear infinite; }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  .hero-photo-frame{
    clip-path: polygon(6% 0%, 100% 0%, 100% 92%, 94% 100%, 0% 100%, 0% 8%);
  }

  input, textarea{
    background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink);
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  input:focus, textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(242,169,59,.15); }
  input::placeholder, textarea::placeholder{ color:var(--ink-dim); }

  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--surface-2); border-radius:8px; }

  /* mobile nav */
  .mobile-link{ color:var(--ink); border-bottom:1px solid var(--line); transition: background .25s ease, padding-left .25s ease; }
  .mobile-link:last-of-type{ border-bottom:none; }
  .mobile-link:hover, .mobile-link:active{ background:var(--surface); padding-left:12px; }
  #mobileMenu{ background:var(--bg); }


/* press clippings */
.press-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, background .4s ease, border-color .4s ease;
}
.press-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold), var(--magenta)); opacity:.9;
}
.press-card:nth-of-type(2)::before{ background:linear-gradient(90deg, var(--magenta), var(--emerald)); }
.press-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 50px -22px rgba(0,0,0,.45);
  background:var(--surface-2);
  border-color:var(--gold);
}
.press-card:nth-of-type(2):hover{ border-color:var(--magenta); }
.press-photo{ position:relative; width:100%; aspect-ratio:16/8; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2); }
.press-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:grayscale(35%) contrast(1.05);
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.press-card:hover .press-photo img{ transform:scale(1.07); filter:grayscale(0%) contrast(1); }
/* discography track rows */
.track-row{
  display:flex; align-items:center; gap:16px;
  padding:16px 4px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  transition: background .3s ease, padding-left .3s ease;
}
.track-row:hover{ background:var(--surface); padding-left:14px; border-radius:10px; }
.track-thumb{
  width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0;
  filter:grayscale(30%); transition: filter .35s ease, transform .35s ease;
}
.track-row:hover .track-thumb{ filter:grayscale(0%); transform:scale(1.05); }
.track-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.track-title{ font-family:'Bricolage Grotesque', sans-serif; font-weight:700; color:var(--ink); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-feat{ font-family:'Space Mono', monospace; font-size:.7rem; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-tag{
  font-family:'Space Mono', monospace; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:4px 10px; flex-shrink:0;
  white-space:nowrap;
}
.track-date{ font-family:'Space Mono', monospace; font-size:.7rem; color:var(--ink-dim); flex-shrink:0; width:56px; text-align:right; }
.track-play{ color:var(--ink-dim); flex-shrink:0; opacity:0; transform:translateX(-4px); transition: opacity .3s ease, transform .3s ease, color .3s ease; }
.track-row:hover .track-play{ opacity:1; transform:translateX(0); color:var(--gold); }
@media (max-width: 640px){
  .track-feat, .track-date{ display:none; }
}

/* music banner */
.music-banner{ transition: transform .4s cubic-bezier(.16,1,.3,1); }
.music-banner:hover{ transform: translateY(-4px); }
.music-banner-play{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.music-banner:hover .music-banner-play{ transform: scale(1.1); }

 /* ticket stub cards */
  .ticket{
    position:relative;
    background:var(--surface);
    border:1.5px dashed var(--line);
    border-radius:16px;
    overflow:hidden;
    transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .3s ease;
  }
  .ticket:hover{ transform: translateY(-10px) rotate(0deg) !important; box-shadow:0 24px 48px -18px rgba(0,0,0,.45); border-color:var(--gold); }
  .ticket-photo{ width:100%; aspect-ratio:4/3; overflow:hidden; border-bottom:1.5px dashed var(--line); background:var(--surface-2); }
  .ticket-photo img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    filter:grayscale(15%) contrast(1.03);
    transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease;
  }
  .ticket:hover .ticket-photo img{ transform:scale(1.07); filter:grayscale(0%) contrast(1); }
  .ticket-tear{ border-top:1.5px dashed var(--line); }

  /* contact / socials */
  .contact-row{
    display:flex; align-items:center; gap:14px;
    padding:12px; margin:0 -12px;
    border-radius:14px;
    text-decoration:none; color:var(--ink);
    transition: background .3s ease, transform .3s ease;
  }
  .contact-row:hover{ background:var(--surface); transform:translateX(4px); }
  .contact-icon{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .social-icon{
    width:42px; height:42px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-dim);
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .3s ease, border-color .3s ease, background .3s ease;
  }
  .social-icon:hover{
    transform: translateY(-3px);
    color:#150C24;
    border-color:transparent;
    background: linear-gradient(120deg, var(--gold), var(--magenta));
  }

  .footer-link{
  color:#C6B7DA; text-decoration:none;
  display:inline-flex; align-items:center;
  transition: color .25s ease;
}
.footer-link:hover{ color:var(--gold); }
.footer-link-arrow{
  display:inline-block;
  width:0; opacity:0;
  margin-right:0;
  overflow:hidden;
  transition: width .25s ease, opacity .25s ease, margin-right .25s ease;
}
.footer-link:hover .footer-link-arrow{
  width:1em; opacity:1; margin-right:6px;
}