:root{--content-max: 560px; --video-max: 88vw; --section-gap: 25px; 
    --pad-inline: clamp(16px, 4vw, 24px); --neon-color: #e3246a; 
    --neon-dim:rgba(125,249,255,.35)}

body{margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; 
    background: #0a0f1a;  color: #f0f0f0; line-height: 0.7;}

.title{font-family: 'Bebas Neue', sans-serif; text-align: right; 
    font-size: clamp(3rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: 1px; 
    color: #fff; margin-top: 5rem; margin-right: 30px; margin-bottom: 40px}

@media (min-width:1024px){.title{ font-size: clamp(7rem, 4vw, 4.2rem); margin-right: 70px;}}

.event-info{text-align: center;margin-top: 12px; font-size: clamp(1rem, 2.6vw, 1.25rem);}

.neon-sign{font-family: 'Monoton', cursive; letter-spacing: 1px; color: var(--neon-color);
    text-shadow:0 0 2px  var(--neon-color),0 0 6px  var(--neon-color),0 0 12px 
    var(--neon-color),0 0 24px var(--neon-dim),0 0 40px var(--neon-dim);}

.neon-wobble{transform: rotate(30deg); transform-origin: top center;
     animation: swing 3.2s ease-in-out infinite, flicker 7s infinite steps(1, end); 
     will-change: transform, opacity, text-shadow;}

@keyframes swing{0% { transform: rotate(-2.5deg) translateY(0); } 50%  
{ transform: rotate( 2.0deg) translateY(2px); } 100% { transform: rotate(-2.5deg) 
    translateY(0); }}

@keyframes flicker{0%, 9%, 11%, 100% { opacity: 1; }
  10% { opacity: .88; text-shadow: 0 0 1px  var(--neon-color),0 0 4px  var(--neon-color),
    0 0 8px  var(--neon-color),0 0 16px var(--neon-dim);}}

@media (prefers-reduced-motion: reduce){.neon-wobble{ animation: none; transform: none; }}

.ticket-btn {display: block; margin: var(--section-gap) auto 0; align-self: center;
font-family: 'Monoton', cursive; font-size: 1.25rem; letter-spacing: 1px; text-transform: uppercase; color: var(--neon-color);background: transparent;border: none;cursor: pointer;text-shadow:0 0 2px  var(--neon-color),0 0 6px  var(--neon-color),0 0 12px var(--neon-color),0 0 24px rgba(125,249,255,.4),0 0 40px rgba(125,249,255,.4);animation: flicker-strong 2.2s infinite steps(1, end);}

.ticket-btn:hover {color: #ff3af2; text-shadow:0 0 2px  #ff3af2,0 0 6px  #ff3af2,
 0 0 12px #ff3af2,0 0 24px rgba(255,58,242,.4),0 0 40px rgba(255,58,242,.4);}

@keyframes flicker-strong {0%, 5%, 10% 15%, 20%, 45%, 60%, 70%, 80*, 90%, 100% { opacity: 1; }6%, 25%, 55% { opacity: 0.2; }30%, 50%{ opacity: 0.6; }}

.artist-links{
  text-align: center;                      
  font-family: 'Bebas Neue', sans-serif;   
  font-size: 1.1rem;                       
  letter-spacing: 1px;
  margin-top: var(--section-gap);          
padding-top:30px}

.wrapper{min-height: 100svh; padding-inline: max(var(--pad-inline), env(safe-area-inset-left)); 
    padding-block: 20px max(32px, env(safe-area-inset-bottom)); display: flex; 
    flex-direction: column; gap: var(--section-gap);}

.section{width: min(100%, var(--content-max)); margin-inline: auto;}

.hero{min-height: 35svh; display: flex; flex-direction: column; justify-content: flex-start;
padding-top: 50px; padding-bottom:50px;}

.video-box{width: min(100%, var(--video-max)); margin: var(--section-gap) auto 0; 
    border-radius: 20px; overflow: hidden;  aspect-ratio: 16 / 9;}

.video-box video{display:block; width:100%; height:100%; object-fit: cover; 
    object-position: center; }

.hero-video {
  display: block;
  width: 100%;
  border-radius: 20px;
  filter: drop-shadow(0 0 25px rgba(125,249,255,.25));
}

@media (min-width: 768px){:root{--content-max: 720px; --video-max: 640px; --section-gap: 
    36px;} .hero{ min-height: 65vh; }}

@media (min-width: 1024px){:root{--content-max: 960px; --video-max: 880px; 
    --section-gap: 48px;} .hero{ min-height: 70vh; }}

.rain-bg{
  position: fixed;   
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;       
  opacity: 0.5;     
}