:root{--bg:#0a0a0c;--amber:#ffe600;--red:#ff1f3d;--pink:#ff2e63;--cyan:#00e5ff;--txt:#f7f3ea;--mut:#c9c2b4}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;overflow-y:auto}
body{min-height:100%;font-family:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt);overflow-x:clip}

/* ===== Splash: Pop Rock Garage ===== */
.splash{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow-x:clip;overflow-y:visible;background:#0a0a0c url(hero.svg) center/cover no-repeat fixed}
.splash::before{content:"";position:fixed;inset:0;background:linear-gradient(to bottom,rgba(5,3,8,.55),rgba(5,3,8,.35) 40%,rgba(5,3,8,.8));z-index:0}
.splash::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.12;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}
.bg-glow{position:fixed;width:50vmax;height:50vmax;border-radius:50%;filter:blur(120px);opacity:.22;z-index:0;animation:drift 14s ease-in-out infinite alternate}
.g1{background:var(--pink);top:-25vmax;left:-20vmax}
.g2{background:var(--cyan);bottom:-30vmax;right:-20vmax;animation-delay:-6s}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}

.stage{position:relative;z-index:2;text-align:center;padding:24px 20px 170px;margin:auto;max-width:720px;width:100%}
.eyebrow{display:inline-block;letter-spacing:.3em;font-size:.8rem;font-weight:700;color:#111;background:var(--amber);padding:6px 16px;margin-top:18px;transform:rotate(-2deg);box-shadow:4px 4px 0 #000;animation:fade 1s .2s both}
.brand{font-family:"Permanent Marker","Impact","Arial Black",cursive;font-size:clamp(2.6rem,10vw,5.2rem);line-height:1;margin:18px 0 14px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;transform:rotate(-2deg);animation:fade 1s .4s both;text-shadow:3px 3px 0 #000,0 0 24px rgba(255,46,99,.55)}
.brand span{display:block;color:var(--amber);text-shadow:4px 4px 0 var(--red),7px 7px 0 #000;animation:flicker 5s infinite}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.55}}
@keyframes shine{to{background-position:200% center}}
.desc{color:var(--txt);font-size:1.05rem;line-height:1.6;max-width:540px;margin:0 auto 30px;padding:12px 18px;background:rgba(0,0,0,.55);border-left:5px solid var(--pink);text-shadow:0 1px 2px #000;animation:fade 1s .6s both}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Vinyl + guitar */
.vinyl-wrap{position:relative;width:190px;height:190px;margin:0 auto;display:grid;place-items:center;filter:drop-shadow(0 8px 14px #000)}
.vinyl{width:150px;height:150px;border-radius:50%;background:repeating-radial-gradient(circle,#111 0 3px,#1c1626 3px 5px);box-shadow:0 0 40px rgba(255,46,147,.45);display:grid;place-items:center;animation:spin 4s linear infinite}
.vinyl .label{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--amber),var(--red));display:grid;place-items:center;font-weight:900;font-size:.7rem;color:#2a0a0a}
@keyframes spin{to{transform:rotate(360deg)}}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--pink);opacity:0;animation:pulse 3s ease-out infinite}
.r2{animation-delay:1s;border-color:var(--amber)}.r3{animation-delay:2s}
@keyframes pulse{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.guitar{position:absolute;right:-70px;bottom:-14px;filter:drop-shadow(0 0 10px rgba(255,183,3,.6));transform-origin:50% 90%;animation:strum 1.2s ease-in-out infinite alternate}
@keyframes strum{from{transform:rotate(-6deg)}to{transform:rotate(6deg) translateY(-4px)}}

/* Floating notes */
#notes{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.note{position:absolute;bottom:-60px;font-size:28px;color:var(--amber);opacity:0;text-shadow:0 0 12px currentColor;animation:floatUp linear forwards}
@keyframes floatUp{0%{transform:translateY(0) translateX(0) rotate(-12deg);opacity:0}10%{opacity:.85}50%{transform:translateY(-55vh) translateX(40px) rotate(14deg)}100%{transform:translateY(-115vh) translateX(-30px) rotate(-10deg);opacity:0}}

/* Equalizer */
.eq{position:fixed;left:0;right:0;bottom:0;height:110px;display:flex;align-items:flex-end;justify-content:center;gap:4px;z-index:0;padding:0 4px;pointer-events:none}
.eq i{flex:1;max-width:22px;min-width:5px;height:100%;border-radius:4px 4px 0 0;background:linear-gradient(to top,var(--red),var(--amber) 60%,#fff6c4);transform-origin:bottom;transform:scaleY(.1);animation:bounce var(--d,.9s) ease-in-out var(--l,0s) infinite alternate;opacity:.85}
@keyframes bounce{0%{transform:scaleY(.08)}100%{transform:scaleY(var(--h,1))}}

/* CTA */
.cta{position:relative;z-index:5;border:3px solid #000;cursor:pointer;font-family:"Permanent Marker","Impact",sans-serif;font-weight:400;letter-spacing:.1em;font-size:1.9rem;color:#fff;padding:24px 64px;min-width:min(86vw,460px);border-radius:6px;background:var(--red);transform:skew(-6deg) rotate(-1deg);box-shadow:6px 6px 0 #000,0 0 0 0 rgba(255,31,61,.7);animation:beat 1.1s ease-in-out infinite;transition:transform .15s}
.cta:hover{transform:skew(-6deg) rotate(-1deg) scale(1.07);background:var(--pink)}
.cta:active{transform:skew(-6deg) scale(.97);box-shadow:2px 2px 0 #000}
.cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.cta.small{font-size:1.2rem;padding:16px 40px;margin-top:16px;min-width:0}
@keyframes beat{0%,100%{box-shadow:6px 6px 0 #000,0 0 0 0 rgba(255,31,61,.7)}50%{box-shadow:6px 6px 0 #000,0 0 0 18px rgba(255,31,61,0)}}

/* Popup */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(5,2,10,.78);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.overlay[hidden]{display:none}
.modal{width:100%;max-width:400px;text-align:center;background:#121214;border:3px solid var(--amber);border-radius:8px;padding:30px 26px;box-shadow:8px 8px 0 var(--red),0 0 60px rgba(255,46,99,.35);transform:rotate(-1deg);animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.7) rotate(-4deg);opacity:0}to{transform:rotate(-1deg);opacity:1}}
.modal h2{font-family:"Permanent Marker","Impact",sans-serif;font-weight:400;font-size:1.6rem;margin:12px 0 8px;color:var(--amber)}
.modal p{color:var(--mut);line-height:1.5}
.modal .count{margin-top:14px;font-size:.9rem}
.modal .count b{color:var(--txt);font-size:1.1rem}
.bar{height:6px;background:#2a1d3d;border-radius:99px;margin-top:10px;overflow:hidden}
#barfill{height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--amber));transition:width 1s linear}
.link{display:block;margin:14px auto 0;background:none;border:0;color:var(--mut);cursor:pointer;font:inherit;text-decoration:underline}
.mini-eq{display:flex;gap:5px;justify-content:center;align-items:flex-end;height:40px}
.mini-eq i{width:7px;height:100%;border-radius:3px;background:linear-gradient(to top,var(--red),var(--amber));transform-origin:bottom;animation:bounce .6s ease-in-out infinite alternate}
.mini-eq i:nth-child(2){animation-delay:.1s}.mini-eq i:nth-child(3){animation-delay:.25s}.mini-eq i:nth-child(4){animation-delay:.05s}.mini-eq i:nth-child(5){animation-delay:.2s}

@media (max-width:480px){.guitar{right:-50px;width:110px;height:110px}.cta{padding:20px 28px;font-size:1.5rem}.cta.small{padding:14px 30px;font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ===== Admin / Login ===== */
.panel-body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 0%,#2a0f3d,var(--bg) 60%)}
.card{width:100%;max-width:560px;background:#150d22;border:1px solid rgba(255,183,3,.25);border-radius:18px;padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.card.narrow{max-width:380px}
.card h1{font-size:1.4rem;color:var(--amber);margin-bottom:4px}
.card .sub{color:var(--mut);font-size:.9rem;margin-bottom:20px}
.card h3{margin:22px 0 4px;font-size:.8rem;letter-spacing:.2em;color:var(--pink)}
label{display:block;margin:14px 0 6px;font-size:.85rem;color:var(--mut)}
input,textarea{width:100%;background:#0d0716;border:1px solid #382850;border-radius:10px;color:var(--txt);padding:12px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--amber);border-color:transparent}
textarea{min-height:90px;resize:vertical}
.btn{display:inline-block;margin-top:20px;border:0;border-radius:10px;padding:12px 22px;font:inherit;font-weight:800;cursor:pointer;color:#2a0a0a;background:linear-gradient(90deg,var(--amber),#ff8a00);text-decoration:none}
.btn.ghost{background:none;color:var(--mut);border:1px solid #382850}
.msg{margin-top:14px;font-size:.9rem}
.msg.ok{color:#5be584}.msg.err{color:#ff6b6b}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}