/* Global variables */
:root{
  --bg: #000000;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.6);
  --line: rgba(255,255,255,0.08);
  /* white-only glows (no purple / colored glows) */
  --glow: rgba(255,255,255,0.14);
  --glow2: rgba(255,255,255,0.08);
}

/* Reset & base */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial, Helvetica, sans-serif;}
html, body, body * { cursor: none !important; }
body{background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body, body *{ color:var(--text) !important; text-shadow:0 0 10px rgba(255,255,255,0.18); }

/* Layout */
.wrap{max-width:1050px;margin:0 auto;padding:70px 18px 120px;position:relative;z-index:10;}

/* Topbar / Nav */
.topbar{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 18px;background:transparent;border:none;box-shadow:none;}
.logo{font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:1.8rem;cursor:pointer;text-shadow:0 0 28px rgba(255,255,255,0.30);}
.logo a{color:var(--text);text-decoration:none;}
.nav{display:flex;gap:10px;flex-wrap:wrap;}
.nav a{
  text-decoration:none;color:var(--muted);font-size:.9rem;padding:8px 12px;border-radius:12px;
  background:#000;border:1px solid rgba(255,255,255,0.06);box-shadow:0 6px 18px rgba(255,255,255,0.10);
  transition:0.18s ease,transform .18s ease;cursor:pointer;
}
.nav a:hover{color:var(--text);transform:translateY(-1px);box-shadow:0 10px 32px rgba(255,255,255,0.20);}

/* Hero / About */
.hero{margin-top:45px;padding:35px 22px;border-radius:22px;background:transparent;position:relative;overflow:hidden;}
.hero h1{font-size:3.2rem;line-height:1.05;letter-spacing:-1px;z-index:5;}
.hero h1 span{font-weight:400;opacity:0.75;}
.hero p{margin-top:18px;font-size:1.1rem;color:var(--muted);line-height:1.7;max-width:760px;z-index:5;white-space:pre-line;}

/* about box glow and solid bg */
.about{position:relative;z-index:2;background:#000;border-radius:12px;padding:14px;backdrop-filter:none;}
@keyframes drift{from{transform:translate(-20px,-10px);}to{transform:translate(25px,35px);}}

/* Player */
.player{margin-top:18px;border-radius:18px;background:#000;padding:16px;position:relative;z-index:5;border:1px solid rgba(255,255,255,0.10);}
.player .track-label{display:flex;justify-content:center;align-items:center;width:100%;margin:0 0 8px 0;font-weight:600;font-size:.95rem;color:var(--text);text-align:center;}
.controls{display:flex;gap:10px;justify-content:center;width:100%;margin-top:12px;}
.controls button{border:none;background:transparent;padding:12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease;}
.controls button img{width:30px;height:30px;filter:brightness(0) invert(1);display:block;}

/* Progress bar & glow */
.progress{margin-top:12px;width:100%;height:10px;background:rgba(255,255,255,0.06);border-radius:999px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 0 10px rgba(255,255,255,0.03) inset;transition:box-shadow .18s ease;}
.bar{position:relative;height:100%;width:0;background:#fff;border-radius:999px;transition:width .12s linear,box-shadow .18s ease,transform .18s ease;box-shadow:0 0 12px rgba(255,255,255,0.18),0 0 6px rgba(255,255,255,0.10);}
.bar::after{content:"";position:absolute;left:-6px;right:-6px;top:-6px;bottom:-6px;border-radius:999px;background:rgba(255,255,255,0.06);filter:blur(10px);opacity:0.9;pointer-events:none;z-index:-1;transition:opacity .18s ease,filter .18s ease;}
.progress.has-progress .bar{box-shadow:0 0 18px rgba(255,255,255,0.28),0 0 8px rgba(255,255,255,0.14);transform:translateZ(0);}
.progress.has-progress .bar::after{filter:blur(14px);opacity:1;}
@keyframes glowPulse{0%{box-shadow:0 0 18px rgba(255,255,255,0.30),0 0 8px rgba(255,255,255,0.12);}50%{box-shadow:0 0 34px rgba(255,255,255,0.60),0 0 12px rgba(255,255,255,0.18);}100%{box-shadow:0 0 18px rgba(255,255,255,0.30),0 0 8px rgba(255,255,255,0.12);}}
.progress.playing .bar{background:#fff;box-shadow:0 0 28px rgba(255,255,255,0.85),0 0 12px rgba(255,255,255,0.25);animation:glowPulse 2.2s ease-in-out infinite;}
.progress.playing .bar::after{background:rgba(255,255,255,0.14);filter:blur(18px);opacity:1;}

/* Footer */
.footer{margin-top:55px;text-align:center;color:rgba(255,255,255,0.35);font-size:.9rem;padding-bottom:20px;background:transparent;border-radius:8px;display:inline-block;}

/* Cursor (smile) */
.cursor{position:fixed;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;z-index:9999;display:flex;align-items:center;justify-content:center;transition:opacity .28s ease,transform .28s ease;opacity:1;}
.cursor.hidden{opacity:0;transform:translate(-50%,-50%) scale(.98);pointer-events:none;}
.cursor::after{content: ":)";color:#fff;font-size:20px;font-weight:700;letter-spacing:1px;text-shadow:0 0 10px rgba(255,255,255,0.95),0 0 24px rgba(255,255,255,0.45);pointer-events:none;background:transparent;}
@media (pointer:coarse),(max-width:900px){ .cursor{display:none !important;} }

/* Snow canvas & button */
#snow{position:fixed;inset:0;z-index:4;pointer-events:none;}
#snowBtn{position:fixed;bottom:20px;right:20px;z-index:999;background:transparent;border:none;color:transparent;width:40px;height:40px;cursor:pointer;opacity:.05;transition:opacity .2s;}
#snowBtn:hover{opacity:.3;}

/* Glitch helper (optional) */
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:0.55;width:100%;overflow:hidden;clip-path:inset(0 0 0 0);}
.glitch::before{transform:translate(-2px,0);color:rgba(255,255,255,0.85);animation:glitch1 2.2s infinite linear alternate-reverse;}
.glitch::after{transform:translate(2px,0);color:rgba(255,255,255,0.55);animation:glitch2 1.8s infinite linear alternate-reverse;}
@keyframes glitch1{0%{clip-path:inset(0 0 85% 0);}20%{clip-path:inset(15% 0 55% 0);}40%{clip-path:inset(40% 0 35% 0);}60%{clip-path:inset(55% 0 20% 0);}80%{clip-path:inset(10% 0 70% 0);}100%{clip-path:inset(70% 0 10% 0);}}
@keyframes glitch2{0%{clip-path:inset(75% 0 10% 0);}25%{clip-path:inset(45% 0 30% 0);}50%{clip-path:inset(20% 0 55% 0);}75%{clip-path:inset(5% 0 80% 0);}100%{clip-path:inset(60% 0 15% 0);}}