/* ===== AEMIX · ABOUT WOW (truck FIXED: direction + size) ===== */

/* HERO shine */
.about-hero{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(165,180,252,.14);
  box-shadow: 0 0 0 1px rgba(165,180,252,.06) inset, 0 20px 80px rgba(0,0,0,.55);
}
.about-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(1200px 420px at 10% 0%, rgba(124,58,237,.22), transparent 55%),
    radial-gradient(900px 380px at 90% 20%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(120deg, transparent 30%, rgba(255,255,255,.10) 44%, transparent 58%);
  transform: translateX(-40%) skewX(-12deg);
  animation: aemixShine 5.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes aemixShine{
  0%{opacity:.25; transform:translateX(-55%) skewX(-12deg)}
  35%{opacity:.55}
  70%{opacity:.30; transform:translateX(35%) skewX(-12deg)}
  100%{opacity:.25; transform:translateX(-55%) skewX(-12deg)}
}

/* ===== ROUTE ===== */
.aemix-route{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(165,180,252,.14);
  background: rgba(10,16,34,.55);
  backdrop-filter: blur(10px);
  overflow:hidden;
  position:relative;
}
.aemix-route::after{
  content:"";
  position:absolute;
  left:16px; right:16px;
  top:50%;
  height:2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(56,189,248,.0),
    rgba(56,189,248,.35),
    rgba(124,58,237,.35),
    rgba(56,189,248,.0)
  );
  opacity:.9;
}

/* Stops */
.aemix-stop{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 12px;
  border-radius:16px;
  background: rgba(15,23,42,.55);
  border:1px solid rgba(165,180,252,.12);
  z-index:2;
}
.aemix-stop b{
  font-weight:800;
  letter-spacing:.2px;
}

/* ===== TRUCK (FIXED) ===== */
.aemix-truck{
  position:absolute;
  left:16px;
  top:50%;

  /* 🔥 ВАЖНО */
  transform:
    translateY(-50%)
    scaleX(-1)     /* ← зеркалим, чтобы ехала КАБИНОЙ вперёд */
    scale(1.35);   /* ← делаем заметно больше */

  font-size:22px; /* контроль размера иконки */
  z-index:3;

  animation: aemixDrive 10.5s cubic-bezier(.4,.0,.2,1) infinite;
  filter: drop-shadow(0 8px 18px rgba(56,189,248,.28));
}

/* Медленное, солидное движение */
@keyframes aemixDrive{
  0%{
    left:18px;
    opacity:.35;
  }
  12%{
    opacity:1;
  }
  50%{
    left: calc(50% - 12px);
    opacity:1;
  }
  88%{
    opacity:1;
  }
  100%{
    left: calc(100% - 44px);
    opacity:.35;
  }
}

/* ===== MOBILE ROUTE FIX ===== */

@media (max-width: 720px){
  .about-hero{ border-radius: 18px; }
}

@media (max-width: 560px){
  .aemix-route{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .aemix-route .route-left,
  .aemix-route .route-mid,
  .aemix-route .route-right{
    width: 100%;
  }
  .aemix-route .route-mid{ justify-content: center; }
  .aemix-route .route-right{ justify-content: flex-end; }

  .aemix-truck{ transform: scale(.9); transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce){
  .about-hero::before{ animation: none !important; }
}