.nav-uae-flag{width:36px;height:18px;flex-shrink:0;box-shadow:0 0 0 1px #20201d12}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage-circle:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 25%,#ffe56b,#edba19 65%,#c88908);opacity:0;transition:opacity .8s ease}
.hero-stage[data-selected="engine-0w20"] .stage-circle:after{opacity:1}
.hero-can{position:absolute;top:0;left:22%;width:60%;padding:0;display:block;transform-origin:center;transition:transform .85s cubic-bezier(.22,1,.36,1);will-change:transform;cursor:pointer;touch-action:pan-y}
.hero-can[data-slot="front"]{transform:translate(0,0) rotate(8deg) scale(1);z-index:3}
.hero-can[data-slot="back"]{transform:translate(-43%,12%) rotate(-15deg) scale(.83);z-index:1}
.hero-can[data-slot="side"]{transform:translate(54%,38%) rotate(18deg) scale(.6);z-index:2}
.hero-can .hero-product{position:relative;width:100%;height:auto;max-width:none;animation:can-float 6s ease-in-out infinite;pointer-events:none;filter:drop-shadow(12px 20px 12px #33180e30)}
.hero-can[data-oil="engine-0w20"] .hero-product{animation-delay:-2s}
.hero-can[data-oil="engine-5w40"] .hero-product{animation-delay:-4s}
.hero-can:focus-visible{outline:2px solid var(--ink);outline-offset:8px;border-radius:10px}
.motion-paused .hero-can .hero-product{animation-play-state:paused}
@keyframes can-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:760px){
 .nav-uae-flag{width:32px;height:16px}
 .hero-can{left:22%;width:60%}
 .hero-can[data-slot="side"]{transform:translate(49%,35%) rotate(18deg) scale(.6)}
}
@media(prefers-reduced-motion:reduce){
 .hero-can,.stage-circle:after{transition:none!important}
 .hero-can .hero-product{animation:none!important}
}