*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;width:100%;height:100vh;overflow:hidden}#root{width:100%;height:100%}.container{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;background:linear-gradient(135deg,#0a0a0a,#0d0015,#0a0a0a,#15000d,#0a0a0a);background-size:400% 400%;animation:gradientShift 20s ease infinite;position:relative;overflow:hidden;transition:all .6s cubic-bezier(.25,.46,.45,.94)}.container.glitch-effect{animation:glitchShake .35s ease-out,glitchClip .35s ease-out}.container.glitch-effect:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 3%,rgba(255,255,255,.15) 6%,transparent 9%),linear-gradient(90deg,transparent 20%,rgba(255,255,255,.25) 23%,rgba(255,255,255,.1) 26%,transparent 29%),linear-gradient(90deg,transparent 40%,rgba(255,255,255,.3) 43%,rgba(255,255,255,.15) 46%,transparent 49%),linear-gradient(90deg,transparent 60%,rgba(255,255,255,.25) 63%,rgba(255,255,255,.1) 66%,transparent 69%),linear-gradient(90deg,transparent 80%,rgba(255,255,255,.3) 83%,rgba(255,255,255,.15) 86%,transparent 89%);pointer-events:none;z-index:100;animation:glitchFlash .4s ease-out;opacity:1}.container.glitch-effect:after{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.1),transparent);pointer-events:none;z-index:100;animation:glitchFade .4s ease-out}.container.content-view.glitch-effect{animation:glitchShake .4s ease-out,glitchClip .4s ease-out,glitchIntense .4s ease-out}.container.content-view.glitch-effect:before{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 3%,rgba(255,255,255,.2) 6%,transparent 9%),linear-gradient(90deg,transparent 20%,rgba(255,255,255,.35) 23%,rgba(255,255,255,.15) 26%,transparent 29%),linear-gradient(90deg,transparent 40%,rgba(255,255,255,.4) 43%,rgba(255,255,255,.2) 46%,transparent 49%),linear-gradient(90deg,transparent 60%,rgba(255,255,255,.35) 63%,rgba(255,255,255,.15) 66%,transparent 69%),linear-gradient(90deg,transparent 80%,rgba(255,255,255,.4) 83%,rgba(255,255,255,.2) 86%,transparent 89%);animation:glitchFlash .4s ease-out}.container.content-view.glitch-effect:after{animation:glitchFade .4s ease-out}@keyframes glitchShake{0%{transform:translate(-3px,-4px) skew(-1deg)}10%{transform:translate(4px,3px) skewY(1deg)}20%{transform:translate(-2px,-3px) skew(.5deg)}30%{transform:translate(3px,-4px) skewY(-1deg)}40%{transform:translate(-3px,3px) skew(.5deg)}50%{transform:translate(4px,-2px) skewY(.5deg)}60%{transform:translate(-4px,2px) skew(-.5deg)}70%{transform:translate(2px,4px) skewY(-.5deg)}80%{transform:translate(-3px,-2px) skew(1deg)}90%{transform:translate(3px,2px) skewY(-.5deg)}to{transform:translate(0) skew(0)}}@keyframes glitchClip{0%{clip-path:polygon(0 0,100% 0,100% 10%,0 10%,0 20%,100% 20%,100% 35%,0 35%,0 50%,100% 50%,100% 65%,0 65%,0 80%,100% 80%,100% 100%,0 100%)}15%{clip-path:polygon(0 0,100% 0,100% 5%,0 5%,0 15%,100% 15%,100% 30%,0 30%,0 45%,100% 45%,100% 60%,0 60%,0 75%,100% 75%,100% 90%,0 90%,100% 100%,0 100%)}30%{clip-path:polygon(0 0,100% 0,100% 12%,0 12%,0 25%,100% 25%,100% 40%,0 40%,0 55%,100% 55%,100% 70%,0 70%,0 85%,100% 85%,100% 100%,0 100%)}45%{clip-path:polygon(0 0,100% 0,100% 8%,0 8%,0 18%,100% 18%,100% 32%,0 32%,0 48%,100% 48%,100% 62%,0 62%,0 78%,100% 78%,100% 95%,0 95%,100% 100%,0 100%)}60%{clip-path:polygon(0 0,100% 0,100% 15%,0 15%,0 28%,100% 28%,100% 42%,0 42%,0 58%,100% 58%,100% 72%,0 72%,0 88%,100% 88%,100% 100%,0 100%)}75%{clip-path:polygon(0 0,100% 0,100% 6%,0 6%,0 22%,100% 22%,100% 38%,0 38%,0 52%,100% 52%,100% 68%,0 68%,0 82%,100% 82%,100% 98%,0 98%,100% 100%,0 100%)}90%{clip-path:polygon(0 0,100% 0,100% 11%,0 11%,0 24%,100% 24%,100% 36%,0 36%,0 50%,100% 50%,100% 65%,0 65%,0 80%,100% 80%,100% 92%,0 92%,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes glitchIntense{0%{transform:scaleX(.99) scaleY(1.01) rotate(.2deg)}25%{transform:scaleX(1.01) scaleY(.99) rotate(-.2deg)}50%{transform:scaleX(.995) scaleY(1.005) rotate(.1deg)}75%{transform:scaleX(1.005) scaleY(.995) rotate(-.1deg)}to{transform:scaleX(1) scaleY(1) rotate(0)}}@keyframes glitchFlash{0%{opacity:1}50%{opacity:.6}to{opacity:0}}@keyframes glitchFade{0%{opacity:.8}to{opacity:0}}@keyframes scanLinesMove{0%{transform:translateY(0)}to{transform:translateY(4px)}}@keyframes pulse{0%{opacity:.8}50%{opacity:.5}to{opacity:0}}@keyframes clipGlitch{0%{clip-path:polygon(0 0,100% 0,100% 5%,0 5%,0 10%,100% 10%,100% 50%,0 50%,0 60%,100% 60%,100% 100%,0 100%)}10%{clip-path:polygon(0 0,100% 0,100% 15%,0 15%,0 25%,100% 25%,100% 45%,0 45%,0 75%,100% 75%,100% 100%,0 100%)}20%{clip-path:polygon(0 0,100% 0,100% 8%,0 8%,0 20%,100% 20%,100% 40%,0 40%,0 70%,100% 70%,100% 100%,0 100%)}30%{clip-path:polygon(0 0,100% 0,100% 22%,0 22%,0 35%,100% 35%,100% 60%,0 60%,0 65%,100% 65%,100% 100%,0 100%)}40%{clip-path:polygon(0 0,100% 0,100% 12%,0 12%,0 30%,100% 30%,100% 55%,0 55%,0 65%,100% 65%,100% 100%,0 100%)}50%{clip-path:polygon(0 0,100% 0,100% 6%,0 6%,0 18%,100% 18%,100% 48%,0 48%,0 72%,100% 72%,100% 100%,0 100%)}60%{clip-path:polygon(0 0,100% 0,100% 10%,0 10%,0 28%,100% 28%,100% 52%,0 52%,0 68%,100% 68%,100% 100%,0 100%)}70%{clip-path:polygon(0 0,100% 0,100% 4%,0 4%,0 15%,100% 15%,100% 45%,0 45%,0 75%,100% 75%,100% 100%,0 100%)}80%{clip-path:polygon(0 0,100% 0,100% 14%,0 14%,0 32%,100% 32%,100% 58%,0 58%,0 70%,100% 70%,100% 100%,0 100%)}90%{clip-path:polygon(0 0,100% 0,100% 9%,0 9%,0 24%,100% 24%,100% 50%,0 50%,0 68%,100% 68%,100% 100%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 0,0 0)}}@keyframes megaGlitch{0%{transform:translate(-8px,-8px)}10%{transform:translate(8px,8px)}20%{transform:translate(-6px,4px)}30%{transform:translate(6px,-4px)}40%{transform:translate(-4px,-6px)}50%{transform:translate(4px,6px)}60%{transform:translate(-7px,5px)}70%{transform:translate(7px,-5px)}80%{transform:translate(-5px,-3px)}90%{transform:translate(5px,3px)}to{transform:translate(0)}}.glitch-overlay{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:0}.glitch-overlay.active{animation:glitchActive .5s ease-out forwards}@keyframes glitchActive{0%{opacity:1}to{opacity:0}}.glitch-overlay.active:before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(0deg,rgba(255,100,200,.3) 0px,rgba(255,100,200,.3) 2px,transparent 2px,transparent 4px,rgba(100,200,255,.25) 4px,rgba(100,200,255,.25) 6px,transparent 6px,transparent 8px);animation:glitchShift .5s ease-out;pointer-events:none;z-index:1;clip-path:polygon(0 0%,100% 0%,100% 5%,0 5%,0 12%,100% 12%,100% 20%,0 20%,0 30%,100% 30%,100% 38%,0 38%,0 50%,100% 50%,100% 58%,0 58%,0 68%,100% 68%,100% 75%,0 75%,0 88%,100% 88%,100% 100%,0 100%)}.glitch-overlay.active:after{content:"";position:fixed;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 5%,rgba(200,150,255,.3) 10%,transparent 15%,transparent 30%,rgba(150,200,255,.35) 40%,rgba(100,255,200,.25) 50%,transparent 60%,transparent 75%,rgba(255,100,150,.3) 85%,rgba(200,200,255,.25) 92%,transparent 100%);animation:glitchFlash .5s ease-out;pointer-events:none;z-index:2}@keyframes glitchShift{0%{transform:translate(-10px) translateY(-5px);opacity:1}25%{transform:translate(8px) translateY(3px)}50%{transform:translate(-6px) translateY(-8px)}75%{transform:translate(4px) translateY(2px)}to{transform:translate(0) translateY(0);opacity:0}}@keyframes glitchFlash{0%{opacity:.8}50%{opacity:.4}to{opacity:0}}@keyframes glitchNoise{0%{opacity:1;transform:translate(0)}20%{opacity:.8;transform:translate(-4px,-4px)}40%{opacity:.6;transform:translate(4px,4px)}60%{opacity:.4;transform:translate(-2px,2px)}80%{opacity:.2;transform:translate(2px,-2px)}to{opacity:0;transform:translate(0)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.background-blur{position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(100,50,150,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(50,100,200,.1) 0%,transparent 50%);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);pointer-events:none}.rain-container{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#0a0a0f1a,#05050a4d);-webkit-backdrop-filter:brightness(.85) contrast(1.1);backdrop-filter:brightness(.85) contrast(1.1)}.rain-drop{position:absolute;left:var(--left);top:-10px;width:2px;height:15px;background:linear-gradient(180deg,#6496c866,#3c64961a);opacity:.3;animation:rainFall var(--duration) linear infinite;animation-delay:var(--delay);box-shadow:0 0 3px #5078b433,inset 0 0 1px #6496c84d;filter:blur(.5px)}@keyframes rainFall{0%{transform:translateY(0) translate(0);opacity:.2}25%{opacity:.35}50%{opacity:.4}75%{opacity:.35}to{transform:translateY(100vh) translate(15px);opacity:0}}.particles{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:2px;height:2px;background:radial-gradient(circle,rgba(150,100,255,.6),transparent);border-radius:50%;left:var(--x);top:var(--y);animation:float var(--duration) infinite ease-in-out;animation-delay:var(--delay);opacity:.5}@keyframes float{0%,to{transform:translateY(0) translate(0);opacity:0}10%{opacity:.8}50%{opacity:.4}90%{opacity:0}to{transform:translateY(-100px) translate(50px)}}.start-button{font-size:18px;font-weight:600;letter-spacing:3px;color:#ffffff80;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);font-family:Courier New,monospace;position:relative;z-index:10;text-transform:uppercase;animation:fadeInButton .5s ease-out forwards;background:none;border:none;padding:0;-webkit-user-select:none;user-select:none}@keyframes fadeInButton{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.start-button:hover{color:#fff;padding:24px 70px;background-color:#0000004d;border:2px solid rgba(255,255,255,.4);box-shadow:0 0 50px #9664ff66,0 0 30px #6496ff4d,0 8px 32px #00000080,inset 0 0 20px #ffffff1a;transform:scale(1.08) translateY(-2px);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:#1e0a3266}.start-button:active{transform:scale(.98) translateY(0)}.content-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:20;animation:fadeInPanel .6s ease-out forwards}@keyframes fadeInPanel{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.content-wrapper{text-align:center;animation:slideUp .8s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.title{font-size:48px;font-weight:700;letter-spacing:4px;color:#9664ff99;margin:0 0 20px;font-family:Orbitron,sans-serif;text-transform:none;animation:glowText 3s ease-in-out infinite;min-height:60px;display:flex;align-items:center;justify-content:center;text-shadow:0 0 10px rgba(150,100,255,.5),0 0 20px rgba(100,150,255,.3)}.cursor{display:none}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes glowText{0%,to{filter:drop-shadow(0 0 10px rgba(150,100,255,.4))}50%{filter:drop-shadow(0 0 20px rgba(100,150,255,.6))}}.divider{display:none}.socials{display:flex;gap:30px;justify-content:center;animation:fadeInSocials .8s ease-out forwards;animation-delay:.3s;opacity:0}@keyframes fadeInSocials{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.social-icon{width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#ffffff0d;border:1.5px solid rgba(255,255,255,.2);color:#fff9;transition:all .3s cubic-bezier(.175,.885,.32,1.275);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;position:relative;overflow:hidden;text-decoration:none}.social-icon img{width:24px;height:24px;filter:brightness(.8);transition:filter .3s ease}.social-icon:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(150,100,255,.3),transparent);opacity:0;transition:opacity .3s ease;border-radius:50%}.social-icon:hover{border-color:#fff9;transform:scale(1.15) translateY(-5px);background-color:#9664ff33;box-shadow:0 0 30px #9664ff80}.social-icon:hover img{filter:brightness(1.2)}.social-icon:hover:before{opacity:1}.now-playing{position:fixed;bottom:30px;left:50%;transform:translate(-50%);font-family:Orbitron,sans-serif;color:#9664ffcc;font-size:14px;text-transform:lowercase;text-shadow:0 0 10px rgba(150,100,255,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 20px;border:1px solid rgba(150,100,255,.3);border-radius:5px;background:#0d001580;animation:float 3s ease-in-out infinite;z-index:50;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-name{color:#c896ffe6;font-weight:700;text-shadow:0 0 15px rgba(200,150,255,.6)}@keyframes float{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-10px)}}