/* ══════════════════════════════════════════════════════
   GARANTA GROUP — Animations
   Карточки ВСЕГДА видимы. Анимации — только эффект.
   ══════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* ── Scroll-triggered fade-up ──────────────────────────
   Элементы с .fade-up изначально прозрачны.
   Когда JS добавляет .visible — плавно появляются.
   Если JS не сработал — элементы остаются видимыми
   через запасной таймер в main.js.
───────────────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered cards inside visible sections ── */
.fade-up.visible .card { animation: fadeUp .5s ease backwards; }
.fade-up.visible .card:nth-child(1)  { animation-delay: .05s; }
.fade-up.visible .card:nth-child(2)  { animation-delay: .12s; }
.fade-up.visible .card:nth-child(3)  { animation-delay: .19s; }
.fade-up.visible .card:nth-child(4)  { animation-delay: .26s; }
.fade-up.visible .card:nth-child(5)  { animation-delay: .33s; }
.fade-up.visible .card:nth-child(6)  { animation-delay: .40s; }

/* ── Hero: анимации запускаются сразу ── */
.hero-content { animation: slideRight 1s ease both; }
.hero-visual  { animation: slideLeft  1s ease .18s both; }

/* ── Floating pills (анимация уже в style.css) ── */

/* ── Подсветка кнопки CTA ── */
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 6px 20px rgba(230,57,70,.3); }
  50%      { box-shadow: 0 12px 36px rgba(230,57,70,.55); }
}
.hero-cta { animation: ctaGlow 2.5s ease-in-out infinite; }

/* ── Пульс WA кнопки ── */
@keyframes waBounce {
  0%, 90%, 100% { transform: scale(1); }
  45%            { transform: scale(1.06); }
}
.wa-float { animation: waBounce 4s ease-in-out infinite; }

/* ── Числа: анимация счётчика ── */
.numbers-section .number-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s ease;
}
.numbers-section.visible .number-item { opacity: 1; transform: translateY(0); }
.numbers-section.visible .number-item:nth-child(1) { transition-delay: .0s; }
.numbers-section.visible .number-item:nth-child(2) { transition-delay: .1s; }
.numbers-section.visible .number-item:nth-child(3) { transition-delay: .2s; }
.numbers-section.visible .number-item:nth-child(4) { transition-delay: .3s; }

/* ── Маршруты: появление ── */
.routes-list li {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity .38s ease, transform .38s ease,
              border-color .28s, background .28s;
}
.directions-section.visible .routes-list li { opacity: 1; transform: translateX(0); }
.directions-section.visible .routes-list li:nth-child(1) { transition-delay: .04s; }
.directions-section.visible .routes-list li:nth-child(2) { transition-delay: .09s; }
.directions-section.visible .routes-list li:nth-child(3) { transition-delay: .14s; }
.directions-section.visible .routes-list li:nth-child(4) { transition-delay: .19s; }
.directions-section.visible .routes-list li:nth-child(5) { transition-delay: .24s; }
.directions-section.visible .routes-list li:nth-child(6) { transition-delay: .29s; }
.directions-section.visible .routes-list li:nth-child(7) { transition-delay: .34s; }
.directions-section.visible .routes-list li:nth-child(8) { transition-delay: .39s; }

/* ── Иконки карточки меняют цвет при наведении ── */
.card:hover .card-icon path,
.card:hover .card-icon circle,
.card:hover .card-icon rect {
  stroke: var(--red);
  transition: stroke .3s ease;
}

/* ── Форма: успешная анимация ── */
.fc-success {
  animation: fadeUp .45s ease both;
}

/* ── Фон Hero: плавное движение ── */
@keyframes heroBgShift {
  0%   { background-position: 0%   60%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 0%   60%; }
}
.hero {
  background-size: 200% 200%;
  animation: heroBgShift 14s ease-in-out infinite;
}

/* ── Заголовок при скролле ── */
.site-header { transition: box-shadow .3s ease, background .3s ease; }

/* ── Hover: стрелка в маршруте ── */
.routes-list li .route-arrow { transition: transform .25s ease, color .25s ease; }
.routes-list li:hover .route-arrow { transform: translateX(5px); }

/* ── Бегущая строка клиентов ── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero: анимация фона (тёмная тема) ── */
@keyframes heroBgShiftDark {
  0%   { background-position: 0%   60%; }
  50%  { background-position: 100% 40%; }
  100% { background-position: 0%   60%; }
}