@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;900&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--grass-green:#a8e63d;--grass-purple:#6b5ce7;--grass-black:#080808;--neon-green:#b8ff3e}html,body{width:100%;height:100%}body{background-color:var(--grass-black);color:#fff;font-family:Outfit,sans-serif}@keyframes floatLogo{0%,to{transform:translateY(0)rotate(-1deg)}25%{transform:translateY(-18px)rotate(.5deg)}50%{transform:translateY(-10px)rotate(1deg)}75%{transform:translateY(-22px)rotate(-.5deg)}}@keyframes glowPulse{0%,to{filter:drop-shadow(0 0 20px #a8e63d66)drop-shadow(0 0 60px #6b5ce74d)}50%{filter:drop-shadow(0 0 50px #a8e63de6)drop-shadow(0 0 100px #6b5ce799)}}@keyframes logoEntrance{0%{opacity:0;filter:blur(20px);transform:scale(.5)translateY(-80px)rotate(-5deg)}60%{opacity:1;transform:scale(1.08)translateY(10px)rotate(1deg)}80%{transform:scale(.97)translateY(-5px)rotate(-.5deg)}to{opacity:1;transform:scale(1)translateY(0)rotate(-1deg)}}@keyframes textReveal{0%{opacity:0;letter-spacing:.5em;transform:translateY(30px)}to{opacity:1;letter-spacing:.25em;transform:translateY(0)}}@keyframes cursorBlink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes socialFadeIn{0%{opacity:0;transform:translateY(40px)scale(.8)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes bgPulse{0%,to{opacity:.5;transform:translate(-50%,-60%)scale(1)}50%{opacity:.9;transform:translate(-50%,-60%)scale(1.1)}}@keyframes bgPulse2{0%,to{opacity:.3;transform:translate(-50%,-40%)scale(1)}50%{opacity:.6;transform:translate(-50%,-40%)scale(1.05)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes ringPulse{0%{opacity:.7;transform:translate(-50%,-50%)scale(.9)}to{opacity:0;transform:translate(-50%,-50%)scale(2.2)}}@keyframes particleDrift{0%{opacity:0;transform:translateY(100vh)scale(0)}10%{opacity:1;transform:scale(1)}90%{opacity:.7}to{transform:translateY(-10vh) translateX(var(--drift,20px)) scale(.4);opacity:0}}@keyframes eqBounce{0%{height:3px}to{height:var(--max-height,16px)}}.landing-page{background:#080808;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.bg-glow-green{pointer-events:none;background:radial-gradient(circle,#a8e63d21 0%,#0000 70%);border-radius:50%;width:700px;height:700px;animation:5s ease-in-out infinite bgPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-60%)}.bg-glow-purple{pointer-events:none;background:radial-gradient(circle,#6b5ce717 0%,#0000 70%);border-radius:50%;width:900px;height:900px;animation:7s ease-in-out infinite bgPulse2;position:absolute;top:50%;left:50%;transform:translate(-50%,-40%)}.scanline{pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#0000000a 2px 4px);position:absolute;inset:0}.particles-container{pointer-events:none;z-index:2;position:absolute;inset:0;overflow:hidden}.particle{width:var(--size,4px);height:var(--size,4px);background:var(--color,#a8e63d);left:var(--left,50%);box-shadow:0 0 var(--glow,6px) var(--color,#a8e63d);animation:particleDrift var(--speed,8s) ease-in-out var(--delay,0s) infinite;border-radius:50%;position:absolute;bottom:-10px}.content-wrapper{z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:20px;display:flex;position:relative}.logo-container{opacity:0;justify-content:center;align-items:center;margin-bottom:36px;animation:1.2s cubic-bezier(.175,.885,.32,1.275) .3s forwards logoEntrance,3s ease-in-out 1.8s infinite glowPulse;display:flex;position:relative}.logo-container.floating{animation:1.2s cubic-bezier(.175,.885,.32,1.275) .3s forwards logoEntrance,6s ease-in-out 1.8s infinite floatLogo,3s ease-in-out 1.8s infinite glowPulse}.logo-ring{pointer-events:none;border:1px solid #a8e63d40;border-radius:40% 60% 60% 40%/50%;width:110%;height:130%;animation:3s ease-out infinite ringPulse;position:absolute;top:50%;left:50%}.logo-ring:nth-child(2){border-color:#6b5ce740;animation-delay:1s}.logo-ring:nth-child(3){border-color:#a8e63d26;animation-delay:2s}.logo-image{object-fit:contain;z-index:2;width:min(520px,85vw);height:auto;display:block;position:relative}.soundcheck-wrapper{opacity:0;justify-content:center;align-items:center;gap:10px;animation:.8s cubic-bezier(.22,1,.36,1) 1.5s forwards textReveal;display:flex}.eq-bars{align-items:flex-end;gap:3px;height:18px;display:flex}.eq-bar{background:var(--neon-green);width:3px;box-shadow:0 0 5px var(--neon-green);animation:eqBounce var(--duration,.5s) ease-in-out 1.5s infinite alternate;border-radius:2px}.soundcheck-text{letter-spacing:.25em;text-transform:uppercase;background:linear-gradient(90deg,#a8e63dcc 0%,#fff 25%,#b8ff3e 50%,#6b5ce7e6 75%,#fff 100%) 0 0/300%;color:#0000;white-space:nowrap;-webkit-background-clip:text;background-clip:text;font-family:Outfit,sans-serif;font-size:clamp(13px,2vw,20px);font-weight:300;animation:4s linear 2s infinite shimmer}.cursor{background:var(--neon-green);vertical-align:middle;width:2px;height:1em;box-shadow:0 0 8px var(--neon-green);margin-left:2px;animation:1s step-end 2s infinite cursorBlink;display:inline-block}.divider-line{opacity:0;background:linear-gradient(#0000,#a8e63d59,#0000);width:1px;height:36px;margin-top:36px;animation:.5s 1.9s forwards socialFadeIn}.social-container{align-items:center;gap:20px;margin-top:28px;display:flex}.social-link{opacity:0;border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;text-decoration:none;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative}.social-link:first-child{animation:.5s 2s forwards socialFadeIn,3.2s ease-in-out 2.8s infinite iconFloat}.social-link:nth-child(2){animation:.5s 2.15s forwards socialFadeIn,3.2s ease-in-out 3.1s infinite iconFloat}.social-link:nth-child(3){animation:.5s 2.3s forwards socialFadeIn,3.2s ease-in-out 2.5s infinite iconFloat}.social-link:nth-child(4){animation:.5s 2.45s forwards socialFadeIn,3.2s ease-in-out 3.5s infinite iconFloat}.social-link:before{content:"";-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff14;border-radius:50%;transition:all .35s;position:absolute;inset:0}.social-link:hover{transform:translateY(-8px)scale(1.18)}.social-link:hover:before{border-color:var(--hc,#a8e63d80);box-shadow:0 0 30px var(--hc,#a8e63d4d), 0 10px 30px #00000080;background:#ffffff1a}.social-link svg{z-index:1;fill:#ffffffa6;width:22px;height:22px;transition:all .3s;position:relative}.social-link:hover svg{fill:#fff;filter:drop-shadow(0 0 8px var(--hc,#a8e63dcc))}.social-facebook{--hc:#1877f2b3}.social-tiktok{--hc:#f0f0f0b3}.social-youtube{--hc:#ff0000b3}.social-instagram{--hc:#e1306cb3}@media (max-width:480px){.logo-image{width:90vw}.social-link{width:46px;height:46px}.social-container{gap:14px}}@keyframes spinDisc{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes playerFadeIn{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes progressGlow{0%,to{box-shadow:0 0 6px #a8e63d80}50%{box-shadow:0 0 16px #a8e63de6}}@keyframes thumbPulse{0%,to{box-shadow:0 0 #a8e63d99}50%{box-shadow:0 0 0 6px #a8e63d00}}.audio-player{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;background:#ffffff0a;border:1px solid #a8e63d26;border-radius:20px;flex-direction:column;gap:14px;width:min(480px,90vw);margin-top:28px;padding:20px 22px;animation:.7s cubic-bezier(.22,1,.36,1) 2s forwards playerFadeIn;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 40px #00000080,inset 0 0 0 1px #a8e63d0d}.audio-player:before{content:"";background:linear-gradient(90deg,#0000,#a8e63d66,#0000);height:1px;position:absolute;top:0;left:15%;right:15%}.track-info{align-items:center;gap:14px;display:flex}.track-disc{background:conic-gradient(#1a1a1a 0deg,#2a2a2a 30deg,#1a1a1a 60deg,#2a2a2a 90deg,#1a1a1a 120deg,#2a2a2a 150deg,#1a1a1a 180deg,#2a2a2a 210deg,#1a1a1a 240deg,#2a2a2a 270deg,#1a1a1a 300deg,#2a2a2a 330deg,#1a1a1a 360deg);border:2px solid #a8e63d4d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;display:flex;box-shadow:0 0 12px #a8e63d33}.disc-inner{border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.disc-inner.spinning{animation:2s linear infinite spinDisc}.disc-hole{background:#0d0d14;border:1px solid #a8e63d66;border-radius:50%;width:10px;height:10px}.track-meta{flex-direction:column;gap:3px;display:flex;overflow:hidden}.track-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.02em;font-family:Outfit,sans-serif;font-size:15px;font-weight:600;overflow:hidden}.track-artist{color:#a8e63db3;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.05em;font-family:Outfit,sans-serif;font-size:12px;font-weight:300;overflow:hidden}.player-controls{align-items:center;gap:12px;width:100%;display:flex}.play-btn{width:44px;height:44px;color:var(--neon-green);cursor:pointer;background:#a8e63d26;border:1px solid #a8e63d59;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .25s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;box-shadow:0 0 12px #a8e63d26}.play-btn svg{width:20px;height:20px;transition:transform .2s}.play-btn:hover{background:#a8e63d40;border-color:#a8e63db3;transform:scale(1.08);box-shadow:0 0 24px #a8e63d66}.play-btn.playing{background:#a8e63d33;border-color:#a8e63d99;animation:2s ease-in-out infinite progressGlow}.play-btn:active{transform:scale(.95)}.progress-area{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.time-label{color:#ffffff73;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-align:center;flex-shrink:0;min-width:32px;font-family:Outfit,sans-serif;font-size:11px;font-weight:400}.progress-bar-track{cursor:pointer;flex:1;align-items:center;height:20px;display:flex;position:relative}.progress-bar-bg{background:#ffffff14;border-radius:4px;height:4px;margin:auto 0;position:absolute;inset:50% 0 0;transform:translateY(-50%)}.progress-bar-fill{background:linear-gradient(90deg,#6b5ce7,#a8e63d);border-radius:4px;min-width:4px;height:4px;transition:width 50ms linear;position:absolute;top:50%;left:0;transform:translateY(-50%);box-shadow:0 0 8px #a8e63d80}.progress-thumb{z-index:2;background:#b8ff3e;border-radius:50%;width:13px;height:13px;transition:left 50ms linear,transform .2s,box-shadow .2s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px #b8ff3eb3}.progress-bar-track:hover .progress-thumb{animation:1.2s ease-in-out infinite thumbPulse;transform:translate(-50%,-50%)scale(1.3);box-shadow:0 0 16px #b8ff3ee6}.progress-bar-track:hover .progress-bar-bg{background:#ffffff24}.volume-area{flex-shrink:0;align-items:center;gap:6px;display:flex}.vol-btn{cursor:pointer;color:#ffffff73;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex}.vol-btn svg{width:18px;height:18px}.vol-btn:hover{color:var(--neon-green)}.volume-slider{appearance:none;cursor:pointer;background:#ffffff1a;background-image:linear-gradient(90deg, #a8e63db3 0%, #a8e63db3 var(--vol-pct,100%), #ffffff1a var(--vol-pct,100%));border-radius:3px;outline:none;width:60px;height:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#b8ff3e;border-radius:50%;width:10px;height:10px;transition:transform .2s;box-shadow:0 0 6px #b8ff3e99}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.volume-slider::-moz-range-thumb{cursor:pointer;background:#b8ff3e;border:none;border-radius:50%;width:10px;height:10px;box-shadow:0 0 6px #b8ff3e99}.eq-bar.playing{animation:eqBounce var(--duration,.5s) ease-in-out 0s infinite alternate}@media (max-width:480px){.audio-player{gap:12px;padding:16px}.volume-slider{width:44px}.play-btn{width:40px;height:40px}}
