/* HighGraphic motion: a chrome reveal followed by an editorial title sequence. */
.intro.play{animation:cinema-aperture .85s 1.7s cubic-bezier(.76,0,.24,1) forwards;overflow:hidden;isolation:isolate}
.intro.play:before{content:"";position:absolute;inset:0;background:#050505 url(bg.png) 72% 50%/cover no-repeat;opacity:.5;z-index:-1;animation:chrome-focus 1.8s var(--ease) both}
.intro.play:after{content:"";position:absolute;left:12%;right:12%;bottom:23%;height:1px;background:#bfc0c3;transform-origin:left;animation:studio-line 1.5s cubic-bezier(.65,0,.35,1) both}
.intro-word{font-size:clamp(2.7rem,6vw,5.5rem);font-weight:480;letter-spacing:-.04em;animation:studio-word 1.25s .12s var(--ease) both}
.intro-word span{font-size:9px;letter-spacing:.3em;animation:studio-caption .8s .55s var(--ease) both}
.intro-skip{z-index:2;border-bottom:1px solid #77777c;border-radius:0;padding:10px 0;bottom:36px}
.hero-bg{animation:chrome-breathe 16s ease-in-out infinite alternate;transform-origin:72% 45%}
.hero-enter h1>span{animation:headline-uncover 1.15s var(--ease) both}
.hero-enter h1>span:nth-child(2){animation-delay:.16s}
.hero-enter .hero-bottom{animation:studio-arrival .9s .38s var(--ease) both}
.hero-enter .hero-caption{animation:studio-arrival .7s .55s var(--ease) both}
.hero-enter .hero-bg{animation:chrome-breathe 16s ease-in-out infinite alternate}
.hero.is-offscreen .hero-bg,.page-hidden .hero-bg,.motion-paused .hero-bg{animation-play-state:paused}
.art-enter .work-image{animation:artwork-uncover 1s var(--ease) both}
.art-enter .work-image>img{animation:artwork-focus 1.2s var(--ease)}
.art-enter .work-meta{animation:studio-arrival .65s .25s var(--ease) both}
.motion-controls{display:flex;align-items:center;gap:22px;letter-spacing:0}
.motion-controls button{background:none;border:0;color:var(--silver);font-size:10px;padding:8px 0;min-height:36px;text-underline-offset:4px;white-space:nowrap}
.motion-controls button:hover{text-decoration:underline;color:white}
.motion-controls>a{font-size:11px;display:flex;align-items:center;gap:13px;letter-spacing:0}
.app-content{animation:workspace-arrival .3s var(--ease) both}
.motion-paused .hero-enter h1>span,.motion-paused .hero-enter .hero-bottom,.motion-paused .hero-enter .hero-caption,.motion-paused .art-enter .work-image,.motion-paused .art-enter .work-image>img,.motion-paused .art-enter .work-meta,.motion-paused .app-content{animation:none}
.motion-paused .work-image>img,.motion-paused .work-open,.motion-paused .btn{transition:none}
.motion-paused .intro.play{display:none}
@keyframes cinema-aperture{0%{clip-path:inset(0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes chrome-focus{0%{transform:scale(1.22);filter:blur(8px);opacity:0}100%{transform:scale(1.035);filter:blur(0);opacity:.5}}
@keyframes studio-word{0%{clip-path:inset(0 100% 0 0);transform:translateY(14px);filter:blur(4px);opacity:.35}100%{clip-path:inset(0);transform:translateY(0);filter:blur(0);opacity:1}}
@keyframes studio-caption{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:translateY(0)}}
@keyframes studio-line{0%{transform:scaleX(0);opacity:0}20%{opacity:1}75%{transform:scaleX(1);opacity:.8}100%{transform:scaleX(1);opacity:0}}
@keyframes chrome-breathe{0%{transform:scale(1.015) translateX(0)}100%{transform:scale(1.105) translateX(-1.2%)}}
@keyframes headline-uncover{0%{clip-path:inset(0 0 100% 0);transform:translateY(30px);filter:blur(5px);opacity:.5}100%{clip-path:inset(0);transform:translateY(0);filter:blur(0);opacity:1}}
@keyframes studio-arrival{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:translateY(0)}}
@keyframes artwork-uncover{0%{clip-path:inset(9% 0 9% 0);opacity:.5}100%{clip-path:inset(0);opacity:1}}
@keyframes artwork-focus{0%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes workspace-arrival{0%{opacity:.6;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.hero-caption{flex-wrap:wrap;gap:12px}.motion-controls{gap:18px}.motion-controls button{font-size:9px}.motion-controls>a{font-size:10px}}
@media(max-width:640px){.hero-main{padding-bottom:30px}.hero-caption{padding-top:13px;gap:4px}.hero-caption>span{max-width:none;width:100%;font-size:7px}.motion-controls{width:100%;justify-content:space-between;gap:12px}.motion-controls button{font-size:8px;min-height:35px}.motion-controls>a{font-size:9px;gap:7px}.intro-word{font-size:clamp(2.5rem,10vw,4rem)}.intro-word span{font-size:7px;letter-spacing:.22em}.intro-skip{bottom:28px;right:7%;font-size:11px}}