*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0a;
  --bg-alt:#111;
  --text:#e8e8e8;
  --text-muted:#555;
  --accent:#8b0000;
  --accent-glow:rgba(139,0,0,.4);
  --red:#ff1a1a;
  --green:#00ff41;
  --radius:4px;
  --transition:.35s cubic-bezier(.4,0,.2,1);
  --pixel-font:'Press Start 2P', monospace;
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Space Grotesk',monospace,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ===== PIXEL TAG (hacknet style background) ===== */
.pixel-tag{
  display:inline-block;
  background:rgba(0,255,65,.08);
  border:1px solid rgba(0,255,65,.25);
  padding:6px 14px;
  font-family:var(--pixel-font);
  font-size:inherit;
  color:var(--text);
  position:relative;
  image-rendering:pixelated;
}
.pixel-tag::before{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,65,.03) 2px,
    rgba(0,255,65,.03) 4px
  );
  pointer-events:none;
}

.pixel-text{
  font-family:var(--pixel-font);
  font-size:.65rem;
  line-height:2;
  color:var(--text-muted);
  letter-spacing:.02em;
}

.pixel-quote{
  font-family:var(--pixel-font);
  font-size:clamp(.7rem,2vw,1rem);
  color:var(--green);
  text-shadow:0 0 20px rgba(0,255,65,.3);
  opacity:.8;
}
.pixel-quote::after{
  content:'|';
  animation:blink 1s step-end infinite;
  margin-left:2px;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ===== GLITCH ===== */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  opacity:0;
}
.glitch:hover::before{
  opacity:.6;
  color:#00d4ff;
  animation:glitch1 .3s infinite;
  clip-path:inset(20% 0 30% 0);
}
.glitch:hover::after{
  opacity:.6;
  color:rgba(255,255,255,.7);
  animation:glitch2 .3s infinite;
  clip-path:inset(50% 0 10% 0);
}
@keyframes glitch1{
  0%{transform:translate(0)}
  20%{transform:translate(-3px,2px)}
  40%{transform:translate(3px,-2px)}
  60%{transform:translate(-2px,1px)}
  80%{transform:translate(2px,-1px)}
  100%{transform:translate(0)}
}
@keyframes glitch2{
  0%{transform:translate(0)}
  20%{transform:translate(3px,-2px)}
  40%{transform:translate(-3px,2px)}
  60%{transform:translate(2px,-1px)}
  80%{transform:translate(-2px,1px)}
  100%{transform:translate(0)}
}

/* ===== MARQUEE ===== */
.marquee{
  overflow:hidden;
  background:var(--bg-alt);
  border-top:1px solid rgba(0,255,65,.1);
  border-bottom:1px solid rgba(0,255,65,.1);
  padding:14px 0;
  white-space:nowrap;
  position:relative;
}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg, var(--bg-alt), transparent)}
.marquee::after{right:0;background:linear-gradient(90deg, transparent, var(--bg-alt))}
.marquee__inner{
  display:inline-flex;
  animation:marquee 25s linear infinite;
  transition:animation-duration .6s ease;
}
.marquee:hover .marquee__inner{animation-duration:8s}
.marquee__inner span{
  font-family:var(--pixel-font);
  font-size:.6rem;
  letter-spacing:.15em;
  color:var(--text-muted);
  text-transform:uppercase;
  transition:color .4s ease;
}
.marquee:hover .marquee__inner span{color:var(--red);text-shadow:0 0 10px var(--accent-glow)}
@keyframes marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ===== HEADER ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 0;transition:var(--transition)}
.header.scrolled{background:rgba(10,10,10,.9);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,255,65,.06)}
.header__inner{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.3rem;font-weight:700;letter-spacing:.05em;text-transform:lowercase;color:var(--text);font-family:var(--pixel-font)}
.nav{display:flex;gap:32px}
.nav__link{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);transition:color var(--transition);font-family:var(--pixel-font)}
.nav__link:hover{color:var(--green);text-shadow:0 0 10px rgba(0,255,65,.4)}

/* Burger */
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px}
.burger span{display:block;width:24px;height:1.5px;background:var(--text);transition:var(--transition)}
.burger.active span:first-child{transform:rotate(45deg) translate(2.5px,2.5px)}
.burger.active span:last-child{transform:rotate(-45deg) translate(2.5px,-2.5px)}

