/* Celestial logo: original artwork, separate masked motion layers. */
.brand{position:relative}
.brand .logo-motion{margin:0;font-size:inherit;vertical-align:baseline;position:relative;display:block;isolation:isolate}
.logo-motion .brand-logo{visibility:hidden}
.brand .logo-piece,.brand .logo-glint{margin:0;position:absolute;inset:0;pointer-events:none;background:url("assets/srt-celestial-logo.png") center/100% 100% no-repeat}
.logo-symbol{clip-path:inset(0 60% 0 0);transform-origin:24.5% 53%}
.logo-type{clip-path:inset(0 0 0 40%)}
.logo-glint{background:linear-gradient(110deg,transparent 30%,rgba(255,244,220,.65) 48%,transparent 66%);background-size:300% 100%;background-position:100% 0;opacity:0;-webkit-mask:url("assets/srt-celestial-logo.png") center/100% 100% no-repeat;mask:url("assets/srt-celestial-logo.png") center/100% 100% no-repeat}
.logo-motion.is-visible .logo-symbol{animation:celestial-arrive 1.1s cubic-bezier(.16,1,.3,1) both}
.logo-motion.is-visible .logo-type{animation:celestial-lettering .85s .18s cubic-bezier(.16,1,.3,1) both}
.logo-motion.is-visible .logo-glint{animation:celestial-light 1.1s .6s ease-in-out both}
.brand:hover .logo-motion.is-visible .logo-glint,.brand:focus-visible .logo-motion.is-visible .logo-glint{animation:celestial-hover-light .95s ease-in-out both}
@keyframes celestial-arrive{from{opacity:0;transform:translateY(7px) rotate(-22deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes celestial-lettering{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes celestial-light{0%{opacity:0;background-position:100% 0}30%{opacity:.75}100%{opacity:0;background-position:0% 0}}
@keyframes celestial-hover-light{0%{opacity:0;background-position:100% 0}35%{opacity:.8}100%{opacity:0;background-position:0% 0}}
@media(prefers-reduced-motion:reduce){.logo-motion .logo-piece,.logo-motion .logo-glint{animation:none!important;transform:none!important}.logo-glint{display:none}}

/* Two-second brand opening; static page is the default without JavaScript. */
.studio-intro{display:none}
html.intro-active{overflow:hidden}
html.intro-active body>:not(.studio-intro){visibility:hidden;animation:intro-page 2s step-end both}
html.intro-active .studio-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#111110;animation:intro-curtain 2s ease both}
.intro-lockup{position:relative;width:min(580px,86vw);aspect-ratio:2046/769}
.intro-symbol,.intro-type,.intro-shine{position:absolute;inset:0;background:url('assets/srt-celestial-logo.png') center/contain no-repeat}
.intro-symbol{clip-path:inset(0 60% 0 0);transform-origin:24.5% 53%;animation:intro-orbit 1s cubic-bezier(.16,1,.3,1) both}
.intro-type{clip-path:inset(0 0 0 40%);animation:intro-word .8s .3s cubic-bezier(.16,1,.3,1) both}
.intro-shine{background:linear-gradient(110deg,transparent 35%,#fff4dc99 49%,transparent 63%);background-size:300% 100%;-webkit-mask:url('assets/srt-celestial-logo.png') center/contain no-repeat;mask:url('assets/srt-celestial-logo.png') center/contain no-repeat;animation:celestial-light .8s .85s both}
.intro-skip{position:absolute;right:clamp(24px,4vw,64px);bottom:32px;min-height:44px;padding:10px 16px;border:1px solid #55514b;border-radius:30px;background:transparent;color:#efeee8;font-size:14px}.intro-skip span{margin-left:20px}
.brand .logo-glint{background-image:linear-gradient(110deg,transparent 30%,rgba(255,244,220,.65) 48%,transparent 66%);background-size:300% 100%;background-position:100% 0}
@keyframes intro-orbit{0%{opacity:0;transform:translateX(14%) rotate(-70deg) scale(.55)}45%{opacity:1}100%{opacity:1;transform:none}}
@keyframes intro-word{from{opacity:0;transform:translateY(12px);clip-path:inset(0 100% 0 40%)}to{opacity:1;transform:none;clip-path:inset(0 0 0 40%)}}
@keyframes intro-curtain{0%,82%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){html.intro-active{overflow:auto}html.intro-active body>:not(.studio-intro){visibility:visible}html.intro-active .studio-intro{display:none}}

@keyframes intro-page{0%{visibility:hidden}82%,100%{visibility:visible}}
@media(prefers-reduced-motion:reduce){html.intro-active body>:not(.studio-intro){animation:none}}