/* Galaxy layer: Mew hero, a page-wide star field and section entrances. Loaded last; visual only. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}

/* Page-wide cosmos: fixed behind every section (canvas drawn by galaxy.js). */
.cosmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#050713}
.cosmos canvas{position:absolute;inset:0;width:100%;height:100%}
.cosmos{--p:0}
.cosmos::before,.cosmos::after{content:"";position:absolute;width:70vmax;aspect-ratio:1;border-radius:50%;filter:blur(40px) hue-rotate(calc(var(--p) * 130deg));opacity:.6;will-change:transform,translate}
/* Scroll moves the nebulas across the sky (translate), the keyframes keep them breathing (transform). */
.cosmos::before{translate:calc(var(--p) * 45vw) calc(var(--p) * -30vh)}
.cosmos::after{translate:calc(var(--p) * -40vw) calc(var(--p) * 25vh)}
.cosmos::before{left:-22vmax;top:8%;background:radial-gradient(closest-side,rgba(110,72,220,.42),rgba(110,72,220,.12) 55%,transparent);animation:nebulaA 38s var(--ease-in-out) infinite alternate}
.cosmos::after{right:-26vmax;top:38%;background:radial-gradient(closest-side,rgba(48,160,230,.3),rgba(140,70,220,.14) 55%,transparent);animation:nebulaB 46s var(--ease-in-out) infinite alternate}
@keyframes nebulaA{to{transform:translate3d(14vmax,10vh,0) scale(1.15)}}
@keyframes nebulaB{to{transform:translate3d(-12vmax,-14vh,0) scale(.92)}}

/* Sections become windows onto the cosmos. */
body{background:#050713}
.manifesto,.server-features,.skins,.journey,.community{background:transparent!important}
.journey__sky{opacity:.55}
.journey__sky::after{display:none}
.feature-grid,.steps-grid{background:rgba(52,68,119,.55)}
.feature-grid article,.steps-grid article{background:rgba(10,15,38,.86)}
.feature-grid article:hover,.steps-grid article:hover{background:rgba(20,28,64,.92)}
.skins__stage{background:linear-gradient(180deg,rgba(13,19,52,.88),rgba(7,10,29,.92))}
.footer{position:relative}

/* Hero: the Mew galaxy loop, full bleed, with a scrim only where the words sit. */
body .hero{background:#050713 url("/assets/mew-voxel.png") 70% center/cover no-repeat!important}
body .hero .hero__scene,body .hero .hero__mew-cutout{display:none!important}
body .hero video.hero__video{display:block!important;z-index:0!important;opacity:1!important;filter:saturate(1.08) brightness(.92)!important;object-position:70% center;transform:none;scale:1.04;will-change:translate,scale;animation:heroArrive 2.4s var(--ease-out) both}
body .hero .hero__shade{z-index:1!important;background:linear-gradient(90deg,rgba(4,6,18,.9) 0%,rgba(4,6,18,.62) 34%,rgba(4,6,18,.08) 62%,transparent 80%),linear-gradient(0deg,#050713 0%,rgba(5,7,19,.6) 16%,transparent 42%)!important}
body .hero::before{z-index:1;opacity:.5}
.hero__dust{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
body .hero::after{opacity:.55}
@keyframes heroArrive{from{scale:1.16;opacity:0;filter:saturate(1.08) brightness(.92) blur(8px)}to{scale:1.04;opacity:1;filter:saturate(1.08) brightness(.92) blur(0)}}
.hero h1 i{text-shadow:none}

/* Pressable things answer the press. */
.button,.nav__cta,.ip-button,.skins__tools button,.skins__picker button{transition-property:transform,background,box-shadow,color,border-color,padding;transition-duration:.16s;transition-timing-function:var(--ease-out)}
.nav__cta:active,.ip-button:active,.skins__tools button:active,.skins__picker button:active{transform:scale(.97)}
body .hero #begin-journey:active,body .arrival .button:active{transform:scale(.95)!important}
.ip-button{border-radius:8px;padding:6px 8px;margin-left:-8px}
@media(hover:hover) and (pointer:fine){.ip-button:hover{background:rgba(255,255,255,.07)}}

/* Headline words split by landing-gsap.js: each word rises inside its own mask. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin-bottom:-.12em}
.wi{display:inline-block;will-change:transform}
.hero h1 .w{padding-bottom:.16em;margin-bottom:-.16em}

@media(max-width:840px){
  body .hero video.hero__video{object-position:76% center}
  body .hero .hero__shade{background:linear-gradient(180deg,rgba(4,6,18,.82) 0%,rgba(4,6,18,.55) 45%,rgba(4,6,18,.25) 70%,#050713 100%)!important}
  .cosmos::before,.cosmos::after{filter:blur(28px) hue-rotate(calc(var(--p) * 130deg));opacity:.5}
}
@media(prefers-reduced-motion:reduce){
  /* Less motion keeps the living sky (loop, twinkle, glow) and drops travel and zooms. */
  .cosmos::before,.cosmos::after{animation:nebulaPulse 9s ease-in-out infinite alternate}
  .cosmos::after{animation-delay:-4s}
  body .hero video.hero__video{display:block!important;animation:heroFade 1.2s ease both}
}
@keyframes nebulaPulse{from{opacity:.3}to{opacity:.6}}
@keyframes heroFade{from{opacity:0}to{opacity:1}}

/* Closing call: a violet field over the stars instead of a flat block. */
.arrival{background:radial-gradient(ellipse 60% 70% at 50% 60%,rgba(84,62,190,.45),rgba(16,19,71,.25) 60%,transparent)!important}
.feature-media video{opacity:.85}

/* Seamless sky: no section paints a hard top or bottom edge over the cosmos. */
html,body{overflow-x:clip}
/* Hero: the Mew film fades into the sky instead of ending on a straight line. */
body .hero{background:transparent!important}
body .hero video.hero__video,body .hero .hero__shade{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
body .hero .hero__shade{background:linear-gradient(90deg,rgba(4,6,18,.9) 0%,rgba(4,6,18,.62) 34%,rgba(4,6,18,.08) 62%,transparent 80%)!important}
body .hero::after{display:none}
/* Glows that were clipped by their section now spill over softly. */
.manifesto,.skins,.arrival{overflow:visible}
.manifesto__halo{pointer-events:none;z-index:0}
.skins::before{background:radial-gradient(ellipse 45% 40% at 30% 52%,color-mix(in srgb,var(--skin-tint) 22%,transparent),transparent 100%)}
.arrival{background:radial-gradient(ellipse 50% 42% at 50% 52%,rgba(84,62,190,.42),rgba(16,19,71,.18) 60%,transparent 100%)!important}
.arrival__stars{-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
/* Expedition sky fades in and out at its edges. */
.journey__sky{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.journey__route::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 35%,#000 60%,transparent)}
/* Card grids: the gaps show the sky, so an empty grid never reads as a solid block. */
.feature-grid,.steps-grid{background:transparent!important;gap:2px}
@media(max-width:840px){body .hero .hero__shade{background:linear-gradient(180deg,rgba(4,6,18,.82) 0%,rgba(4,6,18,.55) 45%,rgba(4,6,18,.25) 75%,transparent 100%)!important}}