/* On-entry accents; only the service-area truck loops. Reduced-motion stays still. */
.motion-scene{position:relative;isolation:isolate}
.brand-face-defs{position:absolute;width:0;height:0;pointer-events:none}
.packing-scene{width:100%}.packing-svg{display:block;width:100%;height:auto;overflow:hidden}
.shop-hero .hero-art:has(.packing-scene){aspect-ratio:auto;max-width:470px;background:radial-gradient(ellipse at 52% 54%,#f4ead5 0%,#f4ead5 57%,transparent 58%);border-radius:0;overflow:visible}
/* Animate a physical hinge angle, never interpolate/decompose flat matrices.
   Projection: world depth -> (.5,-.3), world up -> (0,-1). The flap's
   far edge follows a circular arc while its hinge and real length stay fixed. */
@property --pack-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.carton-flap{transform-origin:0 0;transform-box:view-box;--pack-angle:0deg}
.flap-left{transform:matrix(1,-.6,1,0,0,0);transform:matrix(1,-.6,calc(cos(var(--pack-angle))),calc(-1 * sin(var(--pack-angle))),0,0)}
.flap-right{transform:matrix(1,-.6,-1,0,0,0);transform:matrix(1,-.6,calc(-1 * cos(var(--pack-angle))),calc(-1 * sin(var(--pack-angle))),0,0)}
.flap-rear{transform:matrix(1,0,-.5,.3,0,0);transform:matrix(1,0,calc(-.5 * cos(var(--pack-angle))),calc(.3 * cos(var(--pack-angle)) - sin(var(--pack-angle))),0,0)}
.flap-front{transform:matrix(1,0,.5,-.3,0,0);transform:matrix(1,0,calc(.5 * cos(var(--pack-angle))),calc(-.3 * cos(var(--pack-angle)) - sin(var(--pack-angle))),0,0)}
.pack-item{visibility:hidden;transform-origin:0 0;transform-box:view-box}
.rear-depth-back{visibility:hidden}.rear-depth-front{visibility:visible}
.packing-scene.is-playing .rear-depth-back{animation:mb-rear-depth-back 4.9s steps(1,end) both}
.packing-scene.is-playing .rear-depth-front{animation:mb-rear-depth-front 4.9s steps(1,end) both}
.packing-scene.is-playing .flap-left{animation:mb-fold-left 4.9s ease-in-out both}
.packing-scene.is-playing .flap-right{animation:mb-fold-right 4.9s ease-in-out both}
.packing-scene.is-playing .flap-rear{animation:mb-fold-rear 4.9s ease-in-out both}
.packing-scene.is-playing .flap-front{animation:mb-fold-front 4.9s ease-in-out both}
.packing-scene.is-playing .pack-tape{animation:mb-seal 4.9s ease-in-out both}
.packing-scene.is-playing .pack-item{visibility:visible;animation-duration:4.9s;animation-fill-mode:both;animation-timing-function:linear}
.packing-scene.is-playing .pack-book{animation-name:mb-pack-book}
.packing-scene.is-playing .pack-towel{animation-name:mb-pack-towel}
.packing-scene.is-playing .pack-mug{animation-name:mb-pack-mug}
@keyframes mb-fold-left{0%,34%{--pack-angle:125deg}51%,100%{--pack-angle:0deg}}
@keyframes mb-fold-right{0%,40%{--pack-angle:125deg}57%,100%{--pack-angle:0deg}}
@keyframes mb-fold-rear{0%,59%{--pack-angle:125deg}77%,100%{--pack-angle:0deg}}
@keyframes mb-fold-front{0%,76%{--pack-angle:125deg}94%,100%{--pack-angle:0deg}}
@keyframes mb-seal{0%,94%{clip-path:inset(0 100% 0 0)}99%,100%{clip-path:inset(0)}}
/* SVG painter order must agree with depth: rear stays behind the moving
   side panels, then covers their flat upper surface when the lid closes.
   Switch at 58%, in the 57-59% non-overlapping stationary interval. */
@keyframes mb-rear-depth-back{0%{visibility:visible}58%,100%{visibility:hidden}}
@keyframes mb-rear-depth-front{0%{visibility:hidden}58%,100%{visibility:visible}}
/* Objects travel behind the front rim; no opacity swap or vanishing contents. */
@keyframes mb-pack-book{0%{transform:translate(-90px,85px) rotate(-28deg)}7%{transform:translate(160px,62px) rotate(-15deg)}11%{transform:translate(243px,88px) rotate(8deg)}17%{transform:translate(251px,190px) rotate(3deg)}21%,100%{transform:translate(251px,290px) rotate(0)}}
@keyframes mb-pack-towel{0%,7%{transform:translate(590px,110px) rotate(18deg)}15%{transform:translate(350px,72px) rotate(12deg)}19%{transform:translate(275px,114px) rotate(-6deg)}25%{transform:translate(266px,206px) rotate(-2deg)}28%,100%{transform:translate(266px,290px) rotate(0)}}
@keyframes mb-pack-mug{0%,15%{transform:translate(-80px,112px) rotate(-18deg)}22%{transform:translate(195px,84px) rotate(-8deg)}25%{transform:translate(284px,123px) rotate(8deg)}30%{transform:translate(291px,211px) rotate(2deg)}33%,100%{transform:translate(291px,290px) rotate(0)}}

/* Give the actual offer its moment; the quantities never change or disappear. */
.offer-mini-box{display:block;width:70px;height:56px;margin:0 auto 9px;overflow:visible}
.box-offer-home .home-box-counts>div{position:relative}
.box-offer-home.is-playing{animation:mb-offer-accent 3.8s ease-out both}
.box-offer-home.is-playing .home-box-counts>div{animation:mb-offer-card 1.25s ease-out both}
.box-offer-home.is-playing .home-box-counts>div:nth-child(2){animation-delay:.18s}
.box-offer-home.is-playing .home-box-counts>div:nth-child(3){animation-delay:.36s}
.box-offer-home.is-playing .home-box-counts>div:nth-child(4){animation-delay:.54s}
.box-offer-home.is-playing .offer-mini-box{animation:mb-offer-lift 1.4s ease-in-out both}
.box-offer-home.is-playing .home-box-counts>div:nth-child(2) .offer-mini-box{animation-delay:.18s}
.box-offer-home.is-playing .home-box-counts>div:nth-child(3) .offer-mini-box{animation-delay:.36s}
.box-offer-home.is-playing .home-box-counts>div:nth-child(4) .offer-mini-box{animation-delay:.54s}
@keyframes mb-offer-accent{0%,100%{box-shadow:0 0 0 0 #cda35e00}40%{box-shadow:0 8px 38px -12px #cda35e60}}
@keyframes mb-offer-card{0%{transform:translateY(8px);border-color:#d7b674}55%{transform:translateY(-3px);border-color:#cba367;box-shadow:0 9px 17px -12px #99733875}100%{transform:translateY(0);border-color:#e6dbcb;box-shadow:none}}
@keyframes mb-offer-lift{0%,100%{transform:translateY(0)}45%{transform:translateY(-9px)}}

/* Quiet, unbranded truck inside the service-area tile, behind its content. */
.area-callout{isolation:isolate;padding-bottom:88px}
.area-callout>.area-travel{--area-truck-width:110px;--area-drive-duration:18s;position:absolute;z-index:0;left:0;right:0;bottom:10px;width:100%;height:72px;overflow:hidden;opacity:.32;pointer-events:none}
.area-travel:before,.area-travel:after{content:"";position:absolute;left:0;right:0;height:1px;background:#d9e8e9}
.area-travel:before{bottom:12px;opacity:.45}
.area-travel:after{bottom:4px;opacity:.35;background:repeating-linear-gradient(90deg,#d9e8e9 0 6px,transparent 6px 16px)}
.area-travel svg{display:block;width:var(--area-truck-width);height:auto;overflow:hidden}
.area-callout .button{position:relative;z-index:2}
.area-action{display:grid;gap:10px;width:210px;justify-items:stretch}
.area-action .button{width:100%}
.area-city-ticker{width:100%;overflow:hidden;padding:2px 0;color:#dceaf1;opacity:.88;-webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent)}
.area-city-track{display:flex;width:max-content}
.area-city-list{display:flex;flex:none;align-items:center;gap:9px;padding-right:9px}
.area-city-list span{white-space:nowrap;font-size:10px;font-weight:650;letter-spacing:.035em}
.area-city-list b{color:#a9dbe9;font-size:7px;line-height:1}
.area-truck{position:absolute;bottom:9px;left:calc(0px - var(--area-truck-width));width:calc(100% + var(--area-truck-width));transform:translateX(75%)}
.area-wheel{transform-box:fill-box;transform-origin:center}
.area-callout.is-playing .area-truck{animation:mb-area-drive var(--area-drive-duration) linear infinite both}
.area-callout.is-playing .area-wheel{animation:mb-area-wheel .6s linear infinite both}
.area-callout.is-playing .area-city-track{animation:mb-area-cities 28s linear infinite both}
/* The carrier spans the road plus one truck width. Both reset endpoints are
   completely outside the clipped lane; no opacity change or stationary frames. */
@keyframes mb-area-drive{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes mb-area-wheel{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes mb-area-cities{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.mascot[data-motion-scene]{position:absolute;transform-origin:50% 85%}
.mascot.is-playing{animation:mb-hello .9s ease-in-out both}
@keyframes mb-hello{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(-5deg)}65%{transform:translateY(-3px) rotate(3deg)}}
.motion-scene.is-paused,.motion-scene.is-paused *{animation-play-state:paused!important}
body :is(.button,.add-button,.filter,.quantity button,.nav-toggle):active{scale:.97}
#cart-count{display:inline-block;transform-origin:center;min-width:47px}
@media(max-width:850px){.offer-mini-box{width:58px;height:46px}.area-callout>.area-travel{--area-truck-width:80px;--area-drive-duration:14s;height:60px}.area-action{width:190px}}
@media(max-width:600px){.box-offer-home .home-box-counts>div{padding-top:15px}.offer-mini-box{width:49px;height:40px}.area-callout{padding-bottom:73px}.area-callout>.area-travel{--area-truck-width:58px;--area-drive-duration:10s;height:48px;bottom:8px}.area-action{width:min(210px,100%)}}
@media(max-width:540px){.shop-hero .hero-art:has(.packing-scene){display:block;justify-self:center;max-width:340px;margin:-24px auto 0}}
@media(prefers-reduced-motion:reduce){.motion-scene,.motion-scene *{animation:none!important;transition:none!important}body :is(.button,.add-button,.filter,.quantity button,.nav-toggle):active{scale:1}}
html[data-reduced-motion] .motion-scene,html[data-reduced-motion] .motion-scene *{animation:none!important;transition:none!important}
html[data-reduced-motion]{scroll-behavior:auto}html[data-reduced-motion] :is(.button,.add-button,.filter,.quantity button,.nav-toggle):active{scale:1}