/* Scroll positions drive transforms only; the document keeps its natural layout. */
body{overflow-x:clip}
.scroll-motion main{overflow-x:clip}
.scroll-scene{position:relative}
.js.scroll-motion .reveal{transition:none}
.js.scroll-motion .motion-node{
  --pair-x:0px;--pair-y:0px;--pair-rotate:0deg;--pair-tilt:0deg;--pair-scale:1;--pair-alpha:1;
  --item-x:0px;--item-y:0px;--item-rotate:0deg;--item-scale:1;--item-alpha:1;--item-blur:0px;
  position:relative;
  opacity:calc(var(--pair-alpha) * var(--item-alpha));
  transform:translate3d(calc(var(--pair-x) + var(--item-x)),calc(var(--pair-y) + var(--item-y)),0) rotate(calc(var(--pair-rotate) + var(--item-rotate))) rotateY(var(--pair-tilt)) scale(calc(var(--pair-scale) * var(--item-scale)));
  filter:blur(var(--item-blur));
  transform-origin:50% 50%;
  transition:none;
}
.scroll-scene.is-in-view .motion-node{will-change:transform,opacity}
.motion-word{display:inline-block;transform:translate3d(calc(var(--word-dx,0px) * var(--scatter,0)),calc(var(--word-dy,0px) * var(--scatter,0)),0) rotate(calc(var(--word-tilt,0deg) * var(--scatter,0)));opacity:calc(1 - var(--scatter-out,0) * var(--word-loss,.35));transform-origin:50% 70%}
.scroll-scene.is-in-view .motion-word{will-change:transform,opacity}
.scroll-motion .hero-image-frame{opacity:var(--frame-alpha,1)}
.scroll-motion .interlude-track>span{transform:translate3d(var(--shift,0px),var(--interlude-y,0px),0) scale(var(--interlude-scale,1));opacity:var(--interlude-alpha,1)}
.js.scroll-motion .motion-node:focus-within{opacity:1!important;filter:none!important}
@media(prefers-reduced-motion:reduce){
  .js.scroll-motion .motion-node,.js.scroll-motion .motion-word,.scroll-motion .hero-image-frame,.scroll-motion .hero-image-frame>img,.scroll-motion .sculpture,.scroll-motion .interlude-track>span{transform:none!important;opacity:1!important;filter:none!important;will-change:auto!important}
}