/* Top-page motion: the composition and all lower pages keep their own layout. */
.home-page .hero-title,
.home-page .hero-vertical{animation:none}
.home-page .hero-scenes{inset:-3% 0 -9%;transform:translate3d(0,var(--hero-depth,0px),0)}
.home-page .hero-title{translate:0 var(--title-depth,0px)}
.home-page .hero-scene.is-active img{animation:none}
.home-page .world-break>img{transform:scale(1.18);translate:0 var(--world-depth,0px)}
.home-page .studio-small{translate:0 var(--studio-depth,0px);overflow:hidden}
.home-page .scene-pause{position:relative}
.home-page .scene-pause:disabled{opacity:.55;cursor:default}
.home-page .scene-pause::after{content:"";position:absolute;inset:-5px;border:1px solid transparent;border-radius:50%;transition:border-color .4s}
.home-page .scene-pause:hover::after{border-color:#ffffff70}

@media(prefers-reduced-motion:no-preference){
  .home-page.home-motion-ready .hero-scene.is-active img{animation:home-scene-drift 12s cubic-bezier(.15,.35,.35,1) both}
  .home-page.home-motion-ready .hero-scenes.is-paused img{animation-play-state:paused}
  .home-page.home-motion-ready .hero-title h1{animation:home-title-in 1.8s .16s both}
  .home-page.home-motion-ready .hero-eyebrow{animation:home-soft-in 1.35s .04s both}
  .home-page.home-motion-ready .hero-subtitle{animation:home-soft-in 1.5s .55s both}
  .home-page.home-motion-ready .hero-vertical{animation:home-copy-in 1.9s .62s both}
  .home-page.home-motion-ready .hero-message{animation:home-soft-in 1.65s .95s both}
  .home-page.home-motion-ready .scene-control{animation:home-soft-in 1.3s 1.1s both}

  .motion-ready .home-page .reveal{
    transform:translateY(30px);
    transition:opacity 1.35s ease,transform 1.5s cubic-bezier(.2,.65,.25,1);
    transition-delay:var(--enter-delay,0s);
  }
  .motion-ready .home-page .reveal.is-visible{transform:none}
  .motion-ready .home-page .section-marker{--enter-delay:0s}
  .motion-ready .home-page .section-marker+.serif-heading{--enter-delay:.12s}
  .motion-ready .home-page .intro-lead,
  .motion-ready .home-page .section-note{--enter-delay:.2s}
  .motion-ready .home-page .work-pair .small-work:nth-child(2){--enter-delay:.14s}
  .motion-ready .home-page .studio-copy{--enter-delay:.16s}
  .motion-ready .home-page .featured-work .work-visual,
  .motion-ready .home-page .studio-images .studio-large,
  .motion-ready .home-page .studio-images .studio-small{
    clip-path:inset(0 0 0 0);
    transition:clip-path 1.7s cubic-bezier(.2,.65,.25,1);
  }
  .motion-ready .home-page .featured-work:not(.is-visible) .work-visual,
  .motion-ready .home-page .studio-images:not(.is-visible) .studio-large,
  .motion-ready .home-page .studio-images:not(.is-visible) .studio-small{clip-path:inset(0 0 15% 0)}
  .motion-ready .home-page .studio-images .studio-small{transition-delay:.2s}

  .motion-ready .home-page .intro-copy p,
  .motion-ready .home-page .services-grid .service-item{
    opacity:0;transform:translateY(16px);
    transition:opacity 1.15s ease,transform 1.35s cubic-bezier(.2,.65,.25,1);
    transition-delay:var(--item-delay,0s);
  }
  .motion-ready .home-page .intro-copy.is-visible p,
  .motion-ready .home-page .services-grid.is-visible .service-item{opacity:1;transform:none}
  .home-page .intro-copy p:nth-child(2){--item-delay:.18s}
  .home-page .intro-copy p:nth-child(3){--item-delay:.36s}
  .home-page .service-item:nth-child(2){--item-delay:.14s}
  .home-page .service-item:nth-child(3){--item-delay:.28s}
  .home-page .services-column:nth-child(2) .service-item:nth-child(1){--item-delay:.12s}
  .home-page .services-column:nth-child(2) .service-item:nth-child(2){--item-delay:.26s}
  .home-page .services-column:nth-child(2) .service-item:nth-child(3){--item-delay:.4s}

  .home-page.home-motion-ready .world-break>img{
    animation:home-landscape-drift 28s linear infinite alternate;
    animation-play-state:paused;
  }
  .home-page.home-motion-ready .world-break.is-in-view>img{animation-play-state:running}
  .home-page.home-motion-ready.home-motion-paused .world-break>img,
  .home-page.home-motion-paused .hero-scene.is-active img,
  .home-page.home-motion-ready.is-page-hidden .world-break>img,
  .home-page.home-motion-ready.modal-open .world-break>img{animation-play-state:paused}
  .home-page.home-motion-paused .hero-title h1,
  .home-page.home-motion-paused .hero-eyebrow,
  .home-page.home-motion-paused .hero-subtitle,
  .home-page.home-motion-paused .hero-vertical,
  .home-page.home-motion-paused .hero-message,
  .home-page.home-motion-paused .scene-control{animation:none}
  .home-page.home-motion-ready.home-intro-complete .hero-title h1,
  .home-page.home-motion-ready.home-intro-complete .hero-eyebrow,
  .home-page.home-motion-ready.home-intro-complete .hero-subtitle,
  .home-page.home-motion-ready.home-intro-complete .hero-vertical,
  .home-page.home-motion-ready.home-intro-complete .hero-message,
  .home-page.home-motion-ready.home-intro-complete .scene-control{animation:none}
  .motion-ready .home-page.home-motion-paused .reveal,
  .motion-ready .home-page.home-motion-paused .intro-copy p,
  .motion-ready .home-page.home-motion-paused .services-grid .service-item{opacity:1;transform:none;transition:none}
  .motion-ready .home-page.home-motion-paused .featured-work .work-visual,
  .motion-ready .home-page.home-motion-paused .studio-images .studio-large,
  .motion-ready .home-page.home-motion-paused .studio-images .studio-small{clip-path:none;transition:none}
  .home-page.home-motion-paused .scroll-cue i::before{animation:none;top:0}
}

@keyframes home-title-in{
  from{opacity:0;translate:0 25px;filter:blur(5px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}
@keyframes home-soft-in{
  from{opacity:0;translate:0 16px}
  to{opacity:1;translate:0 0}
}
@keyframes home-copy-in{
  from{opacity:0;translate:0 -16px;filter:blur(2px)}
  to{opacity:1;translate:0 0;filter:blur(0)}
}
@keyframes home-scene-drift{
  from{transform:scale(1.095) translate3d(-.65%,0,0)}
  to{transform:scale(1.025) translate3d(.35%,0,0)}
}
@keyframes home-landscape-drift{
  from{transform:scale(1.18) translate3d(-1.8%,0,0)}
  to{transform:scale(1.18) translate3d(1.8%,0,0)}
}
@media(max-width:780px){
  .home-page .hero-scenes{inset:-2% 0 -6%}
  .motion-ready .home-page .reveal{transform:translateY(20px)}
  .motion-ready .home-page .reveal.is-visible{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .home-page .hero-scenes{inset:0;transform:none}
  .home-page .hero-title,.home-page .world-break>img,.home-page .studio-small{translate:none}
  .home-page .world-break>img{transform:none}
  .motion-ready .home-page .reveal{opacity:1;transform:none}
}
