/* All entrance tracks finish within 1000ms. A complete, usable still is the default. */
.atmosphere{inset:-20px}
.type-depth{position:absolute;inset:0;z-index:0;pointer-events:none}
.subject-depth{width:100%;height:100%}
.motion-ok:not(.entrance-finished) .atmosphere{animation:reveal-fade 360ms ease-out both}
.motion-ok:not(.entrance-finished) :is(.masthead,.outline){animation:reveal-fade 360ms 40ms ease-out both}
.motion-ok:not(.entrance-finished) .hero-type{animation:reveal-fade 500ms 70ms ease-out both}
.motion-ok:not(.entrance-finished) .creator img{animation:reveal-subject 780ms 120ms cubic-bezier(.19,1,.22,1) both}
.motion-ok:not(.entrance-finished) .intro{animation:reveal-fade 500ms 300ms ease-out both}
.motion-ok:not(.entrance-finished) .view-work{animation:reveal-button 440ms 560ms cubic-bezier(.2,.8,.2,1) both}
.motion-ok:not(.entrance-finished) .entry-caption{animation:reveal-fade 300ms 680ms ease-out both}
.motion-ok:not(.entrance-finished) .edition{animation:reveal-fade 350ms 580ms ease-out both}
@keyframes reveal-fade{from{opacity:0}to{opacity:1}}
@keyframes reveal-subject{from{opacity:0;transform:translate3d(0,18px,0) scale(1.012)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes reveal-button{from{opacity:.18;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
/* Focus and activation never wait for an animation or an image download. */
.motion-ok .view-work:focus-visible{animation:none;opacity:1;transform:none}
.motion-ok .masthead:focus-within{animation:none;opacity:1}
.motion-ok .creator img.late-arrival{animation:reveal-fade 240ms ease-out both}
.image-unavailable .creator{display:none}

.motion-auto :is(.atmosphere,.type-depth,.subject-depth){will-change:transform;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.motion-auto .atmosphere{animation-name:drift-far;animation-duration:26s}
.motion-auto .type-depth{animation-name:drift-mid;animation-duration:22s}
.motion-auto .subject-depth{animation-name:drift-near;animation-duration:18s}
@keyframes drift-far{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(-1px,1px,0)}50%{transform:translate3d(1px,-1px,0)}75%{transform:translate3d(1px,1px,0)}}
@keyframes drift-mid{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(2px,-2px,0)}50%{transform:translate3d(-3px,2px,0)}75%{transform:translate3d(-1px,-2px,0)}}
@keyframes drift-near{0%,100%{transform:translate3d(0,0,0)}25%{transform:translate3d(6px,-4px,0)}50%{transform:translate3d(-6px,3px,0)}75%{transform:translate3d(-3px,-5px,0)}}
html[data-paused] .poster *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.poster *{animation:none!important;transition:none!important}}
/* Short mobile screens retain a complete entrance and a reachable button. */
@media(max-width:760px) and (max-height:720px){
  .poster{min-height:540px}
  .masthead{top:15px}
  .outline{top:76px;bottom:54px}
  .studio-label{top:93px}
  .hero-type{top:20%}
  .creator{height:79%;bottom:8%}
  .intro{bottom:151px}
  .tagline{font-size:clamp(19px,5.6vw,23px)}
  .descriptor{margin-top:6px}
  .entry{bottom:57px}
  .edition{bottom:max(18px,env(safe-area-inset-bottom))}
}