/* =========================================================
  animations.css
  Фінальний пакет анімацій для лендингу “Лісові пригоди”
  Версія 10

  Що дає:
  - плавну появу елементів при скролі;
  - stagger-появу карток;
  - м’який hover-lift;
  - легке “плавання” декоративних елементів;
  - делікатний pulse для важливих акцентів;
  - shine-ефект для головних кнопок;
  - акуратне мерехтіння ватри;
  - підтримку prefers-reduced-motion.

  Важливо:
  Цей файл не змінює структуру сайту.
  Він працює через класи, які JS додає автоматично.
========================================================= */

/* =========================================================
  1. Reveal-on-scroll
  Базова поява елементів при скролі.
========================================================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Варіації появи */
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.72s ease,
    transform 0.72s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 0.76s ease,
    transform 0.76s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Затримки */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }

/* =========================================================
  2. Stagger
  Для груп карток. JS автоматично ставить --stagger-index.
========================================================= */

.stagger-item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.58s ease,
    transform 0.58s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--stagger-index, 0) * 72ms);
  will-change: opacity, transform;
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
  3. Hover-lift
  Делікатне підняття карток і кнопок.
========================================================= */

.hover-lift {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-lift:active {
  transform: translateY(-1px);
}

/* Якщо елемент уже має власний hover у CSS, цей клас не заважає,
   бо основні блоки вже мають transition. */

/* =========================================================
  4. Soft float
  Легке плавання декоративних елементів.
========================================================= */

@keyframes softFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
  }

  50% {
    transform: translate3d(0, -8px, 0) rotate(var(--r, 0deg));
  }
}

.soft-float {
  animation: softFloat 8s ease-in-out infinite;
}

.soft-float-slow {
  animation: softFloat 12s ease-in-out infinite;
}

.soft-float-fast {
  animation: softFloat 6s ease-in-out infinite;
}

/* =========================================================
  5. Soft pulse
  Для сонця, щита, важливих акцентів.
========================================================= */

@keyframes softPulse {
  0%, 100% {
    opacity: 0.82;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

.soft-pulse {
  animation: softPulse 6s ease-in-out infinite;
}

/* =========================================================
  6. Button shine
  Легкий блиск при наведенні на головні кнопки.
========================================================= */

.btn-primary,
.final-compact-btn,
.backpack-btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after,
.final-compact-btn::after,
.backpack-btn-primary::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 52%;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

.btn-primary:hover::after,
.final-compact-btn:hover::after,
.backpack-btn-primary:hover::after {
  animation: buttonShine 0.86s ease;
}

@keyframes buttonShine {
  0% {
    left: -70%;
    opacity: 0;
  }

  20% {
    opacity: 0.65;
  }

  100% {
    left: 125%;
    opacity: 0;
  }
}

/* =========================================================
  7. Hero: ватра, сонце, сцена
========================================================= */

.scene-sun {
  animation: softPulse 7s ease-in-out infinite;
}

.flame {
  animation: flameFlicker 2.4s ease-in-out infinite;
  transform-origin: 50% 82%;
}

@keyframes flameFlicker {
  0%, 100% {
    transform: rotate(-45deg) scale(1);
    filter: brightness(1);
  }

  35% {
    transform: rotate(-43deg) scale(1.045);
    filter: brightness(1.08);
  }

  70% {
    transform: rotate(-47deg) scale(0.985);
    filter: brightness(0.98);
  }
}

.scene-tent {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.hero-visual:hover .scene-tent {
  transform: translateY(-3px);
}

.hero-visual:hover .flame {
  filter: brightness(1.12);
}

/* =========================================================
  8. Route / dotted line movement
  Для дорожніх декоративних елементів.
========================================================= */

@keyframes dashMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 32px 0;
  }
}

.dash-move {
  animation: dashMove 4s linear infinite;
}

/* =========================================================
  9. Photo reveal / hover
========================================================= */

.history-main-photo,
.safety-photo-visual,
.camp-scheme-frame {
  transition:
    transform 0.42s ease,
    filter 0.42s ease,
    box-shadow 0.42s ease;
}

.history-visual-card:hover .history-main-photo,
.safety-photo-card:hover .safety-photo-visual,
.camp-scheme-card:hover .camp-scheme-frame {
  transform: scale(1.012);
  filter: saturate(1.04) contrast(1.02);
}

/* =========================================================
  10. Active anchor target
  Коли користувач переходить за якірним посиланням, секція
  коротко підсвічується. Працює через :target.
========================================================= */

.site-flow section:target {
  animation: targetGlow 1.4s ease;
}

@keyframes targetGlow {
  0% {
    filter: brightness(1.03);
  }

  100% {
    filter: brightness(1);
  }
}

/* =========================================================
  11. Автоматичне призначення soft-float для існуючого декору
========================================================= */

.backpack-decor-one,
.backpack-decor-two,
.logistics-road-bg-one,
.logistics-road-bg-two,
.decor-tent,
.decor-peak,
.decor-values,
.decor-road,
.decor-backpack,
.decor-shield {
  will-change: transform;
}

.backpack-decor-one,
.logistics-road-bg-two,
.decor-tent,
.decor-values {
  animation: softFloat 11s ease-in-out infinite;
}

.backpack-decor-two,
.logistics-road-bg-one,
.decor-road,
.decor-backpack,
.decor-shield {
  animation: softFloat 8s ease-in-out infinite;
}

/* =========================================================
  12. Accessibility
  Якщо користувач вимкнув анімації в системі — поважаємо це.
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
  }
}