/* Midnight Echo — bespoke music artist template.
   Vibrant, neon, audio-reactive. Distinct from every other template:
   Unbounded + Inter, black with purple→cyan, a simulated audio player
   with a live waveform and a tour-dates list. */
*{box-sizing:border-box}
:root{
  --accent:#a855f7; --accent-2:#22d3ee;
  --ink:#f0edf7; --muted:#948fb0; --line:#221f33;
  --bg:#070510; --panel:#0e0b1c; --card:#130f26; --deep:#050308;
  --grad:linear-gradient(100deg,#a855f7,#22d3ee);
  --shadow:0 30px 64px -30px rgba(0,0,0,.85);
  --disp:"Unbounded",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--disp); font-weight:700; line-height:1.02; margin:0; letter-spacing:-.01em}
.wrap{width:min(1180px,92vw); margin-inline:auto}
.eyebrow{display:inline-block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-2); font-weight:700}
.grad-t{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--body); font-weight:700; font-size:.92rem;
  padding:.85em 1.7em; border-radius:100px; cursor:pointer; border:2px solid transparent; transition:transform .2s, box-shadow .2s, background .2s, color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-fill{background:var(--grad); color:#0a0512; box-shadow:0 12px 30px -10px rgba(168,85,247,.7)}
.btn-line{border-color:#332e4d; color:var(--ink)}
.btn-line:hover{border-color:var(--accent); color:var(--accent)}
.btn-light{background:var(--ink); color:#0a0512}

/* nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; padding:18px 0; transition:.3s}
.nav.stuck{background:rgba(7,5,16,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:11px 0}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:.5em; font-family:var(--disp); font-size:1.15rem; font-weight:700}
.brand .mk{display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--grad); color:#0a0512; font-size:1.1rem}
.nav-links{display:flex; gap:26px; font-weight:600; font-size:.92rem}
.nav-links a{color:var(--muted)} .nav-links a:hover{color:var(--accent-2)}
.nav-cta{display:flex; align-items:center; gap:12px}
.burger{display:none; width:44px; height:44px; border:2px solid var(--line); border-radius:11px; background:transparent; cursor:pointer; padding:11px}
.burger svg{width:100%; height:100%; fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round}

/* hero */
.hero{padding:140px 0 56px; position:relative}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; opacity:.7; background:radial-gradient(600px 420px at 74% 30%, rgba(168,85,247,.2), transparent 66%), radial-gradient(500px 360px at 20% 70%, rgba(34,211,238,.14), transparent 66%)}
.hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.7rem,6.4vw,5rem); margin:16px 0 0}
.lede{font-size:1.1rem; color:var(--muted); max-width:42ch; margin:20px 0 28px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{display:flex; gap:26px; margin-top:32px; flex-wrap:wrap; color:var(--muted); font-size:.86rem}
.hero-note b{color:var(--ink); font-family:var(--disp)}
.dhero-art{position:relative; aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:linear-gradient(150deg,#231043,#08050f 74%); box-shadow:var(--shadow)}
.dhero-art .art-emoji{position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(5rem,12vw,8rem); transition:opacity .6s}
.dhero-art .gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; border-radius:inherit}
.dhero-art.gl-fallback .art-emoji{animation:floaty 5s ease-in-out infinite}
.art-frame{position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(168,85,247,.28)}
.art-chip{position:absolute; z-index:3; background:rgba(7,5,16,.78); color:var(--accent-2); backdrop-filter:blur(6px); border:1px solid var(--line); padding:8px 13px; border-radius:100px; font-size:.78rem; font-weight:700}
.art-chip.c1{left:16px; top:16px} .art-chip.c2{right:16px; bottom:16px}
@keyframes floaty{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* sections */
.sec{padding:70px 0}
.sec-head{max-width:60ch}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.1rem); margin:10px 0}
.sec-head p{color:var(--muted); margin:0}

/* player */
.player-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; margin-top:32px}
.player{background:var(--card); border:1px solid var(--line); border-radius:22px; padding:26px; box-shadow:var(--shadow)}
.pl-art{aspect-ratio:1; border-radius:16px; overflow:hidden; position:relative; background:var(--panel)}
.pl-art img{width:100%; height:100%; object-fit:cover}
.pl-art .spin{position:absolute; inset:0; display:grid; place-items:center}
.pl-now{margin:18px 0 6px}
.pl-now .t{font-family:var(--disp); font-size:1.3rem} .pl-now .a{color:var(--muted); font-size:.9rem}
.wave{display:flex; align-items:flex-end; gap:3px; height:46px; margin:14px 0 10px}
.wave i{flex:1; background:var(--grad); border-radius:2px; height:20%; opacity:.5; transition:opacity .2s}
.player.playing .wave i{opacity:1}
.seek{height:6px; border-radius:6px; background:var(--panel); cursor:pointer; position:relative; overflow:hidden}
.seek span{display:block; height:100%; width:0; background:var(--grad); border-radius:6px}
.times{display:flex; justify-content:space-between; font-size:.76rem; color:var(--muted); margin-top:6px; font-variant-numeric:tabular-nums}
.controls{display:flex; align-items:center; justify-content:center; gap:20px; margin-top:14px}
.ctrl{background:none; border:0; color:var(--ink); cursor:pointer; font-size:1.2rem; opacity:.85; transition:.2s}
.ctrl:hover{opacity:1; color:var(--accent-2)}
.ctrl.play{width:58px; height:58px; border-radius:50%; background:var(--grad); color:#0a0512; display:grid; place-items:center; font-size:1.4rem; opacity:1}
.ctrl.play:hover{transform:scale(1.05)}
/* tracklist */
.tracks{background:var(--card); border:1px solid var(--line); border-radius:22px; overflow:hidden}
.track{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 22px; border-bottom:1px solid var(--line); cursor:pointer; transition:.2s}
.track:last-child{border-bottom:0}
.track:hover{background:var(--panel)}
.track.on{background:linear-gradient(90deg, rgba(168,85,247,.16), transparent)}
.track .no{font-family:var(--disp); color:var(--muted); font-size:.9rem; width:24px; text-align:center}
.track.on .no{color:var(--accent-2)}
.track .tn{font-weight:600} .track .ta{color:var(--muted); font-size:.82rem}
.track .td{color:var(--muted); font-size:.84rem; font-variant-numeric:tabular-nums}
.track .eq{display:none; gap:2px; align-items:flex-end; height:14px}
.track.on.playing .eq{display:flex}
.track .eq i{width:3px; background:var(--accent-2); border-radius:1px; animation:eq 0.8s ease-in-out infinite}
.track .eq i:nth-child(2){animation-delay:.2s} .track .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* release feature */
.rel{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.rel-art{border-radius:20px; overflow:hidden; aspect-ratio:1; box-shadow:var(--shadow); position:relative}
.rel-art img{width:100%; height:100%; object-fit:cover}
.rel-art .tagd{position:absolute; left:16px; top:16px; background:rgba(7,5,16,.7); backdrop-filter:blur(6px); border:1px solid var(--line); padding:6px 12px; border-radius:100px; font-size:.76rem; font-weight:700; color:var(--accent-2)}

/* tour */
.tour{display:grid; gap:10px; margin-top:30px}
.date{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 22px; transition:.2s}
.date:hover{border-color:var(--accent)}
.date .dd{text-align:center; min-width:60px}
.date .dd .m{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2)}
.date .dd .n{font-family:var(--disp); font-size:1.6rem; line-height:1}
.date .dv{font-weight:600} .date .dc{color:var(--muted); font-size:.86rem}
.date .btn{padding:.6em 1.3em}
.date.sold .btn{background:transparent; border:2px solid var(--line); color:var(--muted); cursor:not-allowed}

.rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* footer */
.foot{background:var(--deep); border-top:1px solid var(--line); padding:54px 0 30px; color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px}
.foot .brand{color:var(--ink)}
.foot p{color:var(--muted); font-size:.9rem; max-width:34ch; margin-top:10px}
.foot h5{color:var(--ink); font-family:var(--disp); font-weight:700; margin:0 0 12px; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.9rem}
.foot a:hover{color:var(--accent-2)}
.foot-base{margin-top:38px; padding-top:20px; border-top:1px solid var(--line); font-size:.82rem}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:34px} .dhero-art{max-width:400px; margin-inline:auto; order:-1}
  .player-wrap{grid-template-columns:1fr} .rel{grid-template-columns:1fr; gap:28px}
  .date{grid-template-columns:auto 1fr; row-gap:10px} .date .btn{grid-column:2; justify-self:start}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:100%; right:4vw; flex-direction:column; background:var(--panel); padding:18px 22px; border-radius:12px; box-shadow:var(--shadow); border:1px solid var(--line)}
}
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} .track .eq i{animation:none} *{scroll-behavior:auto} }