:root{color-scheme:dark;--x:50%;--y:50%;--mx:0;--my:0}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#060307}body{font-family:Arial,Helvetica,sans-serif}.scene{position:relative;width:100vw;height:100svh;overflow:hidden;isolation:isolate;background:#080408;cursor:crosshair;touch-action:manipulation}.world{position:absolute;inset:-3%;z-index:-8;background:url("assets/cloie-hero.webp") center 44%/cover no-repeat;transform:scale(1.07) translate(calc(var(--mx)*-7px),calc(var(--my)*-5px));filter:saturate(1.08) contrast(1.04);transition:transform .18s ease-out}.scene::before{content:"";position:absolute;inset:0;z-index:-6;background:radial-gradient(circle at 50% 46%,transparent 28%,#09040a38 60%,#020102d9 112%),linear-gradient(180deg,#05020818,#06020700 55%,#030103a6)}.haze{position:absolute;z-index:-5;width:50vmax;aspect-ratio:1;border-radius:50%;filter:blur(80px);opacity:.22;mix-blend-mode:screen;pointer-events:none}.haze-a{left:-20vmax;bottom:-32vmax;background:#ff248f;animation:breathe 8s ease-in-out infinite}.haze-b{right:-24vmax;top:-34vmax;background:#4beeff;animation:breathe 10s ease-in-out -4s infinite}.grain{position:absolute;inset:-50%;z-index:3;opacity:.08;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");animation:grain .25s steps(2) infinite}.light-leak{position:absolute;inset:-30%;z-index:2;pointer-events:none;background:conic-gradient(from 30deg at 50% 50%,transparent 0 38%,#ff5ba81f 42%,transparent 48% 72%,#6af1ff16 78%,transparent 83%);mix-blend-mode:screen;animation:turn 18s linear infinite}.film{position:absolute;top:-4vh;bottom:-4vh;width:clamp(42px,5vw,76px);z-index:1;opacity:.65;border-inline:2px solid #ff4a9b7a;background:repeating-linear-gradient(180deg,#fbdbe5 0 25px,transparent 25px 56px);mask:linear-gradient(90deg,transparent 0 18%,#000 18% 82%,transparent 82%);filter:drop-shadow(0 0 12px #ff319477);pointer-events:none}.film-left{left:1.5vw}.film-right{right:1.5vw}.orbit{position:absolute;left:50%;top:50%;z-index:-4;border:1px solid #ff55a653;border-radius:50%;width:min(112vmin,1120px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(12deg) scaleY(.4);animation:spin 22s linear infinite}.orbit i{position:absolute;left:9%;top:16%;width:10px;aspect-ratio:1;border-radius:50%;background:#ff55a6;box-shadow:0 0 15px #ff55a6,0 0 45px #ff55a6}.orbit-b{width:min(94vmin,940px);border-color:#73efff4e;animation-direction:reverse;animation-duration:28s;transform:translate(-50%,-50%) rotate(-18deg) scaleY(.52)}.orbit-b i{left:82%;top:77%;background:#76f1ff;box-shadow:0 0 15px #76f1ff,0 0 45px #76f1ff}.sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.78;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px),radial-gradient(circle,#ff58a8 0 1.5px,transparent 2.2px),radial-gradient(circle,#6bf1ff 0 1px,transparent 1.8px);background-size:113px 113px,173px 173px,227px 227px;background-position:12px 23px,41px 81px,95px 37px;animation:stars 18s linear infinite}.equalizer{position:absolute;left:clamp(60px,8vw,128px);bottom:6vh;height:44px;display:flex;align-items:flex-end;gap:5px;z-index:4;filter:drop-shadow(0 0 8px #ff48a2)}.equalizer i{display:block;width:4px;height:28%;border-radius:6px;background:linear-gradient(#69efff,#ff3c98);animation:beat .72s ease-in-out infinite alternate}.equalizer i:nth-child(3n){height:86%;animation-delay:-.2s}.equalizer i:nth-child(4n){height:50%;animation-delay:-.42s}.equalizer i:nth-child(5n){height:100%;animation-delay:-.58s}.cursor-glow{position:fixed;left:var(--x);top:var(--y);z-index:2;width:32vmax;aspect-ratio:1;border-radius:50%;pointer-events:none;translate:-50% -50%;background:radial-gradient(circle,#ff72b112 0,transparent 68%);mix-blend-mode:screen}footer{position:absolute;right:clamp(68px,8vw,128px);bottom:clamp(16px,3vh,30px);z-index:5;color:#f5dce8;font:700 10px/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.72;text-shadow:0 2px 12px #000}.burst{position:fixed;z-index:20;width:8px;height:8px;border-radius:2px;pointer-events:none;background:#ff4ca1;box-shadow:0 0 12px #ff4ca1;animation:burst .7s cubic-bezier(.1,.7,.2,1) forwards}.burst:nth-of-type(2n){background:#6df5ff}.burst:nth-of-type(3n){background:#ffe23f}.scene.kicked .world{animation:kick .48s cubic-bezier(.2,.8,.2,1)}
@keyframes breathe{50%{opacity:.38;scale:1.13}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}@keyframes turn{to{transform:rotate(360deg)}}@keyframes spin{to{rotate:360deg}}@keyframes stars{to{background-position:125px 136px,214px 254px,322px 264px}}@keyframes beat{to{height:100%}}@keyframes burst{to{opacity:0;transform:translate(calc(cos(var(--angle))*var(--distance)),calc(sin(var(--angle))*var(--distance))) rotate(260deg) scale(.15)}}@keyframes kick{45%{transform:scale(1.1) translate(calc(var(--mx)*-7px),calc(var(--my)*-5px));filter:saturate(1.32) contrast(1.08)}}
@media(max-width:650px){.world{inset:-5%;background-position:50% 44%}.film{width:34px;opacity:.45}.film-left{left:0}.film-right{right:0}.equalizer{left:48px;bottom:4vh;height:34px}footer{right:44px;bottom:4vh}.orbit{width:145vw}.sparkles{opacity:.55}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}.world{transform:scale(1.07)}}