/* МаксАвто — минимальные кастомные стили поверх Tailwind.
   Здесь только то, что неудобно делать утилитами. */

/* Плавное появление карточек */
#popular-grid > a { animation: fadeInUp .35s ease both; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Скрытие скроллбара у горизонтальных лент */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Модалки корзины/оформления (каталог) — поверх Tailwind */
.modal-overlay { position: fixed; inset: 0; z-index: 50; display: none; }
.modal-overlay.open { display: block; }
.modal-overlay .backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.modal-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 32px)); max-height: 86vh; overflow: auto;
}

/* Машинка доставки: движение по контрольным точкам маршрута (в % карты) */
@keyframes driveRoute {
  0%   { left: 9.2%;  top: 53.6%; }
  7%   { left: 17.5%;  top: 28.6%; }
  14%   { left: 31.2%;  top: 31.3%; }
  21%   { left: 45.0%;  top: 23.2%; }
  28%   { left: 56.2%;  top: 24.1%; }
  35%   { left: 67.5%;  top: 25.0%; }
  42%   { left: 85.6%;  top: 35.7%; }
  50%   { left: 86.9%;  top: 47.3%; }
  57%   { left: 84.4%;  top: 57.1%; }
  64%   { left: 75.0%;  top: 66.1%; }
  71%   { left: 70.0%;  top: 64.3%; }
  78%   { left: 55.0%;  top: 71.4%; }
  85%   { left: 42.5%;  top: 71.4%; }
  92%   { left: 31.2%;  top: 67.9%; }
  100%   { left: 13.1%;  top: 66.1%; }
}
.animate-delivery {
  position: absolute;
  animation: driveRoute var(--dur, 26s) linear infinite;
}

/* Анимации всегда активны (не отключаем при prefers-reduced-motion для машинки) */
@media (prefers-reduced-motion: reduce) {
  .animate-delivery { animation-duration: 14s; }
}