/* The original warehouse stays in place; tabs emphasize its working zones. */
.service-visual{position:relative;max-width:600px;margin-inline:auto}
.scene-toggle{position:absolute;right:-6px;bottom:1px;width:44px;height:44px;display:grid;place-items:center;border:1px solid #bccdca;background:#f7f7f2d9;color:#385965;border-radius:50%;transition:background .2s,border-color .2s}
.scene-toggle:hover{background:#fff;border-color:#d9894b}
.scene-toggle svg{width:17px;height:17px}
.scene-play-icon{display:none}
.scene-toggle[aria-pressed="true"] .scene-pause-icon{display:none}
.scene-toggle[aria-pressed="true"] .scene-play-icon{display:block}
.service-stage.is-motion-paused .warehouse-diagram *{animation-play-state:paused!important}
@media(max-width:740px){.scene-toggle{right:-9px;bottom:0}}
@media(prefers-reduced-motion:reduce){.scene-toggle{display:none}.warehouse-diagram *{animation:none!important;transition:none!important}}

/* Scoped native SVG animation. An item descends behind the carton front wall. */
.service-packing-art{display:inline}
.service-packing-art .packing-item{transform-box:fill-box;transform-origin:50% 100%;animation-duration:6s;animation-delay:-2.4s;animation-timing-function:cubic-bezier(.35,0,.2,1);animation-iteration-count:infinite;}
.service-packing-art .packing-item-bottle{animation-name:mas-packing-bottle;}
.service-packing-art .packing-item-product{animation-name:mas-packing-product;}
.service-packing-art .packing-item-left{animation-name:mas-packing-left;}
.service-packing-art .packing-item-right{animation-name:mas-packing-right;}
.service-packing-art .packing-parcel{animation:mas-packing-parcel 6s ease-in-out infinite;}
.service-packing-art .packing-parcel-back{animation-delay:-3s;}
.service-packing-art .packing-flow-dot{animation:mas-packing-flow 6s ease-in-out infinite;}
.service-stage:not([data-active-service="fulfillment"]) .service-packing-art *{animation-play-state:paused}
@keyframes mas-packing-bottle{0%,9%{transform:translateY(-39px);opacity:0;}15%{transform:translateY(-39px);opacity:1;}38%,84%{transform:translateY(0);opacity:1;}93%,100%{transform:translateY(0);opacity:0;}}
@keyframes mas-packing-product{0%,27%{transform:translateY(-43px);opacity:0;}33%{transform:translateY(-43px);opacity:1;}55%,85%{transform:translateY(0);opacity:1;}94%,100%{transform:translateY(0);opacity:0;}}
@keyframes mas-packing-left{0%,6%{transform:translateY(-28px);opacity:0;}12%{transform:translateY(-28px);opacity:1;}31%,84%{transform:translateY(0);opacity:1;}94%,100%{transform:translateY(0);opacity:0;}}
@keyframes mas-packing-right{0%,42%{transform:translateY(-28px);opacity:0;}48%{transform:translateY(-28px);opacity:1;}70%,86%{transform:translateY(0);opacity:1;}96%,100%{transform:translateY(0);opacity:0;}}
@keyframes mas-packing-parcel{0%,30%{transform:translate(0,0);}56%,86%{transform:translate(11px,-4px);}100%{transform:translate(0,0);}}
@keyframes mas-packing-flow{0%,10%{transform:translate(0,0);opacity:0;}25%{opacity:.9;}75%{opacity:.9;}90%,100%{transform:translate(39px,-13px);opacity:0;}}
@media(prefers-reduced-motion:reduce){.service-packing-art .packing-item,.service-packing-art .packing-parcel,.service-packing-art .packing-flow-dot{animation:none!important;transform:none!important;opacity:1!important;}}

/* Receiving illustration. Motion follows the truck's longitudinal ground axis. */
.service-receiving-art{display:inline}
.service-receiving-art .receiving-truck{transform-box:view-box;transform-origin:0 0;animation:mas-receiving-dock 6s cubic-bezier(.4,0,.2,1) infinite;animation-play-state:paused;will-change:transform}
.service-receiving-art .receiving-guide{animation:mas-receiving-guide 6s ease-in-out infinite;animation-play-state:paused}
.service-receiving-art .receiving-dock-light{animation:mas-receiving-light 6s linear infinite;animation-play-state:paused}
[data-active-service="containers"] .service-receiving-art .receiving-truck,
[data-active-service="containers"] .service-receiving-art .receiving-guide,
[data-active-service="containers"] .service-receiving-art .receiving-dock-light{animation-play-state:running}
@keyframes mas-receiving-dock{0%,8%{transform:translate(42px,10px)}48%,78%{transform:translate(0,0)}100%{transform:translate(42px,10px)}}
@keyframes mas-receiving-guide{0%,8%{opacity:.55}25%{opacity:.85}48%,78%{opacity:.12}100%{opacity:.55}}
@keyframes mas-receiving-light{0%,45%{fill:#ec8f42}46%,78%{fill:#80a774}79%,100%{fill:#ec8f42}}
@media(prefers-reduced-motion:reduce){.service-receiving-art .receiving-truck,.service-receiving-art .receiving-guide,.service-receiving-art .receiving-dock-light{animation:none;will-change:auto}.service-receiving-art .receiving-truck{transform:translate(0,0)}.service-receiving-art .receiving-guide{opacity:.25}.service-receiving-art .receiving-dock-light{fill:#80a774}}

/* Append after service-packing.css and service-receiving.css.
   Both props always inhabit the original warehouse; the existing active-service
   opacity rules dim inactive zones. These are SVG groups, never full scenes. */
.warehouse-diagram .packing-zone.service-packing-art,
.warehouse-diagram .truck-zone.service-receiving-art{display:inline;width:auto;height:auto;overflow:visible}
.warehouse-diagram .service-packing-art .packing-item,
.warehouse-diagram .service-packing-art .packing-parcel,
.warehouse-diagram .service-packing-art .packing-flow-dot,
.warehouse-diagram .service-receiving-art .receiving-truck{animation-play-state:paused}
[data-active-service="fulfillment"] .warehouse-diagram .service-packing-art .packing-item,
[data-active-service="fulfillment"] .warehouse-diagram .service-packing-art .packing-parcel,
[data-active-service="containers"] .warehouse-diagram .service-receiving-art .receiving-truck{animation-play-state:running}
.warehouse-diagram .service-receiving-art .receiving-truck{animation-name:mas-warehouse-receiving;animation-duration:6s;animation-delay:-2.4s}
/* The outer horizontal mirror turns this into a 10px reverse approach toward
   the warehouse (up/right), with the open rear leading and cab down/left. */
@keyframes mas-warehouse-receiving{0%,8%{transform:translate(23px,5.5px)}48%,78%{transform:translate(0,0)}100%{transform:translate(23px,5.5px)}}
.service-stage.is-motion-paused .warehouse-diagram *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.warehouse-diagram .service-receiving-art .receiving-truck{animation:none!important;transform:none!important}}