/* Mobile menu */
.mobile-menu{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:var(--transition)}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:24px}
.mobile-menu a{font-size:1.2rem;font-weight:300;color:var(--text);text-transform:uppercase;letter-spacing:.1em;font-family:var(--pixel-font)}

/* Button */
.btn{display:inline-block;padding:14px 40px;border-radius:0;font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;background:var(--red);color:#fff;transition:var(--transition);border:1.5px solid var(--red);font-family:var(--pixel-font)}
.btn:hover{background:transparent;color:var(--red);box-shadow:0 0 30px var(--accent-glow)}

/* Label */
.label{display:inline-block;font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--green);margin-bottom:16px;font-family:var(--pixel-font);text-shadow:0 0 10px rgba(0,255,65,.3)}

/* Section head */
.section-head{margin-bottom:64px;transition:transform .3s ease-out;position:relative;z-index:1}
.section-head h2{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.section-head .pixel-tag{font-size:2rem}
.section-head .label{transition:opacity .4s ease, letter-spacing .4s ease}
.section-head:hover .label{opacity:1;letter-spacing:.25em}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
#pixel-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__content{position:relative;z-index:1;text-align:center;padding:120px 24px 80px}
.hero__name{font-size:clamp(3rem,10vw,8rem);font-weight:700;letter-spacing:.05em;line-height:.9;text-transform:lowercase;color:#fff;text-shadow:0 0 80px var(--accent-glow),0 0 160px rgba(139,0,0,.2);font-family:var(--pixel-font)}
.hero__tagline{margin:24px 0 40px}

/* Platform buttons */
.hero__platforms,.about__links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.platform-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text-muted);
  font-family:var(--pixel-font);font-size:.55rem;
  text-transform:uppercase;letter-spacing:.08em;
  transition:all .3s ease;
  text-decoration:none;
}
.platform-btn svg{flex-shrink:0;transition:all .3s ease}
.platform-btn:hover{transform:translateY(-2px)}
.platform--spotify:hover{color:#1db954;border-color:#1db954;background:rgba(29,185,84,.08);box-shadow:0 0 20px rgba(29,185,84,.15)}
.platform--yandex:hover{color:#fc0;border-color:#fc0;background:rgba(255,204,0,.08);box-shadow:0 0 20px rgba(255,204,0,.15)}
.platform--apple:hover{color:#fa57c1;border-color:#fa57c1;background:rgba(250,87,193,.08);box-shadow:0 0 20px rgba(250,87,193,.15)}
.platform--vk:hover{color:#0077ff;border-color:#0077ff;background:rgba(0,119,255,.08);box-shadow:0 0 20px rgba(0,119,255,.15)}
.hero__tagline .pixel-tag{font-size:clamp(.45rem,1.2vw,.7rem);color:var(--text-muted);background:rgba(0,255,65,.05);border-color:rgba(0,255,65,.15)}
.hero__scroll{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.hero__scroll span{font-size:.5rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);font-family:var(--pixel-font)}
.hero__scroll-line{width:1px;height:40px;background:var(--text-muted);animation:scrollLine 2s ease-in-out infinite}
@keyframes scrollLine{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ===== DISCOGRAPHY ===== */
.discography{
  padding:120px 0;position:relative;overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, #080808 50%, var(--bg) 100%);
}
.discography::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,255,65,.12), transparent);
}
.discography::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,0,0,.15), transparent);
}
#disco-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
}
.disco__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;perspective:800px;position:relative;z-index:1}
.release{
  display:block;cursor:pointer;
  transition:transform .4s ease, box-shadow .4s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.release:hover{z-index:2}
.release__cover{
  position:relative;aspect-ratio:1;overflow:hidden;
  border-radius:var(--radius);background:#111;
  border:1px solid rgba(255,255,255,.04);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.release:hover .release__cover{
  border-color:rgba(255,255,255,.1);
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 30px rgba(139,0,0,.1);
}
.release__cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease, filter .5s ease}
.release:hover .release__cover img{transform:scale(1.05);filter:brightness(1.1)}

/* Shine / light reflection on hover */
.release__shine{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.12) 0%, transparent 60%);
  opacity:0;transition:opacity .3s ease;
}
.release:hover .release__shine{opacity:1}

