/* =========================================================
   CodeChaps — Logistics Software Development page
   Page-specific styles (control-tower map + handheld scanner hero).
   Shared styles live in codechaps-motion.css
   ========================================================= */
.hero-visual{min-height:520px;align-items:center}
.lg-wrap{position:relative;width:540px;height:480px}
.js .lg-wrap{opacity:0;transform:translateY(40px) scale(.96)}
.js.loaded .lg-wrap{opacity:1;transform:none;transition:opacity 1s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.lg-wrap .float{z-index:4}

/* ---- control tower panel ---- */
.tower{position:absolute;left:0;top:24px;width:470px;height:350px;border-radius:22px;background:#05070B;padding:10px;box-shadow:0 50px 90px rgba(0,0,0,.55),inset 0 0 0 1px #263244;animation:floatY 8s ease-in-out infinite;z-index:1}
.tw-screen{width:100%;height:100%;border-radius:14px;background:#0B1220;color:#E2E8F0;overflow:hidden;display:flex;flex-direction:column}
.tw-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #1E293B;font-size:10px;color:#94A3B8}
.tw-head b{font-size:12.5px;color:#fff}
.tw-head .live{display:flex;align-items:center;gap:5px;color:#86EFAC;font-weight:700;letter-spacing:.08em}
.tw-head .live i{width:7px;height:7px;border-radius:50%;background:#22C55E;animation:blink 1.4s ease-in-out infinite}
.tw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px 14px 0}
.tw-kpis div{background:#111A2B;border:1px solid #1E293B;border-radius:10px;padding:7px 10px}
.tw-kpis small{display:block;font-size:9px;color:#94A3B8}
.tw-kpis b{font-size:16px;color:#fff;font-variant-numeric:tabular-nums}
.tw-kpis .warn b{color:#FBBF24}
.tw-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:10px;padding:10px 14px 12px;min-height:0}
.tw-map{position:relative;border-radius:12px;background:#0E1A2E;border:1px solid #1E293B;overflow:hidden}
.tw-map svg{position:absolute;left:0;top:0;width:296px;height:212px}
.tw-map .land{fill:#13233C}
.tw-map .grid{stroke:#16263F;stroke-width:1}
.tw-map .lane{fill:none;stroke:#2B4A75;stroke-width:2;stroke-dasharray:4 4}
.tw-map .lane.hot{stroke:#F59E0B;stroke-dasharray:none;opacity:.6}
.hub{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.25)}
.hub::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(59,130,246,.5);animation:hubPing 2.4s ease-out infinite;animation-delay:var(--dl,0s)}
@keyframes hubPing{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.hub span{position:absolute;left:14px;top:-3px;font-size:8.5px;font-weight:700;color:#CBD5E1;white-space:nowrap}
.hub.wh{background:#14B8A6;box-shadow:0 0 0 3px rgba(20,184,166,.25)}
.truck{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:5px;background:#fff;color:#0B1220;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,255,255,.4);offset-rotate:0deg}
.truck .ico{width:11px;height:11px}
.truck.t1{offset-path:path("M40 160 C 90 120, 140 110, 190 70")}
.truck.t2{offset-path:path("M190 70 C 210 110, 225 140, 240 172")}
.truck.t3{offset-path:path("M40 160 C 110 180, 180 185, 240 172");background:#FBBF24}
.js.loaded .truck.t1{animation:drive 7s linear infinite}
.js.loaded .truck.t2{animation:drive 6s linear infinite -2s}
.js.loaded .truck.t3{animation:drive 9s linear infinite -4s}
@keyframes drive{from{offset-distance:0%}to{offset-distance:100%}}
.alert-dot{position:absolute;left:150px;top:176px;width:10px;height:10px;margin:-5px;border-radius:50%;background:#F59E0B;animation:blink 1s ease-in-out infinite}
.tw-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.tw-list>small{font-size:9px;font-weight:700;color:#64748B;letter-spacing:.1em}
.ship{background:#111A2B;border:1px solid #1E293B;border-radius:10px;padding:7px 8px;font-size:9.5px}
.ship b{display:flex;justify-content:space-between;gap:4px;font-size:9.5px;color:#fff}
.ship small{display:block;color:#94A3B8;font-size:8.5px;margin:2px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ship .pg{height:4px;border-radius:4px;background:#1E293B;overflow:hidden}
.ship .pg i{display:block;height:100%;width:var(--w);background:var(--c,#3B82F6);border-radius:4px;transform:scaleX(0);transform-origin:left}
.js.loaded .ship .pg i{animation:grow 1.2s var(--ease) forwards;animation-delay:calc(1.2s + var(--i,0)*.15s)}
@keyframes grow{to{transform:scaleX(1)}}
.chip{font-size:8px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--bg);color:var(--fg)}
.js .ship{opacity:0;transform:translateX(12px)}
.js.loaded .ship{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js.loaded .ship:nth-of-type(1){transition-delay:1s}.js.loaded .ship:nth-of-type(2){transition-delay:1.15s}.js.loaded .ship:nth-of-type(3){transition-delay:1.3s}

/* ---- handheld scanner ---- */
.scanner{position:absolute;right:-66px;bottom:0;width:160px;height:336px;border-radius:30px;background:#111827;padding:8px;box-shadow:0 30px 60px rgba(0,0,0,.55),inset 0 0 0 1px #374151;animation:floatY 7s ease-in-out infinite reverse;z-index:2}
.scanner::before{content:"";position:absolute;top:-10px;left:50%;width:60px;height:14px;margin-left:-30px;border-radius:8px 8px 0 0;background:#F59E0B}
.sc-screen{width:100%;height:100%;border-radius:23px;background:#fff;color:#0F172A;padding:14px 11px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.sc-screen>small{font-size:9px;color:#64748B}
.sc-screen>b{font-size:12px;margin-top:-6px}
.barcode{position:relative;height:66px;border-radius:10px;background:#F1F5F9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.barcode .bars{width:110px;height:40px;background:repeating-linear-gradient(90deg,#0F172A 0 2px,transparent 2px 4px,#0F172A 4px 5px,transparent 5px 8px,#0F172A 8px 11px,transparent 11px 13px)}
.barcode .laser{position:absolute;left:8px;right:8px;top:50%;height:2px;background:#EF4444;box-shadow:0 0 10px #EF4444;animation:laser 1.8s ease-in-out infinite}
@keyframes laser{0%,100%{transform:translateY(-22px)}50%{transform:translateY(22px)}}
.sc-ok{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#15803D;background:#DCFCE7;border-radius:8px;padding:5px 8px}
.sc-ok i{width:12px;height:12px;border-radius:50%;background:#16A34A;flex:none;position:relative}
.sc-ok i::after{content:"";position:absolute;left:3px;top:3px;width:5px;height:2.5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.pick{display:flex;flex-direction:column;gap:5px;font-size:9.5px}
.pick div{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #E2E8F0;padding-bottom:4px}
.pick span{color:#334155}
.pick b{font-size:9px;color:#64748B}
.pick .done b{color:#16A34A}
.sc-prog{margin-top:auto;font-size:9px;color:#64748B}
.sc-prog .pg{height:6px;border-radius:4px;background:#E2E8F0;margin-top:4px;overflow:hidden}
.sc-prog .pg i{display:block;height:100%;width:72%;background:var(--blue);border-radius:4px;transform:scaleX(0);transform-origin:left}
.js.loaded .sc-prog .pg i{animation:grow 1.4s var(--ease) 1.6s forwards}

.float--1{right:-70px;top:-20px}
.float--2{right:150px;top:auto;bottom:-34px}
.float--3{left:-80px;top:auto;bottom:30px}
@media (max-width:1240px) and (min-width:961px){.lg-wrap{transform-origin:left center;scale:.86}.float--1{right:-30px}.scanner{right:-92px}}
@media (max-width:960px){.hero-visual{min-height:0}.lg-wrap{width:100%;max-width:520px;height:auto}.tower{position:relative;top:0;width:100%;height:350px}.scanner{display:none}}
@media (max-width:560px){.tower{height:330px}.tw-body{grid-template-columns:1fr}.tw-list{display:none}.tw-kpis{gap:6px;padding:8px 10px 0}.tw-kpis b{font-size:14px}.tw-body{padding:8px 10px 10px}}
@media (prefers-reduced-motion:reduce){.truck{offset-distance:50%}.ship .pg i,.sc-prog .pg i{transform:none}.js .ship{opacity:1;transform:none}}