.motion-showcase{position:relative;background:#101110;color:#f5f5f0;padding:60px 48px 36px;overflow:hidden}
.showcase-head{max-width:1248px;margin:0 auto 24px;display:flex;justify-content:space-between;align-items:center;gap:30px}.showcase-head h2{font-size:clamp(1.8rem,3.1vw,2.8rem);font-weight:500;letter-spacing:-.035em;line-height:1.1}.showcase-stage{position:relative;max-width:1344px;margin:auto;height:clamp(400px,50vw,760px);border-radius:var(--radius-media,12px);overflow:hidden;background:#090b0a}
.showcase-foot{display:flex;justify-content:space-between;align-items:baseline;gap:28px;max-width:1248px;margin:20px auto 0;color:#b7bdb6;font-size:.8125rem;line-height:1.6}.showcase-foot>span{white-space:nowrap}.showcase-foot svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;vertical-align:-2px;margin-right:7px}
.project-link,.discover,.replay,.motion-toggle,.back-top{position:relative;overflow:hidden;isolation:isolate;border:1px solid #ffffffc4;background:linear-gradient(140deg,#ffffffe0,#ffffff75 60%,#eff5f399);box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #1835280d,0 5px 18px #26362c0c;backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.hero-footer .motion-toggle{position:absolute}.hero-footer .replay{position:absolute}
.project-link:before,.discover:before{content:'';position:absolute;inset:-50% -30%;z-index:-1;background:linear-gradient(115deg,transparent 35%,#ffffffb0 49%,transparent 62%);transform:translateX(-90%);pointer-events:none;transition:transform 520ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){.project-link:hover:before,.discover:hover:before{transform:translateX(75%)}.project-link:not(:hover):before,.discover:not(:hover):before{transition-duration:0s}.project-link:hover svg{transform:translate(2px,-2px)}}
.project-link svg{transition:transform var(--dur-state) var(--ease-out)}
@view-transition{navigation:auto}::view-transition-old(root){animation:page-out var(--dur-exit) var(--ease-in) both}::view-transition-new(root){animation:page-in .35s var(--ease-out) both}@keyframes page-out{to{opacity:0;filter:blur(3px)}}@keyframes page-in{from{opacity:0;filter:blur(3px);transform:translateY(5px)}}
@media(max-width:800px){.motion-showcase{padding:42px 28px 28px}.showcase-stage{height:470px}.showcase-head{align-items:start}.scene-switch button{padding-inline:15px}.showcase-foot>span{display:none}}
@media(max-width:520px){.motion-showcase{padding:35px 16px 24px}.showcase-head{display:block;margin-bottom:22px;padding-inline:8px}.showcase-head h2{font-size:2rem}.scene-switch{margin-top:24px;width:max-content}.scene-switch button{padding:10px 20px}.showcase-stage{height:360px}.showcase-foot{padding-inline:8px;margin-top:18px}.scene-fallback>span{font-size:23vw}}
@media(prefers-reduced-transparency:reduce){.project-link,.discover,.replay,.motion-toggle,.back-top{background:#f8faf8;backdrop-filter:none;-webkit-backdrop-filter:none}.scene-switch{background:#252a24;backdrop-filter:none}}
@media(prefers-contrast:more){.project-link,.discover,.replay,.motion-toggle,.back-top{background:#fff;border-color:#444}.scene-switch{border-color:#fff}.project-link:after,.discover:after,.replay:after,.motion-toggle:after,.back-top:after{display:none}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.project-link:before,.discover:before{display:none}.project-preview{transform:none!important}}

.atmosphere-fallback{position:absolute;inset:0;display:grid;place-items:center;background:#151e1a}.atmosphere-fallback img{width:75%;filter:invert(1);opacity:.7}#atmosphere-canvas{position:absolute;inset:0;width:100%;height:100%}.atmosphere-ready .atmosphere-fallback{visibility:hidden}.atmosphere-pause{background:#ffffff12;border:1px solid #ffffff30;color:#e2e9e2;border-radius:999px;min-height:44px;padding:10px 20px;cursor:pointer;font-size:.8125rem;transition:background-color var(--dur-hover) var(--ease-out),transform var(--dur-press) var(--ease-out)}.atmosphere-pause:active{transform:scale(var(--press-pill))}@media(hover:hover) and (pointer:fine){.atmosphere-pause:hover{background:#ffffff20}}.atmosphere-pause:focus-visible{outline-color:white}@media(max-width:520px){.atmosphere-pause{margin-top:20px}}@media(prefers-reduced-motion:reduce){.atmosphere-pause:active{transform:none}}

/* Glass hover fill: an overlay whose opacity can interpolate, beneath the sheen and the label. */
.project-link:after,.discover:after,.replay:after,.motion-toggle:after,.back-top:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(155deg,#ffffffd9,#ffffff66 56%,#ffffff1f);opacity:0;z-index:-2;pointer-events:none;transition:opacity var(--dur-hover) var(--ease-out)}
@media(hover:hover) and (pointer:fine){.project-link:hover:after,.discover:hover:after,.replay:hover:not(:disabled):after,.motion-toggle:hover:after,.back-top:hover:after{opacity:1}}