/* ALASCOM Website 2026 | product imagery upgrade, brand-controlled premium motion */
:root{--brand-orange:#f57124;--brand-night:#071d2b;--brand-steel:#e8eef2}
.brand img,.footer-brand img{display:block;width:100%;height:auto;object-fit:contain}
.brand{width:184px;max-width:184px}
.footer-brand>a{width:190px;display:block}
/* Product catalog: photographic cut-outs, unique render for each capacity */
.product-image,.catalog-visual{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 57%,#fff 0%,#e7eef3 66%,#dce6ed 100%)}
.product-image:before,.catalog-visual:before{content:"";position:absolute;inset:auto 7% 7% 7%;height:24%;background:radial-gradient(ellipse,rgba(36,70,85,.12),transparent 70%);pointer-events:none}
.product-image .premium-tank-img{display:block;position:relative;width:100%;height:100%;max-height:165px;min-width:0;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(13,38,53,.14));transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s}
.product-card:hover .premium-tank-img,.catalog-item:hover .premium-tank-img{transform:scale(1.07) translateY(-2px);filter:drop-shadow(0 17px 14px rgba(13,38,53,.2))}
.catalog-visual{height:100%;min-height:210px}
.catalog-visual .premium-tank-img{display:block;position:relative;width:100%;height:100%;max-height:320px;object-fit:contain;filter:drop-shadow(0 17px 18px rgba(10,38,52,.16));transition:transform .5s}
.product-image{padding:12px 11px}
/* Cinematic logistics scene featuring actual ALASCOM tractor style */
.route-view-wrap{background:linear-gradient(135deg,#103248,#0c2538)}
.route-model{overflow:hidden;background:radial-gradient(ellipse at 58% 32%,#28607d 0,#133c53 45%,#0b263a 100%)}
.route-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.route-halo{position:absolute;left:50%;top:1%;width:60%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,157,93,.31),rgba(255,145,72,.055) 34%,transparent 66%);border-radius:50%}
.route-horizon{position:absolute;left:0;right:0;top:65%;height:35%;background:linear-gradient(180deg,rgba(7,26,39,.04),rgba(7,22,34,.8));border-top:1px solid rgba(226,242,248,.11)}
.route-track{position:absolute;left:11%;right:11%;bottom:19%;height:9px;border-bottom:2px dashed rgba(236,184,147,.7);opacity:.75}
.route-track:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,132,62,.2),rgba(255,132,62,.0))}
.route-track-fill{position:absolute;top:7px;left:0;height:3px;width:0;background:#f57124;box-shadow:0 0 16px rgba(255,127,48,.7);animation:progressDrive 12s linear infinite}
@keyframes progressDrive{0%{width:0}100%{width:100%}}
.route-truck-premium{position:absolute;z-index:3;bottom:-18%;left:1%;width:91%;height:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 22px 17px rgba(0,0,0,.44));animation:truckDrive 12s linear infinite;pointer-events:none;will-change:transform}
@keyframes truckDrive{0%{transform:translate3d(-9%,0,0) scale(.83)}14%{transform:translate3d(-5%,-1%,0) scale(.88)}55%{transform:translate3d(5%,-2%,0) scale(.94)}100%{transform:translate3d(15%,-1%,0) scale(.98)}}
.route-location{position:absolute;top:19%;width:105px;text-align:center;z-index:1;opacity:.75}
.route-location-start{left:7%}.route-location-end{right:5%}
.route-location b{display:block;margin-top:7px;font-size:8px;letter-spacing:.1em;color:#dceef4}
.route-building{display:block;width:66px;height:37px;margin:auto;background:linear-gradient(#aac3ce,#628092);clip-path:polygon(0 20%,50% 0,100% 20%,100% 100%,0 100%);border-bottom:4px solid #4e6978;position:relative;opacity:.85}
.route-building>span{position:absolute;top:45%;width:10px;height:12px;background:#264658;border:1px solid rgba(255,255,255,.45)}
.route-building>span:nth-child(1){left:11px}.route-building>span:nth-child(2){left:28px}.route-building>span:nth-child(3){left:45px}
.route-factory{clip-path:none;background:linear-gradient(#a4bac5,#507285);border-radius:1px}
.route-factory:before,.route-factory:after{content:"";position:absolute;bottom:35px;width:10px;background:#63899d}.route-factory:before{right:11px;height:28px}.route-factory:after{right:28px;height:20px}
.route-inset{position:absolute;bottom:11%;inset-inline:12%;display:flex;justify-content:space-between;font-size:9px;color:rgba(242,247,249,.5);font-weight:900}
.route-model[aria-label]{outline:0}
.route-view-wrap.is-paused .route-truck-premium,.route-view-wrap.is-paused .route-track-fill{animation-play-state:paused}
/* Product studio with cinematic dimensional motion. This is a 2.5D visual effect, NOT a 360 degree CAD geometry. */
.model3d-host:has(.interactive-render){background:radial-gradient(ellipse at 50% 27%,#36627b 0,#173b51 44%,#0a2639 100%);perspective:1100px;cursor:grab;touch-action:pan-y}
.model3d-host.is-dragging{cursor:grabbing}
.product-glow{position:absolute;top:-25%;left:10%;width:80%;height:96%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.1),rgba(255,130,51,.06) 45%,transparent 73%);pointer-events:none}
.product-floor{position:absolute;left:0;right:0;bottom:0;height:32%;background:linear-gradient(0deg,rgba(6,19,30,.48),transparent),repeating-linear-gradient(0deg,transparent 0px,transparent 36px,rgba(142,202,220,.08) 37px),repeating-linear-gradient(90deg,transparent 0px,transparent 60px,rgba(142,202,220,.07) 61px);mask-image:linear-gradient(0deg,#000 0,transparent 100%);transform:perspective(340px) rotateX(47deg) scale(1.7);transform-origin:bottom}
.stage-product{position:absolute;inset:0;display:block;margin:auto;width:89%;height:91%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 24px 24px rgba(0,0,0,.45));transform:perspective(1000px) rotateX(var(--angle-x,0deg)) rotateY(var(--angle-y,0deg)) translateY(0) scale(1);transition:transform .35s cubic-bezier(.18,.6,.26,1),filter .35s,opacity .24s;animation:productBreath 5s ease-in-out infinite;pointer-events:none}
@keyframes productBreath{0%,100%{translate:0 0}50%{translate:0 -7px}}
.model3d-host.is-paused .stage-product,.model3d-host.is-dragging .stage-product{animation-play-state:paused}
.model3d-host.is-swapping .stage-product{opacity:.22;filter:blur(3px) drop-shadow(0 10px 15px rgba(0,0,0,.3))}
.viewer-label{position:absolute;right:18px;bottom:17px;z-index:3;padding:8px 13px;color:#c7e0e9;font-size:10px;font-weight:800;letter-spacing:.11em;border:1px solid rgba(255,255,255,.15);background:rgba(6,23,35,.51);border-radius:100px;pointer-events:none}
.viewer-label span{color:#ffa165;margin-left:5px}
.tank-model{height:440px}.detail-model{height:380px}
.model3d-host:focus-visible{outline:3px solid #ff973c;outline-offset:-3px}
.studio-view .stage-product{width:91%;height:92%}.detail-model .stage-product{width:91%;height:93%}
.detail-3d-head,.studio-view-top{position:relative;z-index:4}
/* shared polish */
.product-card:hover{border-color:rgba(245,113,36,.35)}
.gallery-preview-grid img,.industry-card>img{transition:transform .6s cubic-bezier(.22,.7,.2,1)}
.gallery-preview-grid a:hover img,.industry-card:hover>img{transform:scale(1.065)}
@media(max-width:940px){.route-location{top:17%}.route-truck-premium{width:89%;bottom:-25%}.catalog-visual{min-height:200px}}
@media(max-width:690px){.brand{width:148px;max-width:148px}.route-model{height:290px}.route-truck-premium{width:105%;bottom:-18%;left:-7%}.route-location{top:15%;transform:scale(.78)}.route-location-start{left:-2%}.route-location-end{right:-2%}.route-location b{font-size:8px}.route-track{bottom:17%}.product-image .premium-tank-img{max-height:132px}.product-image{padding:4px 5px}.catalog-visual{min-height:160px}.catalog-visual .premium-tank-img{max-height:225px}.tank-model,.detail-model{height:315px}.viewer-label{font-size:8px;padding:6px 10px;bottom:10px;right:10px}.stage-product{width:98%!important;height:92%!important}}
@media(prefers-reduced-motion:reduce){.route-truck-premium,.route-track-fill,.stage-product{animation:none!important}.premium-tank-img{transition:none!important}}