/* =========================================================
   ТРАКИЯ VTC — анимации
   ========================================================= */

/* ---------- Driving truck along the hero road ---------- */
.truck-drive{
  position:absolute;
  bottom:14px;
  left:-260px;
  width:220px;
  animation: drive-across 13s linear infinite;
  will-change: transform;
}
@keyframes drive-across{
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 300px)); }
}

.truck-drive .wheel{
  transform-origin:center;
  animation: wheel-spin 0.6s linear infinite;
}

@keyframes wheel-spin{
  to{ transform: rotate(360deg); }
}

.truck-drive .headlight-beam{
  animation: beam-pulse 2.4s ease-in-out infinite;
}
@keyframes beam-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.9; }
}

.truck-drive .taillight{
  animation: tail-blink 1.6s ease-in-out infinite;
}
@keyframes tail-blink{
  0%,100%{ opacity:.7; }
  50%{ opacity:1; }
}

/* subtle bounce as the truck rolls over the tarmac */
.truck-drive .truck-body{
  animation: truck-bounce 0.5s ease-in-out infinite;
}
@keyframes truck-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1.5px); }
}

/* ---------- Scrolling road dashes (used in hero-road strip) ---------- */
.road-dashes{
  position:absolute; left:0; right:0; bottom:36px;
  height:6px;
  background-image: repeating-linear-gradient(90deg, var(--line-yellow) 0 40px, transparent 40px 80px);
  animation: dash-scroll 1.1s linear infinite;
  opacity:.85;
}
@keyframes dash-scroll{
  from{ background-position-x:0; }
  to{ background-position-x:-80px; }
}

/* ---------- Distant parallax traffic (small trucks passing opposite direction) ---------- */
.traffic-far{
  position:absolute; bottom:66px; left:0; right:0; height:20px; overflow:hidden;
}
.traffic-far .car{
  position:absolute;
  width:34px; height:12px;
  background:var(--asphalt-600);
  border-radius:2px;
  right:-60px;
  animation: drive-reverse 6s linear infinite;
}
.traffic-far .car::after{
  content:"";
  position:absolute; left:-4px; top:3px;
  width:4px; height:4px; border-radius:50%;
  background:var(--tail-red);
  box-shadow:0 0 6px 1px var(--tail-red);
}
.traffic-far .car:nth-child(2){ animation-delay:2s; top:0;}
.traffic-far .car:nth-child(3){ animation-delay:4.2s; top:6px;}
@keyframes drive-reverse{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(calc(-100vw - 100px)); }
}

/* ---------- Headlight glow sweep across hero background ---------- */
.headlight-sweep{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(600px 240px at var(--sweep-x,20%) 88%, rgba(255,197,48,.16), transparent 70%);
  transition: background-position .1s linear;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}
.reveal-stagger.in-view > *{
  animation: fade-up .6s ease forwards;
}
.reveal-stagger.in-view > *:nth-child(1){ animation-delay:.02s; }
.reveal-stagger.in-view > *:nth-child(2){ animation-delay:.10s; }
.reveal-stagger.in-view > *:nth-child(3){ animation-delay:.18s; }
.reveal-stagger.in-view > *:nth-child(4){ animation-delay:.26s; }
.reveal-stagger.in-view > *:nth-child(5){ animation-delay:.34s; }
.reveal-stagger.in-view > *:nth-child(6){ animation-delay:.42s; }
@keyframes fade-up{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Route map animated dashed path ---------- */
.route-path{
  stroke-dasharray: 8 8;
  animation: path-flow 2.2s linear infinite;
}
@keyframes path-flow{
  to{ stroke-dashoffset:-160; }
}
.route-city{
  animation: city-pulse 2.4s ease-in-out infinite;
}
@keyframes city-pulse{
  0%,100%{ r:5; opacity:1; }
  50%{ r:7; opacity:.65; }
}

/* ---------- Stat counters get a light flicker on load, like a dashboard odometer ---------- */
.odometer{
  display:inline-block;
}

/* ---------- Nav underline handled in style.css; add smooth mobile menu icon rotation ---------- */
.nav-toggle svg{ transition: transform .25s ease; }
.nav-toggle.open svg{ transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce){
  .truck-drive, .road-dashes, .traffic-far .car, .route-path, .route-city{ animation:none !important; }
}