/* Five visual layers, explicitly requested component separation, native scroll timeline. Masks are fixed, only transform and opacity animate. */
.exploded-stack{position:relative;height:44svh;max-height:450px;aspect-ratio:2/3;max-width:100%;margin:auto}
.exploded-stack img{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-height:none!important}
.exploded-stack svg{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;clip-path:none!important;overflow:visible}
/* Blend each complete part directly with the scene. Blending the enclosing group
   lets one part's white source background cover its neighbours during expansion. */
.product-story .product-images{mix-blend-mode:normal!important}
.product-story .device-render,.exploded-stack>svg{mix-blend-mode:multiply}
/* Clip the nested SVG image, never the responsive outer viewport: object-fit letterboxing
   must not change the relationship between the source image and component outline. */
.shell-layer{clip-path:polygon(0 0,100% 0,100% 40%,60% 37%,34% 31%,23% 28%,0 27%)}
.board-layer{clip-path:polygon(0 27%,23% 28%,34% 31%,60% 37%,100% 40%,100% 68%,75% 65%,32% 58%,20% 56%,0 54%)}
.safety-layer{clip-path:polygon(0 54%,20% 56%,32% 58%,75% 65%,100% 68%,100% 80%,66% 77%,32% 72%,20% 70%,0 68%)}
.battery-layer{clip-path:polygon(0 68%,20% 70%,32% 72%,66% 77%,100% 80%,100% 100%,0 100%)}
@keyframes continuous-device{0%,8%{opacity:1;transform:translate3d(0,3vh,0) scale(1.02)}34%{opacity:0;transform:translate3d(0,-5vh,0) scale(.99)}100%{opacity:0;transform:translate3d(0,-5vh,0) scale(.99)}}
@keyframes continuous-shell{0%,13%{opacity:0;transform:translate3d(0,10vh,0)}36%{opacity:1;transform:translate3d(0,6vh,0)}100%{opacity:1;transform:translate3d(0,-3vh,0)}}
@keyframes continuous-board{0%,16%{opacity:0;transform:translate3d(0,4vh,0)}34%{opacity:1;transform:translate3d(0,2vh,0)}100%{opacity:1;transform:translate3d(0,-1vh,0)}}
@keyframes continuous-safety{0%,20%{opacity:0;transform:translate3d(0,-5vh,0)}38%{opacity:1;transform:translate3d(0,-4vh,0)}100%{opacity:1;transform:translate3d(0,2vh,0)}}
@keyframes continuous-battery{0%,24%{opacity:0;transform:translate3d(0,-10vh,0)}42%{opacity:1;transform:translate3d(0,-8vh,0)}100%{opacity:1;transform:translate3d(0,3vh,0)}}
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]):not([data-static=true]) .exploded-stack{position:relative;height:100%;max-height:none;margin:auto}
  html:not([data-motion=off]):not([data-static=true]) .device-render{animation:continuous-device 1ms cubic-bezier(.37,0,.63,1) both;animation-timeline:--product;animation-range:contain}
  html:not([data-motion=off]):not([data-static=true]) .shell-layer{animation:continuous-shell 1ms cubic-bezier(.37,0,.63,1) both;animation-timeline:--product;animation-range:contain}
  html:not([data-motion=off]):not([data-static=true]) .board-layer{animation:continuous-board 1ms cubic-bezier(.37,0,.63,1) both;animation-timeline:--product;animation-range:contain}
  html:not([data-motion=off]):not([data-static=true]) .safety-layer{animation:continuous-safety 1ms cubic-bezier(.37,0,.63,1) both;animation-timeline:--product;animation-range:contain}
  html:not([data-motion=off]):not([data-static=true]) .battery-layer{animation:continuous-battery 1ms cubic-bezier(.37,0,.63,1) both;animation-timeline:--product;animation-range:contain}
 }
}
@media(max-width:760px){
 .exploded-stack{height:auto;width:100%;max-height:none}
 @keyframes continuous-device{0%,8%{opacity:1;transform:translate3d(0,2vh,0) scale(1.02)}34%,100%{opacity:0;transform:translate3d(0,-2vh,0) scale(.99)}}
 @keyframes continuous-shell{0%,13%{opacity:0;transform:translate3d(0,4vh,0)}36%{opacity:1;transform:translate3d(0,3vh,0)}100%{opacity:1;transform:translate3d(0,-2vh,0)}}
 @keyframes continuous-board{0%,16%{opacity:0;transform:translate3d(0,2vh,0)}34%{opacity:1;transform:translate3d(0,1vh,0)}100%{opacity:1;transform:translate3d(0,-.5vh,0)}}
 @keyframes continuous-safety{0%,20%{opacity:0;transform:translate3d(0,-2vh,0)}38%{opacity:1;transform:translate3d(0,-1.5vh,0)}100%{opacity:1;transform:translate3d(0,1vh,0)}}
 @keyframes continuous-battery{0%,24%{opacity:0;transform:translate3d(0,-4vh,0)}42%{opacity:1;transform:translate3d(0,-3vh,0)}100%{opacity:1;transform:translate3d(0,2vh,0)}}
 @supports(animation-timeline:view()){@media(prefers-reduced-motion:no-preference){html:not([data-motion=off]):not([data-static=true]) .exploded-stack{width:auto;max-width:100%}}}
}