/* Scroll choreography: one spatial language, with native browser scrolling.
   All transforms are optional enhancements to visible, accessible HTML. */
body[data-motion="active"] .depth-visible .scroll-depth{will-change:transform}

body[data-motion="active"] .depth-stage[data-renderer="webgl"] .object-float{
  transform:translate3d(0,var(--float-y,0px),50px) rotateY(var(--hero-turn,0deg)) rotateZ(-1deg);
}
body[data-motion="active"] .depth-stage[data-renderer="webgl"] .opening-card{
  transform:translate3d(0,var(--hero-card-y,0px),100px) rotateZ(var(--hero-card-turn,-4deg));
}
body[data-motion="active"] .depth-stage[data-renderer="webgl"] .scene-type{
  transform:translate3d(0,var(--hero-type-y,0px),-35px);
}

body[data-motion="active"] .brand-relief{
  transform:translate3d(0,var(--scene-y,0px),0) rotateX(calc(24deg + var(--scene-x,0deg))) rotateY(calc(-19deg + var(--scene-turn,0deg))) rotateZ(calc(-16deg + var(--scene-roll,0deg)));
  transition:transform .16s ease-out;
}

body[data-motion="active"] .products-art-stage>img{
  transform:translate3d(0,var(--scene-y,0px),22px) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-turn,0deg)) rotateZ(var(--scene-roll,0deg)) scale(.97);
  transition:transform .16s ease-out;
}
body[data-motion="active"] .products-art-stage:before{
  transform:translateY(var(--back-y,0px)) rotateY(calc(15deg - var(--scene-turn,0deg))) rotateZ(calc(-6deg - var(--scene-roll,0deg)));
  transition:transform .16s ease-out;
}
body[data-motion="active"] .products-art-stage:after{
  transform:translateY(var(--base-y,0px)) rotateX(64deg) rotateZ(var(--scene-roll,0deg));
  transition:transform .16s ease-out;
}

body[data-motion="active"] .about-audiences article,
body[data-motion="active"] .category-item,
body[data-motion="active"] .social-card{
  transform:perspective(1100px) translate3d(0,var(--reveal-y,0px),var(--reveal-z,0px)) rotateX(calc(var(--tilt-x,0deg) + var(--reveal-x,0deg))) rotateY(calc(var(--tilt-y,0deg) + var(--reveal-turn,0deg)));
  transform-origin:center center;
  transition:transform .18s ease-out,border-color .2s,box-shadow .2s;
  backface-visibility:hidden;
}

body[data-motion="active"] .opening-poster,
body[data-motion="active"] .opening-poster:hover{
  transform:perspective(1100px) translate3d(0,var(--scene-y,0px),0) rotateX(calc(3deg + var(--tilt-x,0deg) + var(--scene-x,0deg))) rotateY(calc(6deg + var(--tilt-y,0deg) + var(--scene-turn,0deg))) rotateZ(calc(-3deg + var(--scene-roll,0deg)));
  transition:transform .18s ease-out;
}
body[data-motion="active"] .opening-poster-space:before{
  transform:rotate(calc(-8deg + var(--poster-back-turn,0deg)));
  transition:transform .18s ease-out;
}

@media(min-width:1101px){
  /* The illustration accompanies the existing product cards for a short stretch;
     no pinned full-screen sequence or artificial scroll distance. */
  .products-layout{align-items:start}
  .products-visual{position:sticky;top:56px;align-self:start}
  .category-item{padding-block:33px;margin-bottom:20px;min-height:158px}
  .category-item:last-child{margin-bottom:0}
}
@media(max-width:760px){
  body[data-motion="active"] .depth-stage[data-renderer="webgl"] .opening-card{
    transform:translate3d(0,var(--hero-card-y,0px),65px) rotateZ(var(--hero-card-turn,-4deg));
  }
  body[data-motion="active"] .products-art-stage>img{transform:translate3d(0,var(--scene-y,0px),0) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-turn,0deg)) rotateZ(var(--scene-roll,0deg)) scale(.985)}
  body[data-motion="active"] .opening-poster,
  body[data-motion="active"] .opening-poster:hover{
    transform:perspective(1100px) translateY(var(--scene-y,0px)) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-turn,0deg)) rotateZ(calc(-2.5deg + var(--scene-roll,0deg)));
  }
}
@media(prefers-reduced-motion:reduce){
  .scroll-depth{will-change:auto!important;transition:none!important}
  .products-visual{position:static}
}
body[data-motion="paused"] .scroll-depth,body[data-motion="reduced"] .scroll-depth{will-change:auto}
body[data-motion="paused"] .products-visual,body[data-motion="reduced"] .products-visual{position:static}