/* Scroll position controls the entrance, including when scrolling back up. */
.js .reveal:not(.scroll-reveal){opacity:1;transform:none}
.scroll-motion .scroll-reveal{
  --enter:1;
  --enter-distance:38px;
  opacity:var(--enter);
  transform:translate3d(0,calc((1 - var(--enter)) * var(--enter-distance)),0);
  filter:blur(calc((1 - var(--enter)) * 2px));
  transition:none;
}
.scroll-motion .scroll-box{
  --enter-distance:86px;
  transform:translate3d(0,calc((1 - var(--enter)) * var(--enter-distance)),0) scale(calc(.95 + var(--enter) * .05));
  transform-origin:50% 0;
  filter:blur(calc((1 - var(--enter)) * 3px));
}
.scroll-motion .scroll-row{--enter-distance:46px}
.scroll-motion .scroll-visual{
  --enter-distance:65px;
  transform:translate3d(0,calc((1 - var(--enter)) * var(--enter-distance)),0) scale(calc(.94 + var(--enter) * .06));
}
.scroll-motion .scroll-stack-text{--enter-distance:32px}
.scroll-motion .scroll-in-view{will-change:transform,opacity}
.scroll-motion .scroll-heading{opacity:1;transform:none;filter:none;will-change:auto}
.motion-line{display:inline-block;max-width:100%;vertical-align:top}
.scroll-motion .motion-line{
  --line-progress:clamp(0,(var(--enter) - var(--line-order) * .14) / (1 - var(--line-order) * .14),1);
  opacity:var(--line-progress);
  transform:translate3d(0,calc((1 - var(--line-progress)) * 46px),0);
  filter:blur(calc((1 - var(--line-progress)) * 3px));
}
.scroll-motion .intro-paragraph{
  color:rgb(var(--read-light,235) calc(var(--read-light,235) + 2) calc(var(--read-light,235) + 6));
  transform:translate3d(0,var(--read-shift,0px),0);
  transition:color .12s linear;
}
.scroll-motion .stack-card-inner{
  transform:translateY(var(--card-depth,0px)) scale(var(--card-scale,1));
  filter:brightness(var(--card-light,1));
}
.stack-card.stack-static{position:relative;top:auto}
.scroll-motion .hero-copy{
  opacity:var(--hero-copy-fade,1);
  transform:translateY(calc(var(--hero-scroll) * 62px));
}
.scroll-motion .hero-copy:focus-within{opacity:1}
.scroll-motion .hero-product{
  transform:translateX(-50%) translateY(calc(var(--hero-scroll) * -145px)) scale(calc(1 + var(--hero-scroll) * .065));
}
.scroll-motion .hills-back{transform:translateY(calc(var(--hero-scroll) * -78px))}
.scroll-motion .hills-mid{transform:translateY(calc(var(--hero-scroll) * -36px))}
.scroll-motion .hills-front{transform:translateY(calc(var(--hero-scroll) * 55px)) scale(1.025)}
.scroll-motion .contact-product.scroll-reveal{
  transform:translate3d(var(--contact-slide,0px),calc((1 - var(--enter)) * 55px),0) scale(calc(.96 + var(--enter) * .04));
  transform-origin:20% 50%;
}
.scroll-motion .contact-dunes{transform:translateY(var(--dunes-shift,0px)) scale(1.04);transform-origin:bottom}
.scroll-motion .scroll-reveal:focus-within{opacity:1;transform:none;filter:none}
.scroll-motion .scroll-reveal:focus-within .motion-line{opacity:1;transform:none;filter:none}
@media(max-width:600px){
  .scroll-motion .scroll-reveal{--enter-distance:25px}
  .scroll-motion .scroll-box{--enter-distance:48px}
  .scroll-motion .scroll-visual{--enter-distance:36px}
  .scroll-motion .hero-product{transform:translateX(-50%) translateY(calc(var(--hero-scroll) * -84px)) scale(calc(1 + var(--hero-scroll) * .035))}
  .scroll-motion .hills-front{transform:translateY(calc(var(--hero-scroll) * 28px)) scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
  .scroll-motion .scroll-reveal,.scroll-motion .motion-line,.scroll-motion .hero-copy,.scroll-motion .intro-paragraph{
    opacity:1!important;transform:none!important;filter:none!important;will-change:auto!important;
  }
  .scroll-motion .intro-paragraph{color:#ebeaf1!important}
  .scroll-motion .hero-product{transform:translateX(-50%)!important}
  .scroll-motion .landscape,.scroll-motion .contact-dunes{transform:none!important}
  .scroll-motion .stack-card-inner{transform:none!important;filter:none!important}
}
@media print{
  .scroll-motion .scroll-reveal,.scroll-motion .motion-line,.scroll-motion .hero-copy{opacity:1!important;transform:none!important;filter:none!important}
  .scroll-motion .intro-paragraph{color:inherit!important}
}
