/* Scroll scenes for motion.js. Every rule needs html.motion, which motion.js adds only when GSAP
   loaded and motion is allowed: with JS off or prefers-reduced-motion the page is the finished frame. */
.motion{--travel:240px}
@media (min-width:1080px){.motion{--travel:320px}}

/* hero: a 190lvh scene, the hero sticks for 90lvh; lvh so the iOS address bar never opens a gap */
.motion .scene-hero{height:190lvh;background:var(--navy-900)}
.motion .hero{position:sticky;top:0;min-height:100lvh}
.motion .hero__content{padding-bottom:calc(max(28px,env(safe-area-inset-bottom)) + 100lvh - 100svh)}
.motion .hero__media,.motion .hero__card{will-change:transform}

/* photos taller than their frames; motion.js reads the extra height and moves them through it */
.motion .proof__bg img,.motion .b2b__media img{height:calc(100% + var(--travel) * 1.5);max-height:none;will-change:transform}
.motion .story__media img{height:calc(100% + var(--travel));max-height:none;will-change:transform}
.motion .product__media img{height:calc(100% + var(--travel) / 2);max-height:none;will-change:transform}

/* crew: a cover in the section colour hides the dashed line and shrinks away (--hide 1 -> 0) */
.motion .member{z-index:1}
.motion .crew__list::after{content:"";position:absolute;z-index:0;left:calc(var(--gutter) + 52px);top:58px;bottom:58px;width:7px;background:var(--beige-soft);transform-origin:50% 100%;transform:scaleY(var(--hide,0))}
@media (min-width:1080px){
  .motion .crew__list::after{left:calc(var(--gutter) + 88px);right:calc(var(--gutter) + (100% - 2 * var(--gutter) - 2 * var(--s6)) / 3 - 92px);top:87px;bottom:auto;width:auto;height:7px;transform-origin:100% 50%;transform:scaleX(var(--hide,0))}
}