.release__info{padding:12px 0}
.release__type{font-size:.5rem;text-transform:uppercase;letter-spacing:.15em;color:var(--green);font-weight:500;font-family:var(--pixel-font)}
.release__info h3{font-size:1rem;font-weight:600;margin:4px 0 2px;line-height:1.3}
.release__year{font-size:.6rem;color:var(--text-muted);font-family:var(--pixel-font)}
.release--album .release__cover{border-color:rgba(139,0,0,.2);box-shadow:0 0 40px var(--accent-glow)}
.release--album:hover .release__cover{border-color:rgba(139,0,0,.4);box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 50px var(--accent-glow)}
.release--ep .release__cover{border-color:rgba(0,255,65,.1)}
.release--ep:hover .release__cover{border-color:rgba(0,255,65,.2);box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 30px rgba(0,255,65,.1)}

/* Disco cursor glow */
.disco__glow{
  position:absolute;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,0,0,.08) 0%, rgba(139,0,0,.02) 40%, transparent 70%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:left .2s ease-out, top .2s ease-out, opacity .4s ease;
  z-index:0;
  opacity:0;
}

/* ===== INTERLUDE ===== */
.interlude{
  padding:100px 0;
  text-align:center;
  background:#000;
  position:relative;
  overflow:hidden;
  cursor:crosshair;
}
.interlude::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,65,.015) 3px, rgba(0,255,65,.015) 4px);
  pointer-events:none;
}
.interlude__glow{
  position:absolute;
  width:300px;height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,255,65,.06) 0%, transparent 70%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:left .2s ease-out, top .2s ease-out, opacity .4s ease;
  opacity:0;
}
.pixel-quote{
  position:relative;z-index:1;
  transition:text-shadow .3s ease, letter-spacing .5s ease;
}
.interlude:hover .pixel-quote{
  text-shadow:0 0 30px rgba(0,255,65,.5), 0 0 60px rgba(0,255,65,.2);
  letter-spacing:.08em;
}

/* ===== ABOUT ===== */
.about{
  padding:120px 0;background:var(--bg-alt);
  position:relative;overflow:hidden;
}
.about::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,.008) 3px, rgba(255,255,255,.008) 4px);
  pointer-events:none;
  animation:scanDrift 8s linear infinite;
}
@keyframes scanDrift{
  0%{transform:translateY(0)}
  100%{transform:translateY(4px)}
}
.about::after{
  content:'';position:absolute;
  bottom:-100px;left:-100px;
  width:400px;height:400px;
  background:radial-gradient(circle, rgba(139,0,0,.05) 0%, transparent 60%);
  pointer-events:none;
}
.about__glow{
  position:absolute;
  width:400px;height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(139,0,0,.06) 0%, transparent 70%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:left .2s ease-out, top .2s ease-out, opacity .4s ease;
  opacity:0;z-index:0;
}
.about__inner{max-width:640px;position:relative;z-index:1}
.about h2{font-size:2.5rem;font-weight:700;margin-bottom:24px;letter-spacing:.03em;text-transform:lowercase;font-family:var(--pixel-font)}
.about p{margin-bottom:16px}
.about__links{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}

/* ===== FOOTER ===== */
.footer{padding:40px 0;border-top:1px solid rgba(0,255,65,.06);position:relative}
.footer::before{
  content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:200px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,255,65,.2), transparent);
}
.footer__inner{display:flex;align-items:center;justify-content:space-between}
.footer__copy{font-size:.55rem;color:var(--text-muted);font-family:var(--pixel-font)}

/* Reveal */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
/* No stagger on releases — instant feel */

