/* MoodV motion: native scrolling, progressive type, restrained depth. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--page-progress:0}
.reading-progress{height:2px;position:fixed;inset:0 0 auto;z-index:30;pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--magenta),var(--pink),var(--yellow));transform:scaleX(var(--page-progress));transform-origin:left}
.site-header{position:fixed;transition:top .5s var(--ease-out),height .5s var(--ease-out),background .5s,box-shadow .5s,border-color .5s}
.site-header.is-scrolled{top:12px;height:62px;background:#1a1024c9;border-color:#e3a4d327;box-shadow:0 12px 45px #09051150}
.brand img{transition:transform .6s var(--ease-out)}.is-scrolled .brand img{transform:scale(.83)}
.desktop-nav a,.desktop-nav button{transition:background .3s,color .3s}
.hero-copy>*{animation:hero-intro 1.15s var(--ease-out) both}
.hero-copy>:nth-child(2){animation-delay:.12s}.hero-copy>:nth-child(3){animation-delay:.22s}.hero-copy>:nth-child(4){animation-delay:.32s}
.hero h1>span{display:inline-block}
.hero-emblem{perspective:1100px}
.hero-emblem img{transition:transform .8s var(--ease-out);will-change:transform}
.hero .haze{transition:transform 1s var(--ease-out)}
.hero .sun{margin-left:var(--sun-x,0px);transition:transform 1.5s,margin-left 1.2s var(--ease-out)}
.button{position:relative;isolation:isolate;overflow:hidden;translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .55s var(--ease-out),transform .45s var(--ease-out),box-shadow .45s}
.button::before{content:'';position:absolute;inset:-100% -50%;z-index:-1;background:linear-gradient(105deg,transparent 40%,#fff6 50%,transparent 60%);transform:translateX(-80%) skewX(-10deg);transition:transform .8s var(--ease-out)}
.button:hover::before{transform:translateX(80%) skewX(-10deg)}
.button:active{transform:translateY(0) scale(.97)}
.button>span{transition:transform .5s var(--ease-out)}.button:hover>span{transform:translate(2px,-2px)}
.cursor-aura{display:none;pointer-events:none;position:fixed;top:0;left:0;width:460px;height:460px;margin:-230px 0 0 -230px;z-index:12;border-radius:50%;background:radial-gradient(circle,#e36cbb0a,transparent 65%);opacity:0;transition:opacity .7s;will-change:transform}
@media(hover:hover) and (pointer:fine) and (min-width:801px){.cursor-aura{display:block}.cursor-aura.is-visible{opacity:1}}
.motion-ready .reveal{opacity:0;transform:translate3d(0,36px,0);transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.is-revealed{opacity:1;transform:translate3d(0,0,0)}
.scene{--tilt-x:0deg;--tilt-y:0deg;transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .8s var(--ease-out),border-color .6s,box-shadow .6s}
.motion-ready .scene.reveal.is-revealed{transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))}
.scene::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(300px circle at var(--spot-x,50%) var(--spot-y,50%),#ffb2e221,transparent 80%);opacity:0;transition:opacity .6s}
.scene:hover{border-color:#e99ac15c;box-shadow:0 20px 60px #0003}.scene:hover::before{opacity:1}
.scene .scene-copy{transition:transform .8s var(--ease-out)}.scene:hover .scene-copy{transform:translateY(-5px)}
.scene .city-art,.scene .coast-art>span{transition:translate 1s var(--ease-out)}.scene:hover .city-art,.scene:hover .coast-art>span{translate:0 -7px}
.join-steps li{transition:border-color .5s}.join-steps li:hover{border-color:#e07ba268}.join-steps .step-symbol{transition:transform .5s var(--ease-out),color .5s}.join-steps li:hover .step-symbol{color:var(--pink);transform:translate(3px,-3px)}
.faqs details[open]>p{animation:faq-reveal .5s var(--ease-out)}
.faq-discord{color:var(--pink);text-decoration:underline;text-underline-offset:3px}.faq-discord:hover{color:var(--yellow)}
.closing h2{transform:translate3d(0,var(--closing-y,0px),0) scale(var(--closing-scale,1));will-change:transform}
dialog[open]{animation:dialog-in .4s var(--ease-out)}dialog[open]::backdrop{animation:backdrop-in .4s ease-out}
@keyframes hero-intro{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes faq-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@media(max-width:800px){.site-header.is-scrolled{height:60px;top:10px}.motion-ready .reveal{transform:translate3d(0,22px,0)}}
@media(prefers-reduced-motion:reduce){.hero-emblem img,.hero .landscape,.hero .haze,.closing h2,.scene,.motion-ready .scene.reveal.is-revealed{transform:none!important;will-change:auto}.motion-ready .reveal{opacity:1;transform:none}.button{translate:none}.cursor-aura{display:none!important}.hero .sun{margin-left:0}.scene:hover .scene-copy{transform:none}.scene:hover .city-art,.scene:hover .coast-art>span{translate:none}*,*::before,*::after{animation:none!important;transition:none!important}}