/* ==========================================================================
   HERO TRUCK SCENE — adapted for a responsive, aspect-ratio-locked hero.
   Native design canvas is 1400x640; .tw-scene is scaled to fill .tw-wrap
   via a JS-computed transform (see initHeroScene in main.js), so every
   pixel value below stays in the scene's own fixed coordinate space and
   the whole thing scales uniformly — no per-viewport-height recalculation,
   which is what caused the earlier overlap bugs.
   ========================================================================== */
.tw-wrap{
  position:relative;width:100%;aspect-ratio:1400/640;overflow:hidden;
  background:#8FD3F4;
}

/* On mobile, the scene is sized around the truck itself (see fitTwScene in
   main.js) rather than a fixed viewport-height splash — that guaranteed a
   fully visible truck + branding but forcing a literal 100vh box left an
   awkward slab of empty sky above it. JS sets an explicit height each time
   based on the truck's own scale, so this just clears the aspect-ratio and
   lets JS drive it. */
@media (max-width:640px){
  .tw-wrap{
    aspect-ratio:auto;
  }
}
.tw-scene{
  position:absolute;top:0;left:0;width:1400px;height:640px;
  transform-origin:top left;
  overflow:hidden;
  background:linear-gradient(180deg,#8FD3F4 0%,#B7E4F7 45%,#F4E7C1 72%,#F4E7C1 100%);
}

.tw-sun{
  position:absolute;top:60px;left:1150px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFF7DE, #FFE9A8 55%, rgba(255,233,168,0) 75%);
  filter:drop-shadow(0 0 40px rgba(255,233,168,.8));
}

.tw-clouds{position:absolute;inset:0;width:200%;animation:twDriftClouds 55s linear infinite;animation-play-state:paused;}
.tw-cloud{position:absolute;background:#fff;border-radius:50px;opacity:.85;}
.tw-cloud::before,.tw-cloud::after{content:"";position:absolute;background:#fff;border-radius:50%;}
.tw-c1{top:60px;left:120px;width:130px;height:42px;}
.tw-c1::before{width:70px;height:70px;top:-32px;left:15px;}
.tw-c1::after{width:55px;height:55px;top:-22px;left:70px;}
.tw-c2{top:120px;left:520px;width:100px;height:32px;}
.tw-c2::before{width:52px;height:52px;top:-24px;left:12px;}
.tw-c2::after{width:40px;height:40px;top:-16px;left:55px;}
.tw-c3{top:40px;left:880px;width:150px;height:46px;}
.tw-c3::before{width:80px;height:80px;top:-36px;left:20px;}
.tw-c3::after{width:60px;height:60px;top:-24px;left:85px;}
.tw-c4{top:150px;left:1350px;width:110px;height:34px;}
.tw-c4::before{width:56px;height:56px;top:-26px;left:12px;}
.tw-c4::after{width:44px;height:44px;top:-18px;left:60px;}
.tw-c5{top:90px;left:1700px;width:130px;height:40px;}
.tw-c5::before{width:66px;height:66px;top:-30px;left:15px;}
.tw-c5::after{width:50px;height:50px;top:-20px;left:68px;}
@keyframes twDriftClouds{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.tw-birds{position:absolute;top:100px;width:200%;animation:twDriftClouds 30s linear infinite;animation-play-state:paused;}
.tw-bird{position:absolute;font-size:20px;color:#4a5560;}
.tw-b1{left:300px;top:0;}
.tw-b2{left:340px;top:20px;}
.tw-b3{left:950px;top:10px;}
.tw-b4{left:990px;top:35px;}

.tw-hills-far{
  position:absolute;bottom:190px;width:200%;height:140px;
  background:
    radial-gradient(circle at 8% 100%, #A9C9A0 0 90px, transparent 91px),
    radial-gradient(circle at 22% 100%, #A9C9A0 0 130px, transparent 131px),
    radial-gradient(circle at 40% 100%, #A9C9A0 0 100px, transparent 101px),
    radial-gradient(circle at 58% 100%, #A9C9A0 0 150px, transparent 151px),
    radial-gradient(circle at 74% 100%, #A9C9A0 0 110px, transparent 111px),
    radial-gradient(circle at 90% 100%, #A9C9A0 0 140px, transparent 141px);
  opacity:.75;animation:twScrollBg 40s linear infinite;animation-play-state:paused;
}
.tw-hills-near{
  position:absolute;bottom:150px;width:200%;height:110px;
  background:
    radial-gradient(circle at 5% 100%, #7FAE72 0 70px, transparent 71px),
    radial-gradient(circle at 16% 100%, #7FAE72 0 95px, transparent 96px),
    radial-gradient(circle at 30% 100%, #7FAE72 0 60px, transparent 61px),
    radial-gradient(circle at 46% 100%, #7FAE72 0 90px, transparent 91px),
    radial-gradient(circle at 60% 100%, #7FAE72 0 70px, transparent 71px),
    radial-gradient(circle at 74% 100%, #7FAE72 0 100px, transparent 101px),
    radial-gradient(circle at 88% 100%, #7FAE72 0 75px, transparent 76px);
  animation:twScrollBg 20s linear infinite;animation-play-state:paused;
}
@keyframes twScrollBg{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.tw-skyline{
  position:absolute;bottom:150px;width:200%;height:120px;display:flex;align-items:flex-end;
  opacity:.5;animation:twScrollBg 32s linear infinite;animation-play-state:paused;
}
.tw-skyline .tw-b{background:#5C6B78;margin-right:26px;}
.tw-skyline .tw-b::before{
  content:"";display:block;width:100%;height:100%;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 4px, transparent 4px 12px),
                    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 4px, transparent 4px 14px);
  background-blend-mode:screen;opacity:.4;
}

.tw-midtown{position:absolute;bottom:150px;width:200%;height:170px;display:flex;align-items:flex-end;animation:twScrollBg 24s linear infinite;animation-play-state:paused;}
.tw-midtown .tw-mb{position:relative;margin-right:34px;border-top:3px solid rgba(255,255,255,.25);}
.tw-midtown .tw-mb .tw-windows{position:absolute;inset:6px 5px 5px 5px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 6px;}
.tw-midtown .tw-mb .tw-windows span{background:#FFE9A8;opacity:.85;border-radius:1px;}
.tw-midtown .tw-mb .tw-windows span.tw-off{background:rgba(255,255,255,.18);}

.tw-roadside{position:absolute;bottom:148px;left:0;width:200%;height:220px;display:flex;align-items:flex-end;
  animation:twScrollRoadside 9s linear infinite;animation-play-state:paused;}
@keyframes twScrollRoadside{from{transform:translateX(0);}to{transform:translateX(-50%);}}

.tw-tree{position:relative;width:26px;height:110px;margin-right:150px;}
.tw-tree .tw-trunk{position:absolute;bottom:0;left:10px;width:7px;height:34px;background:#6B4A2E;border-radius:2px;}
.tw-tree .tw-foliage{
  position:absolute;bottom:26px;left:0;width:26px;height:26px;background:#4C8C4A;border-radius:50%;
  box-shadow:-12px 6px 0 -3px #3E7A3E, 12px 6px 0 -3px #3E7A3E, 0 -14px 0 -2px #5CA157;
}

.tw-lamp-post{position:relative;width:8px;height:190px;margin-right:210px;}
.tw-lamp-post .tw-pole{position:absolute;bottom:0;left:2px;width:4px;height:190px;background:#4A4F57;}
.tw-lamp-post .tw-arm{position:absolute;top:10px;left:2px;width:34px;height:4px;background:#4A4F57;border-radius:2px;}
.tw-lamp-post .tw-head{
  position:absolute;top:2px;left:30px;width:14px;height:14px;background:#FFE9A8;border-radius:50% 50% 50% 0;
  box-shadow:0 0 12px 4px rgba(255,233,168,.55);
}

.tw-road{position:absolute;bottom:0;left:0;width:100%;height:150px;background:#4A4F57;border-top:6px solid #DADFE4;z-index:4;}
.tw-road::before{
  content:"";position:absolute;top:-6px;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,#fff 0 26px,transparent 26px 52px);opacity:.55;
}
.tw-lane-lines{
  position:absolute;top:66px;left:0;width:200%;height:14px;
  background-image:repeating-linear-gradient(90deg,#F4D35E 0 60px, transparent 60px 130px);
  animation:twScrollRoad 1.1s linear infinite;animation-play-state:paused;
}
@keyframes twScrollRoad{from{background-position-x:0;}to{background-position-x:-190px;}}
.tw-road-texture{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 10% 30%, rgba(255,255,255,.05), transparent 60%),
             radial-gradient(ellipse at 70% 70%, rgba(0,0,0,.15), transparent 60%);
}
.tw-road-detail{
  position:absolute;top:110px;left:0;width:200%;height:8px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 3px, transparent 3px 90px);
  animation:twScrollRoad .9s linear infinite;animation-play-state:paused;
}

.tw-truck-wrap{position:absolute;left:-40px;bottom:78px;width:1000px;z-index:5;}
.tw-truck-wrap.tw-drive-in{animation:twDriveIn 1.4s ease-out forwards;}
.tw-truck-wrap.tw-bouncing{animation:twBounce .5s ease-in-out infinite;}
@keyframes twDriveIn{from{transform:translateX(-1100px);}to{transform:translateX(0);}}
@keyframes twBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

#twTruckSvg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 4px rgba(0,0,0,.25));}

.tw-scene #tw-rear-wheel-1,
.tw-scene #tw-rear-wheel-2,
.tw-scene #tw-front-wheel{transform-box:fill-box;transform-origin:center;animation:twSpin .55s linear infinite;animation-play-state:paused;}
@keyframes twSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.tw-scene #tw-speed-lines{animation:twSpeedFade .5s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:left center;}
@keyframes twSpeedFade{from{opacity:.35;transform:scaleX(.85);}to{opacity:1;transform:scaleX(1);}}

.tw-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.18) 100%);}

.tw-scene.tw-driving .tw-clouds,
.tw-scene.tw-driving .tw-birds,
.tw-scene.tw-driving .tw-hills-far,
.tw-scene.tw-driving .tw-hills-near,
.tw-scene.tw-driving .tw-skyline,
.tw-scene.tw-driving .tw-midtown,
.tw-scene.tw-driving .tw-roadside,
.tw-scene.tw-driving .tw-lane-lines,
.tw-scene.tw-driving .tw-road-detail,
.tw-scene.tw-driving #tw-rear-wheel-1,
.tw-scene.tw-driving #tw-rear-wheel-2,
.tw-scene.tw-driving #tw-front-wheel,
.tw-scene.tw-driving #tw-speed-lines{animation-play-state:running;}

/* Live GPS ping on the cab roof — a small radar pulse that says "this
   truck is always trackable," not just decoration. */
.tw-scene #tw-gps-ping-a,
.tw-scene #tw-gps-ping-b{animation:twGpsPing 2s ease-out infinite;animation-play-state:paused;transform-box:fill-box;transform-origin:center;}
.tw-scene #tw-gps-ping-b{animation-delay:1s;}
.tw-scene.tw-driving #tw-gps-ping-a,
.tw-scene.tw-driving #tw-gps-ping-b{animation-play-state:running;}

@keyframes twGpsPing{
  0%{transform:scale(1);opacity:.85;}
  100%{transform:scale(4.2);opacity:0;}
}

/* "Live GPS Tracking" badge — plain-language confirmation, sits in the
   open sky on the left, clear of the truck and the brand tag. The pin
   icon pulses (rather than a plain dot) to read as "this truck's location
   is live" at a glance. */
.tw-gps-badge{
  position:absolute;top:6%;left:3%;z-index:6;display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#16A34A 0%,#22C55E 55%,#4ADE80 100%);
  border:1px solid rgba(255,255,255,.5);border-radius:22px;
  padding:8px 16px 8px 12px;
  box-shadow:0 10px 22px -10px rgba(22,163,74,.65), 0 0 0 4px rgba(34,197,94,.16);
}
.tw-gps-pin-wrap{position:relative;width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.tw-gps-pin-ring{
  position:absolute;inset:-4px;border-radius:50%;background:rgba(255,255,255,.65);
  animation:twGpsDotPing 2s ease-out infinite;
}
.tw-gps-pin-icon{position:relative;width:15px;height:15px;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));}
@keyframes twGpsDotPing{
  0%{transform:scale(1);opacity:.9;}
  100%{transform:scale(2.8);opacity:0;}
}
.tw-gps-badge span{
  font-family:var(--font-display, 'Oswald', sans-serif);font-weight:700;font-size:.78rem;
  color:#fff;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
@media (max-width:640px){
  .tw-gps-badge{top:2%;left:3%;padding:5px 10px 5px 8px;gap:5px;border-radius:16px;}
  .tw-gps-pin-wrap{width:10px;height:10px;}
  .tw-gps-pin-icon{width:9px;height:9px;}
  .tw-gps-badge span{font-size:.42rem;}
}

/* Brand tag — logo + tagline, top-right. Purely decorative (the real <h1>
   lives in the section below for SEO/accessibility). Tagline sits right
   under the logo on a single line, sized to roughly match its width. */
.tw-brand-tag{position:absolute;top:3%;right:2%;width:min(270px,32%);z-index:6;text-align:center;pointer-events:none;}
.tw-brand-tag-logo{width:min(190px,24vw);height:auto;margin:0 auto;display:block;filter:drop-shadow(0 2px 6px rgba(255,255,255,.8));}
.tw-brand-tag-line{
  margin:4px 0 0;font-family:var(--font-display, 'Oswald', sans-serif);font-weight:700;font-style:italic;
  font-size:.82rem;line-height:1.2;white-space:nowrap;color:#15161B;letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 2px 12px rgba(255,255,255,.7);
}
@media (max-width:640px){
  .tw-brand-tag{top:1%;right:3%;width:min(155px,40%);}
  .tw-brand-tag-logo{width:min(95px,25vw);}
  .tw-brand-tag-line{font-size:.58rem;margin-top:2px;}
}

/* Mini overlay quick-action cards previously lived here (Quick Freight
   Quote + Track Shipment). They've moved into the standard .hero-panel
   below the animated scene — see .hero-panel / .quote-form in style.css —
   so they read cleanly on both mobile and desktop instead of floating as
   a small overlay on the truck illustration. */