/* ===== MODAL ===== */
.modal{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.modal.open{opacity:1;pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(10px)}
.modal__content{
  position:relative;z-index:1;
  background:#0d0d0d;
  border:1px solid rgba(0,255,65,.15);
  max-width:600px;width:90%;max-height:85vh;
  overflow-y:auto;
  padding:0;
  box-shadow:0 0 60px rgba(0,255,65,.05);
}
.modal__content::-webkit-scrollbar{width:4px}
.modal__content::-webkit-scrollbar-track{background:#0d0d0d}
.modal__content::-webkit-scrollbar-thumb{background:rgba(0,255,65,.2)}
.modal__close{
  position:sticky;top:0;right:0;float:right;z-index:5;
  background:rgba(0,0,0,.7);border:1px solid rgba(0,255,65,.15);
  color:var(--green);font-size:1.4rem;cursor:pointer;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  font-family:var(--pixel-font);transition:var(--transition);
}
.modal__close:hover{background:var(--red);color:#fff;border-color:var(--red)}
.modal__header{
  display:flex;gap:20px;padding:24px;
  border-bottom:1px solid rgba(0,255,65,.08);
  align-items:center;
}
.modal__cover{width:120px;height:120px;object-fit:cover;border-radius:var(--radius);flex-shrink:0}
.modal__meta{min-width:0}
.modal__type{font-size:.5rem;margin-bottom:8px}
.modal__title{font-size:1.1rem;font-weight:700;line-height:1.3;margin-bottom:4px}
.modal__year{font-size:.6rem;color:var(--text-muted);font-family:var(--pixel-font)}

/* Services in modal */
.modal__services{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.modal__service{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  color:var(--text-muted);
  font-family:var(--pixel-font);font-size:.4rem;
  text-transform:uppercase;letter-spacing:.06em;
  text-decoration:none;
  transition:all .3s ease;
}
.modal__service svg{flex-shrink:0}
.modal__service:hover{transform:translateY(-1px)}
.service--spotify:hover{color:#1db954;border-color:#1db954;background:rgba(29,185,84,.08);box-shadow:0 0 12px rgba(29,185,84,.2)}
.service--yandex:hover{color:#fc0;border-color:#fc0;background:rgba(255,204,0,.08);box-shadow:0 0 12px rgba(255,204,0,.2)}
.service--vk:hover{color:#0077ff;border-color:#0077ff;background:rgba(0,119,255,.08);box-shadow:0 0 12px rgba(0,119,255,.2)}
.service--apple:hover{color:#fa57c1;border-color:#fa57c1;background:rgba(250,87,193,.08);box-shadow:0 0 12px rgba(250,87,193,.2)}

/* Tracklist */
.modal__tracklist{padding:0}
.track{
  display:flex;align-items:center;gap:14px;
  padding:12px 24px;
  border-bottom:1px solid rgba(255,255,255,.03);
  cursor:pointer;transition:background .2s ease;
}
.track:hover{background:rgba(0,255,65,.04)}
.track.playing{background:rgba(0,255,65,.06)}
.track__num{
  font-family:var(--pixel-font);font-size:.55rem;color:var(--text-muted);
  width:24px;text-align:right;flex-shrink:0;
}
.track.playing .track__num{color:var(--green)}
.track__name{font-size:.85rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track.playing .track__name{color:var(--green)}
.track__duration{font-size:.6rem;font-family:var(--pixel-font);color:var(--text-muted);flex-shrink:0}
.track__eq{
  display:none;gap:2px;align-items:flex-end;height:14px;flex-shrink:0;
}
.track.playing .track__eq{display:flex}
.track__eq span{
  display:block;width:3px;background:var(--green);
  animation:eq .6s ease-in-out infinite alternate;
}
.track__eq span:nth-child(1){height:4px;animation-delay:0s}
.track__eq span:nth-child(2){height:10px;animation-delay:.15s}
.track__eq span:nth-child(3){height:6px;animation-delay:.3s}
@keyframes eq{0%{height:3px}100%{height:14px}}

/* Player bar — slides up when track is playing */
.modal__player{
  position:sticky;bottom:0;
  background:#0a0a0a;
  border-top:1px solid rgba(0,255,65,.15);
  padding:12px 24px;
  display:flex;align-items:center;gap:12px;
  transform:translateY(100%);
  opacity:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  pointer-events:none;
}
.modal__player.visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.modal__player-controls{flex-shrink:0}
.modal__player-btn{
  width:36px;height:36px;
  background:none;border:1px solid var(--green);color:var(--green);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);position:relative;
}
.modal__player-btn:hover{background:var(--green);color:#000}

/* Play/Pause CSS icons */
.play-icon{
  display:block;width:0;height:0;
  border-style:solid;border-width:6px 0 6px 11px;
  border-color:transparent transparent transparent var(--green);
  margin-left:2px;
  transition:var(--transition);
}
.modal__player-btn:hover .play-icon{border-color:transparent transparent transparent #000}
.pause-icon{
  display:flex;gap:3px;align-items:center;justify-content:center;
}
.pause-icon::before,.pause-icon::after{
  content:'';display:block;width:3px;height:12px;background:var(--green);
  transition:var(--transition);
}
.modal__player-btn:hover .pause-icon::before,
.modal__player-btn:hover .pause-icon::after{background:#000}

.modal__player-info{flex:1;min-width:0;overflow:hidden}
.modal__player-title{
  font-size:.55rem;font-family:var(--pixel-font);color:var(--green);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
.modal__player-progress{display:flex;align-items:center;gap:8px;flex:2;min-width:0}
.modal__player-bar{
  flex:1;height:4px;background:rgba(255,255,255,.08);cursor:pointer;position:relative;
  overflow:hidden;
}
.modal__player-fill{
  height:100%;background:var(--green);width:0%;
  transition:width .1s linear;
  box-shadow:0 0 8px rgba(0,255,65,.4);
}
.modal__player-time{font-size:.45rem;font-family:var(--pixel-font);color:var(--text-muted);flex-shrink:0;width:70px;text-align:right}

/* Volume */
.modal__volume{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.modal__volume-icon{
  background:none;border:none;color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:4px;transition:color .2s ease;
}
.modal__volume-icon:hover{color:var(--green)}
.modal__volume-icon svg{display:none}
.modal__volume-icon[data-state="high"] .vol-high{display:block}
.modal__volume-icon[data-state="low"] .vol-low{display:block}
.modal__volume-icon[data-state="muted"] .vol-muted{display:block}

.modal__volume-slider{
  width:70px;height:20px;
  display:flex;align-items:center;
  cursor:pointer;position:relative;
}
.modal__volume-track{
  width:100%;height:4px;
  background:rgba(255,255,255,.08);
  position:relative;border-radius:2px;
}
.modal__volume-fill{
  height:100%;background:var(--green);
  width:25%;border-radius:2px;
  box-shadow:0 0 6px rgba(0,255,65,.3);
  transition:width .05s linear;
}
.modal__volume-thumb{
  position:absolute;top:50%;
  left:25%;
  width:12px;height:12px;
  background:var(--green);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(0,255,65,.5);
  transition:box-shadow .2s ease, transform .15s ease;
}
.modal__volume-slider:hover .modal__volume-thumb{
  transform:translate(-50%,-50%) scale(1.3);
  box-shadow:0 0 16px rgba(0,255,65,.7);
}
/* Pulse animation when volume changes */
@keyframes volumePulse{
  0%{box-shadow:0 0 10px rgba(0,255,65,.5)}
  50%{box-shadow:0 0 20px rgba(0,255,65,.8)}
  100%{box-shadow:0 0 10px rgba(0,255,65,.5)}
}
.modal__volume-thumb.pulse{animation:volumePulse .3s ease}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .disco__grid{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media(max-width:600px){
  .disco__grid{grid-template-columns:1fr 1fr;gap:16px}
  .section-head h2{font-size:1.75rem}
  .section-head .pixel-tag{font-size:1.3rem}
  .about h2{font-size:1.5rem}
  .release__info h3{font-size:.9rem}
  .footer__inner{flex-direction:column;gap:12px;text-align:center}
  .hero__name{font-size:clamp(2rem,8vw,5rem)}
  .hero__platforms{gap:8px}
  .platform-btn{padding:8px 14px;font-size:.45rem}
  .platform-btn svg{width:14px;height:14px}
  .about__links{justify-content:flex-start}
  .modal__header{flex-direction:column;align-items:flex-start;gap:12px}
  .modal__cover{width:80px;height:80px}
  .modal__title{font-size:.9rem}
  .modal__player{flex-wrap:wrap;gap:8px}
  .modal__player-progress{flex-basis:100%;order:4}
  .modal__volume{order:3;flex-basis:auto}
  .modal__volume-slider{width:50px}
}