/* styles/warehouse-animation.css
   Animated warehouse scene for the Warehouse Management hero.
   Load AFTER warehouse.css. All classes are prefixed "wm-" so nothing clashes.
   One 12s loop: arm picks -> cart moves -> second robot stores. */

.warehouse-visual .wm-stage{
  --wm-accent:#d34e19;   /* robots, status dot, highlights */
  --wm-amber:#ffb547;    /* the product box */
  --wm-coral:#ff6b57;
  --wm-indigo:#7c8cff;
  --wm-steel:#3a5074;    /* rack frames */
  --wm-line:#dc7a11;     /* floor and ceiling lines */
  --wm-loop:12s;
  position:relative;
  width:100%;
  min-height:0;
  padding:0;
  margin:0;
}
.wm-stage svg{display:block;width:100%;height:auto}

/* ---- static scene ---- */
.wm-floor{fill:rgba(255,255,255,.035)}
.wm-truss line,.wm-lane line{stroke:var(--wm-line);stroke-width:2}
.wm-lane line:last-child{stroke-dasharray:3 12;stroke-width:1.5}
.wm-light rect{fill:#dff1ff;opacity:.7}
.wm-post{fill:var(--wm-steel)}
.wm-c1{fill:var(--wm-coral);opacity:.85}
.wm-c2{fill:var(--wm-indigo);opacity:.85}
.wm-c3{fill:var(--wm-accent);opacity:.8}
.wm-c4{fill:var(--wm-amber);opacity:.85}
.wm-box{fill:var(--wm-amber)}
.wm-tape{fill:rgba(0,0,0,.25)}
.wm-zone{font:500 13px "DM Mono",ui-monospace,monospace;letter-spacing:.08em;fill:#8fa3bf}

/* ---- robots and cart ---- */
.wm-base,.wm-cartbody{fill:#8b4c0d}
.wm-acc{fill:var(--wm-accent)}
.wm-wheel{fill:#07101e;stroke:#eff1f3}
.wm-lamp{fill:#fff}
.wm-link{stroke:#e8eef8;stroke-width:12;stroke-linecap:round}
.wm-link-2{stroke:#cfd9ea;stroke-width:10}

/* ---- status pill ---- */
.wm-pill{fill:rgba(8,13,20,.85);stroke:var(--wm-accent)}
.wm-status text{font:500 14px "DM Mono",ui-monospace,monospace;letter-spacing:.06em;fill:#9ff3ec}
.wm-ping{fill:none;stroke:var(--wm-accent);transform-box:fill-box;transform-origin:center;animation:wm-ping 1.8s ease-out infinite}

/* ---- motion ---- */
.wm-a1,.wm-a2,.wm-ac,.wm-b1,.wm-b2,.wm-bc{transform-origin:0 0;transform:rotate(0)}
.wm-a1{animation:wm-a1 var(--wm-loop) ease-in-out infinite}
.wm-a2{animation:wm-a2 var(--wm-loop) ease-in-out infinite}
.wm-ac{animation:wm-ac var(--wm-loop) ease-in-out infinite}
.wm-b1{animation:wm-b1 var(--wm-loop) ease-in-out infinite}
.wm-b2{animation:wm-b2 var(--wm-loop) ease-in-out infinite}
.wm-bc{animation:wm-bc var(--wm-loop) ease-in-out infinite}
.wm-cart{animation:wm-cart var(--wm-loop) ease-in-out infinite}

.wm-carried1,.wm-carried2,.wm-oncart,.wm-deliv,.wm-s2,.wm-s3{opacity:0}
.wm-shelfbox{animation:wm-shelf var(--wm-loop) linear infinite}
.wm-carried1{animation:wm-carried1 var(--wm-loop) linear infinite}
.wm-carried2{animation:wm-carried2 var(--wm-loop) linear infinite}
.wm-oncart{animation:wm-oncart var(--wm-loop) linear infinite}
.wm-deliv{animation:wm-deliv var(--wm-loop) linear infinite}
.wm-s1{animation:wm-s1 var(--wm-loop) linear infinite}
.wm-s2{animation:wm-s2 var(--wm-loop) linear infinite}
.wm-s3{animation:wm-s3 var(--wm-loop) linear infinite}

/* arm 1: rack -> cart (0-44%) */
@keyframes wm-a1{0%,24%,44%,100%{transform:rotate(36deg)}12%,16%{transform:rotate(-13.5deg)}32%,36%{transform:rotate(56.3deg)}}
@keyframes wm-a2{0%,24%,44%,100%{transform:rotate(-84deg)}12%,16%{transform:rotate(-38.7deg)}32%,36%{transform:rotate(81.5deg)}}
@keyframes wm-ac{0%,24%,44%,100%{transform:rotate(48deg)}12%,16%{transform:rotate(52.2deg)}32%,36%{transform:rotate(-137.8deg)}}
/* arm 2: cart -> dispatch shelf (56-90%) */
@keyframes wm-b1{0%,56%,70%,90%,100%{transform:rotate(36deg)}60%,64%{transform:rotate(56.3deg)}78%,82%{transform:rotate(-13.5deg)}}
@keyframes wm-b2{0%,56%,70%,90%,100%{transform:rotate(-84deg)}60%,64%{transform:rotate(81.5deg)}78%,82%{transform:rotate(-38.7deg)}}
@keyframes wm-bc{0%,56%,70%,90%,100%{transform:rotate(48deg)}60%,64%{transform:rotate(-137.8deg)}78%,82%{transform:rotate(52.2deg)}}
/* cart: waits, drives to dispatch, returns */
@keyframes wm-cart{0%,44%{transform:translateX(0)}62%,68%{transform:translateX(68px)}88%,100%{transform:translateX(0)}}
/* where the box is at each moment */
@keyframes wm-shelf{0%,11.9%{opacity:1}12%,97%{opacity:0}98%,100%{opacity:1}}
@keyframes wm-carried1{0%,11.9%{opacity:0}12%,31.9%{opacity:1}32%,100%{opacity:0}}
@keyframes wm-oncart{0%,31.9%{opacity:0}32%,63.9%{opacity:1}64%,100%{opacity:0}}
@keyframes wm-carried2{0%,63.9%{opacity:0}64%,81.9%{opacity:1}82%,100%{opacity:0}}
@keyframes wm-deliv{0%,81.9%{opacity:0}82%,96%{opacity:1}97%,100%{opacity:0}}
/* status text */
@keyframes wm-s1{0%,31.9%{opacity:1}32%,97.9%{opacity:0}98%,100%{opacity:1}}
@keyframes wm-s2{0%,31.9%{opacity:0}32%,61.9%{opacity:1}62%,100%{opacity:0}}
@keyframes wm-s3{0%,61.9%{opacity:0}62%,97%{opacity:1}97.1%,100%{opacity:0}}
@keyframes wm-ping{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}

@media (max-width:640px){
  .wm-zone{font-size:15px}
  .wm-status text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .wm-stage *{animation:none!important}
}







/* *************************Robot Box Increase Size */