/* Editable image layers in a CSS 3D scene. Original product pixels are unchanged. */
:root{--hero-depth-strength:1}
html[data-hero-depth="subtle"]{--hero-depth-strength:.45}
.stadium-products{
 --depth-scale:var(--hero-depth-strength);--angle-scale:var(--hero-depth-strength);
 perspective:1100px;perspective-origin:50% 48%;
 transform-style:preserve-3d;isolation:auto;
}
.hero-depth-scene{
 position:absolute;inset:0;transform-style:preserve-3d;
 transform:rotateX(calc(-3deg + var(--tilt-x,0deg))) rotateY(calc(6deg + var(--tilt-y,0deg)));
 transform-origin:50% 48%;transition:transform .55s cubic-bezier(.2,.65,.3,1);
}
.stadium-products.is-pointing .hero-depth-scene{transition-duration:.16s}
.stadium-product{filter:none;transform-style:preserve-3d;transition:transform .5s}
.stadium-product.main{
 width:70%;max-width:540px;left:max(15%,calc(50% - 270px));top:2%;z-index:3;
 transform:translateZ(calc(110px * var(--depth-scale))) rotateX(3deg) rotateY(calc(-17deg * var(--angle-scale))) rotateZ(-3deg);
}
.stadium-product.left{
 width:57%;max-width:430px;left:-1%;top:21%;z-index:2;
 transform:translateZ(calc(-65px * var(--depth-scale))) rotateY(calc(26deg * var(--angle-scale))) rotateZ(-11deg);
}
.stadium-product.right{
 width:53%;max-width:410px;right:-1%;top:28%;z-index:1;
 transform:translateZ(calc(-135px * var(--depth-scale))) rotateY(calc(-28deg * var(--angle-scale))) rotateZ(8deg);
}
.stadium-products:hover .stadium-product.main{
 transform:translateZ(calc(110px * var(--depth-scale))) rotateX(3deg) rotateY(calc(-17deg * var(--angle-scale))) rotateZ(-3deg);
}
.depth-float{position:relative;width:100%;height:100%;aspect-ratio:1;transform-style:preserve-3d}
.depth-float>img{display:block;filter:drop-shadow(11px 28px 15px #00000040) drop-shadow(1px 3px 2px #00000012);user-select:none;-webkit-user-drag:none}
.stadium-slide.is-active .depth-float{animation:makma-product-float 6s ease-in-out infinite both}
.stadium-product.main .depth-float{--float-lift:-9px;--float-roll:1.1deg;animation-delay:-1.1s}
.stadium-product.left .depth-float{--float-lift:-5px;--float-roll:-1.4deg;animation-duration:7s;animation-delay:-2.6s}
.stadium-product.right .depth-float{--float-lift:7px;--float-roll:1deg;animation-duration:7.8s;animation-delay:-4s}
.hero-is-paused .depth-float,.hero-out-of-view .depth-float,.hero-document-hidden .depth-float{animation-play-state:paused!important}
html[data-hero-motion="still"] .depth-float{animation:none!important}
.depth-hint{position:absolute;right:2%;bottom:-5px;padding:6px 10px;border:1px solid #ffffff9c;border-radius:20px;background:#ffffffde;color:var(--ink);font:700 8px/1.4 var(--body);letter-spacing:.03em;pointer-events:none}
.capture .depth-float{animation:none!important}
.capture .hero-depth-scene{transition:none}
.hero-depth-settings{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:22px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.hero-depth-settings h3,.hero-depth-settings>p{grid-column:1/-1}
.hero-depth-settings h3{font-size:20px}
.hero-depth-settings>p{margin:-10px 0 0}

@keyframes makma-product-float{
 0%,100%{transform:translate3d(0,0,0) rotateZ(0deg)}
 50%{transform:translate3d(0,var(--float-lift,-7px),0) rotateZ(var(--float-roll,1deg))}
}

@media(min-width:1600px){.stadium-product.main{width:68%;left:max(16%,calc(50% - 270px))}.stadium-product.left{width:54%;left:0}.stadium-product.right{width:50%;right:0}}
@media(min-width:561px) and (max-width:1100px){
 .stadium-products{perspective:1000px;--depth-scale:calc(.75 * var(--hero-depth-strength))}
 .stadium-product.main{width:80%;left:10%;top:5%}.stadium-product.left{width:58%;left:-1%;top:26%}.stadium-product.right{width:52%;right:-1%;top:31%}
 .depth-hint{font-size:7px;bottom:0}
}
@media(min-width:561px) and (max-width:800px){
 .stadium-product.main{width:82%;left:9%;top:8%}.stadium-product.left{width:60%;left:-1%;top:28%}.stadium-product.right{width:53%;right:0;top:33%}
 .depth-hint{display:none}
}
@media(max-width:560px){
 .stadium-products{perspective:850px;perspective-origin:50% 48%;--depth-scale:calc(.48 * var(--hero-depth-strength));--angle-scale:calc(.78 * var(--hero-depth-strength))}
 .hero-depth-scene{transform:rotateX(calc(-2deg + var(--tilt-x,0deg))) rotateY(calc(4deg + var(--tilt-y,0deg)))}
 .stadium-product.main{width:72%;left:14%;top:3%;transform:translateZ(calc(110px * var(--depth-scale))) rotateX(2deg) rotateY(calc(-17deg * var(--angle-scale))) rotateZ(-3deg)}
 .stadium-products:hover .stadium-product.main{transform:translateZ(calc(110px * var(--depth-scale))) rotateX(2deg) rotateY(calc(-17deg * var(--angle-scale))) rotateZ(-3deg)}
 .stadium-product.left{width:53%;left:1%;top:25%}.stadium-product.right{width:48%;right:1%;top:31%}
 .depth-float>img{filter:drop-shadow(4px 16px 9px #00000032)}
 .stadium-product.main .depth-float{--float-lift:-5px;--float-roll:.7deg}
 .stadium-product.left .depth-float{--float-lift:-3px;--float-roll:-.8deg}
 .stadium-product.right .depth-float{--float-lift:4px;--float-roll:.7deg}
 .depth-hint{display:none}
 .hero-depth-settings{grid-template-columns:1fr;gap:12px}
}

html[data-hero-depth="flat"] .stadium-products{perspective:none}
html[data-hero-depth="flat"] .hero-depth-scene{transform:none!important}
html[data-hero-depth="flat"] .stadium-product.main,html[data-hero-depth="flat"] .stadium-products:hover .stadium-product.main{transform:rotate(-2deg)}
html[data-hero-depth="flat"] .stadium-product.left{transform:rotate(-8deg)}
html[data-hero-depth="flat"] .stadium-product.right{transform:rotate(6deg)}
html[data-hero-depth="flat"] .depth-float{animation:none!important}
html[data-hero-depth="flat"] .depth-hint{display:none}

@media(prefers-reduced-motion:reduce){
 .depth-float{animation:none!important}.hero-depth-scene{transform:none!important;transition:none!important}.depth-hint{display:none}
}