/* Studio choreography: small gestures, long rests, shared easing. */
:root{--studio-ease:cubic-bezier(.16,1,.3,1)}
.header{position:relative}.header::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:currentColor;transform-origin:left;animation:studio-rule 1.3s var(--studio-ease) both}
.hero h1,.orbit-hero h1{animation:studio-title 1.15s var(--studio-ease) both}
.hero-bottom>p,.orbit-intro{animation:studio-copy 1s .14s var(--studio-ease) both}
.hero-bottom>.button,.orbit-actions{animation:studio-copy .9s .24s var(--studio-ease) both}
.hero>.eyebrow{animation:studio-label .9s var(--studio-ease) both}
.hero .dot,.status .dot{position:relative}.hero .dot::after,.status .dot::after{content:'';position:absolute;inset:-5px;border:1px solid currentColor;border-radius:50%;animation:studio-signal 5s ease-out infinite}.status .dot::after{animation-delay:1.5s}
.hero-foot>span:last-child{animation:studio-scroll 5s ease-in-out infinite}
.studio-halo{position:absolute;inset:5%;width:90%;height:90%;pointer-events:none;opacity:.55;overflow:visible;animation:studio-halo-turn 48s linear infinite}
.studio-halo circle{fill:none;stroke:#777;stroke-width:.55;stroke-dasharray:1 12;transform-origin:center;animation:studio-dash 24s linear infinite}
.studio-halo path{fill:none;stroke:#111;stroke-width:.9;stroke-linecap:round;stroke-dasharray:32 850;animation:studio-tracer 18s linear infinite}
.studio-satellite{position:absolute;inset:13%;pointer-events:none;animation:studio-halo-turn 25s linear infinite}
.studio-satellite::before{content:'+';position:absolute;left:3%;top:23%;font-size:17px;line-height:1;color:#777;animation:studio-satellite-counter 25s linear infinite}
.studio-satellite.second{inset:2%;animation-duration:35s;animation-direction:reverse}.studio-satellite.second::before{content:'◇';top:55%;font-size:12px;animation-duration:35s;animation-direction:reverse}
.studio-art-ground{position:absolute;bottom:12%;left:29%;width:42%;height:4%;border-radius:50%;background:#111;opacity:.035;filter:blur(5px);animation:studio-ground 12s ease-in-out infinite;pointer-events:none}
.studio-entry{animation:studio-arrive .9s var(--studio-ease) both;animation-delay:var(--entry-delay,0ms)}
.studio-line{position:relative}.studio-line::after{content:'';height:1px;position:absolute;bottom:-14px;left:0;width:100%;background:#1112;transform-origin:left;animation:studio-rule 1.2s var(--studio-ease) both}
.project-link,.game-card-link{position:relative;isolation:isolate}
.project-visual{isolation:isolate}.studio-sheen{pointer-events:none;position:absolute;inset:0;overflow:hidden;z-index:5}
.studio-sheen::before{content:'';position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 40%,#ffffff35 49%,transparent 58%);transform:translateX(-100%)}
.project-link:hover .studio-sheen::before,.project-link:focus-visible .studio-sheen::before,.game-card-link:hover .studio-sheen::before{animation:studio-sheen 1.25s var(--studio-ease)}
.studio-brackets{position:absolute;inset:12px;z-index:6;pointer-events:none;border:1px solid currentColor;opacity:0;clip-path:polygon(0 0,15px 0,15px 1px,1px 1px,1px 15px,0 15px,0 0,100% 0,100% 15px,calc(100% - 1px) 15px,calc(100% - 1px) 1px,calc(100% - 15px) 1px,calc(100% - 15px) 0,100% 0,100% 100%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 15px),100% calc(100% - 15px),100% 100%,0 100%,0 calc(100% - 15px),1px calc(100% - 15px),1px calc(100% - 1px),15px calc(100% - 1px),15px 100%,0 100%);scale:1.035;transition:opacity .4s,scale .6s var(--studio-ease)}
.project-link:hover .studio-brackets,.project-link:focus-visible .studio-brackets{opacity:.6;scale:1}
.catalog-link{position:relative}.catalog-link::after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--studio-ease)}
.project-link:hover .catalog-link::after{transform:scaleX(1);transform-origin:left}.catalog-link>span:last-child{transition:translate .6s var(--studio-ease)}.project-link:hover .catalog-link>span:last-child{translate:4px -4px}
.project-link h3,.game-card-link h2{transition:translate .6s var(--studio-ease)}.project-link:hover h3,.game-card-link:hover h2{translate:3px 0}
.studio-magnetic{translate:var(--magnet-x,0px) var(--magnet-y,0px);transition:translate .45s var(--studio-ease),scale .2s}.studio-magnetic:active{scale:.96}
.studio-click-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px;border:1px solid #777;border-radius:50%;pointer-events:none;z-index:1001;animation:studio-click .65s ease-out forwards}
.languages{position:relative;isolation:isolate}.languages button{transition:opacity .2s,translate .35s var(--studio-ease)}.languages button:hover{translate:0 -2px}.languages button[aria-pressed=true]{animation:studio-language .4s var(--studio-ease)}
.principles>div{transition:translate .5s var(--studio-ease)}.principles>div:hover{translate:0 -5px}.principles>div>span{display:inline-block;transition:rotate .6s var(--studio-ease)}.principles>div:hover>span{rotate:-12deg}
.feature-grid article{position:relative;transition:translate .5s var(--studio-ease)}.feature-grid article::after{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--studio-ease)}.feature-grid article:hover::after{transform:scaleX(1)}.feature-grid article:hover{translate:0 -3px}
.orbit-how li.studio-entry{animation-name:studio-step}.orbit-how li::marker{color:#777;transition:color .3s}.orbit-how li:hover::marker{color:#111}
.orbit-faq summary{position:relative;padding-right:28px;list-style:none}.orbit-faq summary::-webkit-details-marker{display:none}.orbit-faq summary::after{content:'+';position:absolute;right:0;top:0;font-size:20px;font-weight:400;transition:rotate .4s var(--studio-ease)}.orbit-faq details[open] summary::after{rotate:45deg}
.screenshot-gallery figcaption{position:relative}.screenshot-gallery figcaption::after{content:'';position:absolute;left:0;bottom:-8px;width:100%;height:1px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--studio-ease)}.screenshot-gallery figure:hover figcaption::after{transform:scaleX(1)}
.screenshot-open{transition:transform .6s var(--studio-ease)}.screenshot-open:active{transform:translateY(-3px) scale(.98)}
.showcase-grid{animation:studio-grid-depth 16s ease-in-out infinite}.showcase-orbit{animation:studio-showcase-ring 30s linear infinite}.showcase-orbit::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:#111;left:14%;top:13%}
.screenshot-dialog[open],.secret-dialog[open]{animation:studio-dialog .45s var(--studio-ease)}.screenshot-dialog[open]::backdrop,.secret-dialog[open]::backdrop{animation:studio-backdrop .35s ease-out}
.email{position:relative}.email::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#111;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--studio-ease)}.email:hover::after{transform:scaleX(1);transform-origin:left}
#copy-status:not(:empty){animation:studio-copy .4s var(--studio-ease)}
footer{position:relative}footer::before{content:'';position:absolute;top:-2px;left:0;width:36px;height:3px;background:#111;transform-origin:left;animation:studio-footer-beacon 14s ease-in-out infinite}
.back-top{display:inline-block;transition:translate .5s var(--studio-ease)}.back-top:hover{translate:0 -4px}
.catalog-tabs a[aria-current=page]{animation:studio-tab .45s var(--studio-ease)}
.motion-toggle{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;gap:7px;align-items:center;border:1px solid #1113;border-radius:22px;padding:9px 12px;background:#fffffff2;color:#111;font:600 10px/1.2 Manrope,sans-serif;cursor:pointer;box-shadow:0 3px 15px #00000008;transition:border-color .2s}.motion-toggle:hover{border-color:#111}.motion-toggle:focus-visible{outline:2px solid #111;outline-offset:3px}.motion-toggle i{display:flex;align-items:center;gap:2px;width:13px;height:12px}.motion-toggle i::before,.motion-toggle i::after{content:'';width:3px;height:9px;background:#111;animation:studio-meter 1.7s ease-in-out infinite alternate}.motion-toggle i::after{animation-delay:-.8s}
.studio-away *,.studio-away::before,.studio-away::after{animation-play-state:paused!important}
.motion-held *,.motion-held *::before,.motion-held *::after{animation-play-state:paused!important;transition:none!important}.motion-held .studio-magnetic{translate:none}.motion-held .studio-entry{animation:none!important}.motion-held .hero h1,.motion-held .orbit-hero h1,.motion-held .hero-bottom>p,.motion-held .orbit-intro,.motion-held .hero-bottom>.button,.motion-held .orbit-actions,.motion-held .hero>.eyebrow{animation:none!important}
@keyframes studio-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes studio-title{from{clip-path:inset(0 0 100%);translate:0 20px}to{clip-path:inset(-5% -5% -5%);translate:0 0}}
@keyframes studio-copy{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes studio-label{from{opacity:0;translate:-10px 0}to{opacity:1;translate:0 0}}
@keyframes studio-signal{0%,20%{scale:.5;opacity:0}30%{opacity:.4}65%,100%{scale:1.6;opacity:0}}
@keyframes studio-scroll{0%,60%,100%{translate:0 0}75%{translate:0 4px}85%{translate:0 0}92%{translate:0 2px}}
@keyframes studio-halo-turn{to{rotate:360deg}}
@keyframes studio-dash{to{stroke-dashoffset:-130}}
@keyframes studio-tracer{to{stroke-dashoffset:-882}}
@keyframes studio-satellite-counter{to{rotate:-360deg}}
@keyframes studio-ground{0%,100%{scale:1;opacity:.025}50%{scale:.8;opacity:.055}}
@keyframes studio-arrive{from{opacity:.2;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes studio-sheen{to{transform:translateX(100%)}}
@keyframes studio-click{from{scale:.35;opacity:.7}to{scale:2;opacity:0}}
@keyframes studio-language{from{translate:0 3px;opacity:.3}to{translate:0 0;opacity:1}}
@keyframes studio-step{from{opacity:.1;translate:15px 0}to{opacity:1;translate:0 0}}
@keyframes studio-grid-depth{0%,100%{scale:.96;opacity:.55}50%{scale:1.04;opacity:1}}
@keyframes studio-showcase-ring{from{rotate:0deg}to{rotate:360deg}}
@keyframes studio-dialog{from{opacity:0;translate:0 18px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes studio-backdrop{from{opacity:0}to{opacity:1}}
@keyframes studio-footer-beacon{0%,30%,100%{transform:scaleX(1);opacity:.2}50%,70%{transform:scaleX(3);opacity:.65}}
@keyframes studio-tab{from{opacity:.4;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes studio-meter{to{transform:scaleY(.35)}}
@media(max-width:650px){.studio-halo{opacity:.35}.studio-satellite.second{display:none}.motion-toggle{right:10px;bottom:10px;padding:8px 10px}.motion-toggle span{max-width:82px}.studio-brackets{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.studio-magnetic{translate:none!important}.studio-click-ring{display:none}.studio-entry{opacity:1;translate:none}.studio-halo{rotate:none}}
/* Navigation remains available while reading every page. */
html{scroll-padding-top:112px}
.header{position:sticky;top:0;z-index:50;background:#fff;isolation:isolate}
.header::before{content:'';position:absolute;inset:0 -5.56%;z-index:-1;background:#fff;pointer-events:none}
.header nav{flex-wrap:nowrap}
@media(max-width:650px){
  html{scroll-padding-top:124px}
  .header{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;height:106px;gap:14px;padding:14px 0 12px}
  .header>.brand{grid-column:1;grid-row:1;justify-self:start}
  .header>.languages{grid-column:2;grid-row:1;justify-self:end}
  .header>nav{grid-column:1 / -1;grid-row:2;justify-content:center;gap:clamp(14px,5vw,26px);font-size:11px}
}