/* Motion layer: explicit user enablement overrides the system's initial preference. */
.hero-media{position:absolute;inset:0;transform:translateY(var(--hero-shift,0px));will-change:transform}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:opacity 1.15s ease,visibility 1.15s;overflow:hidden}
.hero-scene.active{opacity:1;visibility:visible}
.hero-scene img,.hero-scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center}
.hero-scene img{transform:scale(1.13);transition:transform 10s linear}
.motion-enabled .hero-scene.active img{transform:scale(1)}
.hero-scene video{object-position:60% center}
.cinema:after{background:linear-gradient(90deg,rgba(7,13,14,.96),rgba(7,13,14,.55) 43%,rgba(7,13,14,.08) 73%),linear-gradient(0deg,rgba(7,13,14,.95),transparent 50%)}
.slide-controls button{position:relative;overflow:hidden;padding-bottom:15px}
.slide-controls button:after{content:'';position:absolute;bottom:0;left:0;height:3px;background:white;width:0}
.slide-controls button[aria-pressed=true]:after{width:var(--scene-progress,0%)}
.cinema-caption small{display:block;font-size:9px;color:#e5ece8;letter-spacing:.12em;margin-top:6px}
.cinema-caption small:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#fb7347;margin-right:7px}
.scene-play{position:absolute;right:5vw;top:30px;z-index:3;background:#101819bb;color:white;border:1px solid #ffffff66;padding:12px 16px;font-size:11px}
.motion-enabled .cinema-copy{animation:copy-in .9s both}
.js .reveal{transform:translateY(42px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.8,.2,1)}
.js .reveal.visible{opacity:1;transform:none}
.motion-off .reveal{opacity:1;transform:none}
.motion-off .hero-media{transform:none}
.motion-off .hero-scene img{transform:none}
.motion-off .hero-scene,.motion-off .hero-scene img{transition:none}
@media(hover:hover) and (pointer:fine){
 .motion-enabled .product-tile{transition:transform .35s,box-shadow .35s}
 .motion-enabled .product-tile:hover{transform:translateY(-8px);box-shadow:0 15px 24px -22px #263b35}
 .motion-enabled .tile-image:hover img,.motion-enabled .series:hover img{transform:scale(1.075)}
 .tile-link span{transition:transform .35s}
 .motion-enabled .product-tile:hover .tile-link span{transform:translate(4px,-4px)}
 .tile-image:after{content:'EXPLORE MODEL ↗';position:absolute;bottom:16px;right:16px;background:#f7f6f1;color:#162220;font-size:10px;padding:11px 15px;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
 .product-tile:hover .tile-image:after,.product-tile:focus-within .tile-image:after{opacity:1;transform:none}
}
@keyframes copy-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(max-width:700px){.cinema{height:790px}.hero-scene img,.hero-scene video{object-position:66% center}.slide-controls{flex-wrap:wrap}.slide-controls button{font-size:9px;padding:12px 10px}.cinema-caption{max-width:310px}.cinema-bottom{gap:12px}.scene-play{top:16px}}
@media(prefers-reduced-motion:reduce){
 .motion-enabled .hero-scene{transition:opacity 1.15s ease,visibility 1.15s!important}
 .motion-enabled .hero-scene img{transition:transform 10s linear!important}
 .motion-enabled .reveal{transition:opacity .85s,transform .85s!important}
 .motion-enabled .cinema-copy{animation:copy-in .9s both!important}
}
