/* Blue light cursor */
html.cursor-light-on,html.cursor-light-on *{cursor:none!important}
.cursor-light{position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:0;transition:opacity .35s}
.cursor-light.visible{opacity:1}
.cursor-glow,.cursor-dot{position:absolute;left:0;top:0;will-change:transform}
.cursor-glow:before{content:'';position:absolute;left:-120px;top:-120px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(130,195,255,.26) 0%,rgba(70,150,255,.12) 28%,rgba(40,120,255,.04) 50%,rgba(40,120,255,0) 70%);mix-blend-mode:screen;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s}
.cursor-dot i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#eaf6ff;box-shadow:0 0 6px 2px rgba(154,210,255,.95),0 0 20px 7px rgba(61,139,255,.55);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cursor-light.hovering .cursor-glow:before{transform:scale(1.35)}
.cursor-light.hovering .cursor-dot i{transform:scale(1.7)}
.cursor-light.pressed .cursor-dot i{transform:scale(.8)}
.cursor-light.pressed .cursor-glow:before{transform:scale(.9)}

/* Elements under the light get a soft blue spotlight */
html.cursor-light-on .is-lit{color:#d4ebff!important;text-shadow:0 0 14px rgba(90,168,255,.6);transition:color .2s,text-shadow .2s,border-color .2s,box-shadow .3s,background-color .2s}
html.cursor-light-on :is(.pill,.socials a,.intro-socials a,.intro-open,.intro-lang button,.lang-switch>button,.lang-menu button,.track-list a,.video-cover,#play,#next,#mute).is-lit{background-image:radial-gradient(140px circle at var(--lx,50%) var(--ly,50%),rgba(90,168,255,.24),rgba(90,168,255,0) 70%)!important}
html.cursor-light-on :is(.pill,.socials a,.intro-socials a,.intro-open,.video-cover).is-lit{border-color:rgba(154,210,255,.75)!important;box-shadow:0 0 24px rgba(74,150,255,.3)!important}
html.cursor-light-on .is-lit svg{filter:drop-shadow(0 0 6px rgba(90,168,255,.8))}
html.cursor-light-on input.is-lit{background-image:none!important;box-shadow:none!important}
html.cursor-light-on .video-cover.is-lit img{filter:saturate(1) brightness(1.08)}

/* Depth layers follow the pointer (values set by the visualizer loop in app.js) */
.portrait{translate:calc(var(--camx,0)*-26px) calc(var(--camy,0)*-16px);scale:1.04}
/* overflow:clip keeps the moving layer from creating a scrollbar */
#main{overflow:clip}
#main>section{translate:calc(var(--camx,0)*7px) calc(var(--camy,0)*5px)}
#intro .intro-grid{translate:calc(var(--camx,0)*-6px) calc(var(--camy,0)*-4px)}