/* Entry and scroll are on separate layers, so finishing an intro cannot reset a scene. */
@keyframes title-unmask {
  from {
    transform:translateY(112%) rotate(2deg);
  }
  to {
    transform:none;
  }
}
@keyframes frame-unmask {
  from {
    clip-path:inset(0 100% 0 0);
  }
  to {
    clip-path:inset(0);
  }
}
@keyframes menu-unmask {
  from {
    clip-path:inset(0 0 100%);
  }
  to {
    clip-path:inset(0);
  }
}
@media(prefers-reduced-motion:no-preference) {
  body:not(.motion-reduced):not(.intro-complete) .brand-wordmark>span:first-child {
    animation:frame-unmask .75s var(--ease) both;
  }
  body:not(.motion-reduced):not(.intro-complete) .title-mask>span {
    animation:title-unmask 1s .12s var(--ease) backwards;
  }
  body:not(.motion-reduced):not(.intro-complete) .title-mask:nth-child(2)>span {
    animation-delay:.23s;
  }
  body:not(.motion-reduced):not(.intro-complete) .title-mask:nth-child(3)>span {
    animation-delay:.34s;
  }
  body:not(.motion-reduced) .mobile-menu[open] {
    animation:menu-unmask .45s var(--ease);
  }
  .motion-ready:not(.motion-reduced) .frame-piece-main img {
    transform:scale(calc(1.2 - var(--hero-progress)*.12));
  }
  .motion-ready:not(.motion-reduced) .frame-thread {
    transform:scaleY(calc(.2 + var(--hero-progress)*.8));
  }
  .motion-ready:not(.motion-reduced) .portfolio-home .portfolio-preview {
    clip-path:inset(0 calc((1 - var(--project-progress,1))*7%) 0 0);
    transform:translateY(calc((1 - var(--project-progress,1))*30px));
  }
  .motion-ready:not(.motion-reduced) .showroom-window--0 {
    transform:translateY(calc(var(--showroom-progress,0)*35px)) rotateY(calc(8deg - var(--showroom-progress,0)*8deg));
  }
  .motion-ready:not(.motion-reduced) .showroom-window--2 {
    transform:translateY(calc(var(--showroom-progress,0)*-35px)) rotateY(calc(-8deg + var(--showroom-progress,0)*8deg));
  }
  .motion-ready:not(.motion-reduced) .positioning h2 {
    transform:translateX(calc((1 - var(--position-progress,1))*22px));
  }
}
@media(max-width:767px) and (prefers-reduced-motion:no-preference) {
  .motion-ready:not(.motion-reduced) .hero-frame {
    transform:translateY(calc(var(--hero-progress)*15px)) rotateZ(calc(1deg - var(--hero-progress)*1deg));
  }
  .motion-ready:not(.motion-reduced) .frame-piece-detail {
    translate:0 calc(var(--hero-progress)*-10px);
  }
  .motion-ready:not(.motion-reduced) .portfolio-home .portfolio-preview {
    clip-path:none;
    transform:none;
  }
  .motion-ready:not(.motion-reduced) .positioning h2 {
    transform:none;
  }
}
.motion-reduced *,.motion-reduced *:before,.motion-reduced *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important;
}
.motion-reduced .hero-frame,.motion-reduced .frame-piece-detail,.motion-reduced .frame-piece-main img,.motion-reduced .showroom-window {
  transform:none!important;
  translate:none!important;
}
.motion-reduced .service-stage {
  position:relative;
  top:auto;
}
.motion-reduced .manifesto-highlight:after,.motion-reduced .step-rail:after {
  transform:none!important;
}
html:has(.motion-reduced) {
  scroll-behavior:auto;
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .hero-frame,.frame-piece-detail,.frame-piece-main img,.showroom-window {
    transform:none!important;
    translate:none!important;
  }
  .service-stage {
    position:relative;
    top:auto;
  }
  .manifesto-highlight:after,.step-rail:after {
    transform:none!important;
  }
}
/* One outline moves from the project viewport into the editorial divider. */
.hero-frame {
  border:0;
}
.frame-outline {
  position:absolute;
  inset:0;
  border:1px solid var(--line);
  pointer-events:none;
  transform-origin:0 0;
}
@media(min-width:768px) and (prefers-reduced-motion:no-preference) {
  .motion-ready:not(.motion-reduced) .hero-frame {
    transform:none;
  }
  .motion-ready:not(.motion-reduced) .frame-outline {
    border-color:var(--blue);
    opacity:calc(.45 + var(--hero-progress)*.55);
    transform:translate(calc(var(--frame-x,0px)*var(--hero-progress)),calc(var(--frame-y,0px)*var(--hero-progress))) scale(calc(1 + (var(--frame-scale-x,1) - 1)*var(--hero-progress)),calc(1 + (var(--frame-scale-y,1) - 1)*var(--hero-progress)));
  }
  .motion-ready:not(.motion-reduced) .frame-piece {
    clip-path:inset(0 0 calc(var(--hero-progress)*100%) 0);
    transform:perspective(1200px) rotateY(calc(-4deg + var(--hero-progress)*4deg));
  }
  .motion-ready:not(.motion-reduced) .frame-piece-detail {
    translate:0 calc(var(--hero-progress)*-35px);
  }
  .motion-ready:not(.motion-reduced) .hero-scene .scene-caption {
    opacity:calc(1 - var(--hero-progress));
  }
  .motion-ready:not(.motion-reduced) .frame-thread {
    transform:scaleY(var(--hero-progress));
  }
}
.brand-wordmark>span:first-child {
  display:block;
}
@media(prefers-reduced-motion:no-preference) {
  body:not(.motion-reduced):not(.intro-complete) .frame-piece img {
    animation:frame-unmask 1.2s .15s var(--ease) backwards;
  }
}
/* Keyboard focus must always expose a project even mid-transition. */
.hero:has(.frame-piece:focus-visible) {
  --hero-progress:0!important;
}