/* ============================================================
   NXT QUARRY — "alive" layer: 3D truck scene + live map device
   ============================================================ */

/* ---------- 3D truck band ---------- */
.live3d{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#080808;overflow:hidden;position:relative}
.live3d .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:center;padding-top:clamp(70px,10vh,110px);padding-bottom:clamp(70px,10vh,110px)}
.live3d h2{font-size:clamp(28px,4vw,46px)}
.live3d .eyebrow{display:block;margin-bottom:18px}
.live3d p.lede{margin-top:20px;font-size:16.5px}
@media(max-width:880px){.live3d .wrap{grid-template-columns:1fr}}

/* stage */
.t3d-stage{position:relative;height:380px;perspective:1300px;perspective-origin:50% 30%}
.t3d-world{position:absolute;left:50%;top:58%;transform-style:preserve-3d;
  transform:rotateX(58deg) rotateZ(34deg);animation:worldSway 14s ease-in-out infinite}
@keyframes worldSway{0%,100%{transform:rotateX(58deg) rotateZ(34deg)}50%{transform:rotateX(54deg) rotateZ(26deg)}}

/* ground + road (in world plane) */
.t3d-ground{position:absolute;left:-460px;top:-300px;width:920px;height:600px;
  background:
   radial-gradient(closest-side,rgba(42,105,178,.07),transparent 70%),
   linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:100% 100%,60px 60px,60px 60px;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 95%);
          mask-image:radial-gradient(closest-side,#000 55%,transparent 95%);}
.t3d-road{position:absolute;left:-460px;top:-62px;width:920px;height:124px;
  background:#101216;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.t3d-road::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,rgba(201,180,138,.55) 0 34px,transparent 34px 70px);
  animation:roadMove 1.1s linear infinite}
@keyframes roadMove{to{background-position:-70px 0}}
@media(prefers-reduced-motion:reduce){.t3d-road::before,.t3d-world{animation:none}}

/* cuboid helper */
.box{position:absolute;width:0;height:0;transform-style:preserve-3d}
.box i{position:absolute;left:0;top:0;transform-origin:center;backface-visibility:hidden}
.box .fc{width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);margin-top:calc(var(--h)/-2);transform:translateZ(calc(var(--d)/2));background:var(--c2)}
.box .bc{width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);margin-top:calc(var(--h)/-2);transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:var(--c3)}
.box .lc{width:var(--d);height:var(--h);margin-left:calc(var(--d)/-2);margin-top:calc(var(--h)/-2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:var(--c3)}
.box .rc{width:var(--d);height:var(--h);margin-left:calc(var(--d)/-2);margin-top:calc(var(--h)/-2);transform:rotateY(90deg) translateZ(calc(var(--w)/2));background:var(--c2)}
.box .tc{width:var(--w);height:var(--d);margin-left:calc(var(--w)/-2);margin-top:calc(var(--d)/-2);transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:var(--c1)}

/* truck assembly — sits on road, axis along X */
.truck3d{position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:rotateZ(-90deg) rotateX(-90deg) translateY(-46px);animation:truckBob 3.2s ease-in-out infinite}
@keyframes truckBob{0%,100%{transform:rotateZ(-90deg) rotateX(-90deg) translateY(-46px)}50%{transform:rotateZ(-90deg) rotateX(-90deg) translateY(-49px)}}
@media(prefers-reduced-motion:reduce){.truck3d{animation:none}}
.truck3d .chassis{--w:300px;--h:14px;--d:64px;--c1:#1a1c20;--c2:#15171a;--c3:#101113;transform:translate3d(0,16px,0)}
.truck3d .tray{--w:186px;--h:64px;--d:74px;--c1:#23262b;--c2:#1b1e22;--c3:#14161a;transform:translate3d(-52px,-24px,0)}
.truck3d .load{--w:170px;--h:16px;--d:62px;--c1:#C9B48A;--c2:#a8946f;--c3:#8d7c5d;transform:translate3d(-52px,-62px,0)}
.truck3d .cab{--w:64px;--h:58px;--d:70px;--c1:#3a8ee6;--c2:#2A69B2;--c3:#1d4a7e;transform:translate3d(106px,-20px,0)}
.truck3d .cab .fc{background:linear-gradient(180deg,#9cc6f2 0 42%,var(--c2) 42%)}
.truck3d .wheel{position:absolute;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#3a3d44 0 28%,#0c0d0f 30% 70%,#1a1c20 72%);
  margin:-18px 0 0 -18px;animation:wheelSpin 1.1s linear infinite}
@keyframes wheelSpin{to{transform:translateZ(var(--z)) rotate(360deg)}}
.truck3d .wheel{transform:translateZ(var(--z))}
@media(prefers-reduced-motion:reduce){.truck3d .wheel{animation:none}}

/* 2D overlay: GPS pin + tether + live chip */
.t3d-pin{position:absolute;left:50%;top:24%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:3;pointer-events:none}
.t3d-pin .ring{width:16px;height:16px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 0 0 rgba(58,142,230,.5);animation:pulse 2.2s infinite}
.t3d-pin .beam{width:1px;height:54px;background:linear-gradient(rgba(58,142,230,.8),transparent)}
.t3d-chip{position:absolute;right:4%;top:10%;z-index:3;background:rgba(12,14,18,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(58,142,230,.35);border-radius:14px;padding:13px 16px;min-width:200px;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.t3d-chip .tc-top{display:flex;align-items:center;gap:8px;font-family:'Zalando Sans Expanded',sans-serif;font-weight:800;font-size:14px}
.t3d-chip .tc-top .live{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9px;letter-spacing:.14em;color:var(--green);border:1px solid rgba(48,209,88,.35);border-radius:5px;padding:2px 6px;margin-left:auto;display:flex;align-items:center;gap:5px}
.t3d-chip .tc-top .live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse 2.2s infinite}
.t3d-chip .tc-rows{margin-top:9px;display:flex;flex-direction:column;gap:5px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-2)}
.t3d-chip .tc-rows b{color:#fff;font-weight:500}
@media(max-width:880px){.t3d-stage{height:300px}.t3d-chip{right:0}}

/* ---------- live map device (control teaser) — real-app fidelity ---------- */
.ct-visual .device{margin:0 auto}
.ct-visual .device .screen{background:#0a0c0f}
.ct-visual .mapscreen .route{stroke:transparent;filter:none}
.maplabel{position:absolute;transform:translate(-50%,-50%);font-family:'Zalando Sans',sans-serif;font-size:8.5px;letter-spacing:.14em;color:rgba(160,170,185,.38);text-transform:uppercase;white-space:nowrap;pointer-events:none}
.mapzoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:8px;z-index:4}
.mapzoom span{width:30px;height:30px;border-radius:50%;background:rgba(18,21,26,.92);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#cfd3da;font-size:15px;font-weight:500}
.mapupd{position:absolute;left:12px;bottom:12px;z-index:4;background:rgba(18,21,26,.92);border:1px solid rgba(255,255,255,.08);border-radius:100px;padding:6px 12px;font-size:9.5px;color:#aab0ba;font-family:'Zalando Sans',sans-serif}
.mapattr{position:absolute;right:12px;bottom:12px;z-index:4;font-size:7.5px;color:rgba(160,170,185,.45);letter-spacing:.04em}
.sitepin.green .pin{background:#30D158;box-shadow:0 0 0 5px rgba(48,209,88,.15)}
.sitepin .lab{font-family:'Zalando Sans',sans-serif;font-weight:600;font-size:9.5px;letter-spacing:0;border-radius:100px;padding:4px 10px}
/* truck marker: amber circle + glow ring, info card rides above */
.truckdot .halo-ring{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(245,166,35,.28),transparent 72%);z-index:-1}
.truckdot .body.round{width:30px;height:30px;border-radius:50%;background:var(--amber);color:#1d1405;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.tdcard{position:absolute;left:50%;bottom:150%;transform:translateX(-50%);background:rgba(16,19,24,.96);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px 12px;min-width:158px;box-shadow:0 16px 40px -14px rgba(0,0,0,.8);z-index:5}
.tdcard::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(16,19,24,.96)}
.tdcard .r1{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:#fff}
.tdcard .r1 .t{font-size:11px}.tdcard .r1 .t small{font-size:8px;color:#9aa1ac}
.tdcard .r2{font-family:'Zalando Sans',sans-serif;font-weight:600;font-size:11px;color:#e8eaee;margin-top:3px}
.tdcard .r3{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#9aa1ac;margin-top:4px;font-family:'Zalando Sans',sans-serif}
/* header date pills */
.ct-visual .app-title{font-style:normal}
.ct-visual .app-back{font-style:normal}
.ct-visual .daypills .dp{font-style:normal}