/* =====================================================================
   BRANDON MYSLIWIEC PRODUCTIONS — music world
   Origin: the blue MYSLIWIEC wordmark crowned by a waveform.
   So: deep studio black-blue, electric-blue light, animated audio bars,
   bold uppercase rhythm. Distinct from every other page.
   ===================================================================== */
body[data-page="music"]{
  --bg:#070a12; --bg2:#0b1120; --card:#101a2e; --line:rgba(120,170,255,.14);
  --ink:#eaf1ff; --muted:#94a3c2; --blue:#4f97d8; --blue-2:#6fc0ff; --blue-3:#a9ddff;
  --sans:'Archivo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); padding-top:var(--nav-h); font-family:var(--sans);
  line-height:1.6; overflow-x:hidden;
}
body[data-page="music"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(60vw 50vh at 50% -10%, rgba(79,151,216,.28), transparent 60%),
    radial-gradient(40vw 40vh at 90% 30%, rgba(111,192,255,.12), transparent 60%), var(--bg);
}
.m-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(18px,4vw,44px)}
body[data-page="music"] h1,body[data-page="music"] h2,body[data-page="music"] h3{font-weight:800;letter-spacing:-.01em;line-height:1.04}
.m-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.26em;font-size:.74rem;color:var(--blue-2)}

/* ---- Equalizer motif ---------------------------------------------- */
.eq{display:flex;align-items:flex-end;gap:4px;height:64px}
.eq span{width:5px;background:linear-gradient(var(--blue-2),var(--blue));border-radius:3px;animation:eq 1.1s ease-in-out infinite}
.eq span:nth-child(1){height:30%;animation-delay:-.2s}.eq span:nth-child(2){height:70%;animation-delay:-.5s}
.eq span:nth-child(3){height:45%;animation-delay:-.1s}.eq span:nth-child(4){height:90%;animation-delay:-.7s}
.eq span:nth-child(5){height:55%;animation-delay:-.3s}.eq span:nth-child(6){height:80%;animation-delay:-.6s}
.eq span:nth-child(7){height:40%;animation-delay:-.15s}.eq span:nth-child(8){height:65%;animation-delay:-.45s}
.eq span:nth-child(9){height:35%}.eq span:nth-child(10){height:75%;animation-delay:-.55s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq span{animation:none}}

/* ---- HERO ---------------------------------------------------------- */
.m-hero{position:relative;padding:clamp(40px,7vw,84px) 0 clamp(36px,5vw,64px);text-align:center}
.m-hero .wordmark{width:min(80%,640px);margin:0 auto;filter:drop-shadow(0 6px 30px rgba(79,151,216,.5))}
.m-hero .eq{justify-content:center;margin:0 auto 1.6rem}
.m-hero p.tag{font-size:clamp(1.05rem,2vw,1.4rem);color:var(--blue-3);margin-top:1.4rem;font-weight:500}
.m-hero .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.btn-spotify{display:inline-flex;align-items:center;gap:.55em;background:var(--blue);color:#06101e;font-weight:700;
  padding:.9em 1.6em;border-radius:999px;transition:transform .18s,box-shadow .18s}
.btn-spotify:hover{transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(79,151,216,.7)}
.btn-wire{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);color:var(--ink);font-weight:600;padding:.9em 1.5em;border-radius:999px;transition:.18s}
.btn-wire:hover{border-color:var(--blue-2);color:var(--blue-2)}

/* ---- VALUES (waveform divider rows) -------------------------------- */
.m-values{padding:clamp(44px,6vw,88px) 0;border-top:1px solid var(--line)}
.m-values .head{max-width:620px;margin-bottom:2rem}
.m-values h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:.5rem 0}
.val-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.val-list .v{background:var(--bg2);padding:clamp(20px,2.4vw,28px)}
.val-list .n{font-family:ui-monospace,Consolas,monospace;color:var(--blue-2);font-size:.8rem}
.val-list h3{font-size:1.1rem;margin:.5rem 0 .4rem}
.val-list p{color:var(--muted);font-size:.92rem}

/* ---- DISCOGRAPHY --------------------------------------------------- */
.m-disco{padding:clamp(44px,6vw,88px) 0}
.m-disco .head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.m-disco h2{font-size:clamp(1.8rem,4vw,2.8rem)}
.disco-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
@media(max-width:900px){.disco-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.disco-grid{grid-template-columns:repeat(2,1fr)}}
.album{display:block;position:relative;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);transition:transform .25s,border-color .25s}
.album:hover{transform:translateY(-6px);border-color:var(--blue)}
.album .art{position:relative}
.album img{width:100%;aspect-ratio:1;object-fit:cover}
.album .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(7,12,24,.55);transition:opacity .25s}
.album:hover .play{opacity:1}
.album .play span{width:54px;height:54px;border-radius:50%;background:var(--blue);color:#06101e;display:grid;place-items:center;font-size:1.3rem;padding-left:3px}
.album .meta{padding:.7rem .85rem .9rem}
.album h3{font-size:.92rem;font-weight:700;letter-spacing:0;line-height:1.25;text-transform:none}
.album span{font-size:.74rem;color:var(--muted)}

/* ---- PLATFORMS ----------------------------------------------------- */
.m-platforms{padding:clamp(44px,6vw,88px) 0;border-top:1px solid var(--line);text-align:center}
.m-platforms h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.4rem 0 1.6rem}
.plat{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;max-width:820px;margin:0 auto}
.plat a{font-weight:600;font-size:.9rem;padding:.6em 1.15em;border:1px solid var(--line);border-radius:999px;color:var(--ink);transition:.2s}
.plat a:hover{border-color:var(--blue-2);color:var(--blue-2);background:rgba(79,151,216,.1)}

/* ---- CTA ----------------------------------------------------------- */
.m-cta{padding:clamp(56px,8vw,120px) 0;text-align:center}
.m-cta h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.m-cta p{color:var(--muted);max-width:50ch;margin:1rem auto 0}
.m-cta .cta{display:flex;gap:.9rem;justify-content:center;margin-top:2rem}