/* ============================================================
   GAGOC — 04 MARQUEE (CSS)
   Куди: Bricks → Settings → Custom CSS (глобально).
   Дві стрічки: вертикальні колонки відгуків + горизонтальні лого.
   CSS-only, без бібліотек.
   ============================================================ */

/* --- ВЕРТИКАЛЬНІ КОЛОНКИ ВІДГУКІВ ---
   Розмітка в Bricks:
   .reviews-marquee-container
     └ .marquee-column.up   (1-ша колонка)
     └ .marquee-column.down (2-га колонка)
   Усередині кожної — контент ПОВТОРЕНИЙ ДВІЧІ (для безшовного циклу). */
@keyframes scroll-up   { 0% { transform: translateY(0) translateZ(0); }    100% { transform: translateY(-50%) translateZ(0); } }
@keyframes scroll-down { 0% { transform: translateY(-50%) translateZ(0); } 100% { transform: translateY(0) translateZ(0); } }

.marquee-column { will-change: transform; }
.marquee-column.up   { animation: scroll-up   30s linear infinite; }
.marquee-column.down { animation: scroll-down 30s linear infinite; }
.reviews-marquee-container { overflow: hidden; }
.reviews-marquee-container:hover .marquee-column { animation-play-state: paused; }

/* --- ГОРИЗОНТАЛЬНА СТРІЧКА ЛОГО (бренди / страхові) ---
   Розмітка: .logo-track всередині overflow:hidden контейнера,
   список лого ПОВТОРЕНИЙ ДВІЧІ. */
@keyframes scroll-infinite-x { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.animate-scroll-infinite { animation: scroll-infinite-x 60s linear infinite; will-change: transform; }

/* Варіант з оригіналу (вужчий хід) */
@keyframes marquee { 0% { transform: translateX(5%) translateZ(0); } 100% { transform: translateX(-45%) translateZ(0); } }
.animate-marquee { animation: marquee 20s linear infinite; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .marquee-column.up, .marquee-column.down,
  .animate-scroll-infinite, .animate-marquee { animation: none !important; }
}