/* DRCE motion language: depth, typographic ink and a stage curtain.
   Server-rendered content remains fully visible without the controller. */
.motion-line{display:block;overflow:clip;padding-bottom:.12em;margin-bottom:-.12em}
.motion-line>span{display:block}
.motion-photo{position:relative;overflow:hidden;isolation:isolate}
.studio-film{--photo-curtain:#171815}
.event-archive-spread .motion-photo{--photo-curtain:#171815}

/* Move the photographs and the two lines independently; the CTA stays still. */
.scroll-motion [data-motion="hero"] .hero-scene img,
.scroll-motion [data-motion="hero"] .hero-second-scene img{animation:none;will-change:transform}
.scroll-motion [data-motion="hero"] .hero-scene img{
  transform:translate3d(0,calc(var(--exit-progress,0)*70px),0) scale(calc(1.04 + var(--exit-progress,0)*.16));
}
.scroll-motion [data-motion="hero"] .hero-second-scene img{
  transform:translate3d(0,calc(var(--exit-progress,0)*-40px),0) scale(calc(1.04 + var(--exit-progress,0)*.1));
}
.scroll-motion [data-motion="hero"] .hero-line{
  animation:none;
  transform:translate3d(calc(var(--exit-progress,0)*-65px),calc(var(--exit-progress,0)*28px),0);
  opacity:calc(1 - var(--exit-progress,0)*.55);
}
.scroll-motion [data-motion="hero"] .hero-line-last{
  transform:translate3d(calc(var(--exit-progress,0)*75px),calc(var(--exit-progress,0)*-16px),0);
}

/* The outline becomes solid ink as the statement crosses the viewport. */
.scroll-motion .motion-ink{
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;
  background-size:calc(clamp(0,(var(--scroll-progress,.55) - .15)*2.85,1)*100%) 100%;
  background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.scroll-motion .motion-heading .motion-line>span{
  transform:translate3d(0,calc((1 - var(--enter-progress,1))*100%),0);
}
.scroll-motion .motion-heading .motion-line:nth-child(2)>span{
  transform:translate3d(0,calc((1 - var(--enter-progress,1))*126%),0);
}

/* An opaque curtain retracts over the same photograph; it is never a new image. */
.scroll-motion .motion-photo::after{
  content:"";position:absolute;inset:-1px;z-index:1;
  background:var(--photo-curtain,var(--paper));pointer-events:none;
  transform-origin:right center;
  transform:scaleX(calc((1 - var(--enter-progress,1))*.94));
}
.scroll-motion .motion-photo[data-motion-direction="reverse"]::after{transform-origin:left center}
.scroll-motion .motion-photo>img{
  transition:none;
  transform:scale(calc(1.1 - var(--enter-progress,1)*.1));
}
.scroll-motion [data-motion="panorama"]>img{
  transform:scale(calc(1.14 - var(--enter-progress,1)*.14));
}
.scroll-motion .motion-photo:focus-visible::after{transform:scaleX(0)}
.scroll-motion .motion-photo:focus-visible>img{transform:none}
.scroll-motion .motion-heading:focus-within .motion-line>span{transform:none}
.scroll-motion .contact-link:focus-visible .motion-line>span{transform:none}

/* Secondary copy arrives once, without competing with the main gestures. */
.scroll-motion .reveal{opacity:0;transform:translate3d(0,22px,0);transition:opacity .65s ease,transform .8s cubic-bezier(.2,.75,.25,1)}
.scroll-motion .reveal.visible{opacity:1;transform:none}

@media(max-width:700px){
  .scroll-motion [data-motion="hero"] .hero-scene img{transform:translate3d(0,calc(var(--exit-progress,0)*24px),0) scale(calc(1.03 + var(--exit-progress,0)*.08))}
  .scroll-motion [data-motion="hero"] .hero-line{transform:translate3d(calc(var(--exit-progress,0)*-22px),0,0)}
  .scroll-motion [data-motion="hero"] .hero-line-last{transform:translate3d(calc(var(--exit-progress,0)*28px),0,0)}
  .scroll-motion .motion-photo>img{transform:scale(calc(1.05 - var(--enter-progress,1)*.05))}
  .scroll-motion .motion-photo::after{transform:scaleX(calc((1 - var(--enter-progress,1))*.8))}
}

/* CSS also honors the preference immediately, before any JS change callback. */
@media(prefers-reduced-motion:reduce){
  .hero-scene img,.hero-second-scene img,.hero-line,
  .motion-photo>img,.motion-photo:hover>img,.motion-line>span,.reveal{
    animation:none!important;transition:none!important;transform:none!important;opacity:1!important;will-change:auto!important;
  }
  .motion-photo::after{display:none!important}
  .motion-ink{background-size:100% 100%!important}
}