/* ============================================================
   animations.css — reveal-появление, параллакс-слои,
   деликатные idle-анимации. Всё отключается при
   prefers-reduced-motion: reduce (и тут, и в JS).
   ============================================================ */

/* ---------- Reveal: базовое состояние ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s var(--ease-out),
    transform .8s var(--ease-soft);
  will-change: opacity, transform;
}

[data-reveal='left']  { transform: translateX(-30px); }
[data-reveal='right'] { transform: translateX(30px); }
[data-reveal='scale'] { transform: translateY(14px) scale(.98); }
[data-reveal='fade']  { transform: none; }

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger: дети контейнера [data-reveal-stagger] появляются
   каскадом; задержку расставляет reveal.js (transition-delay),
   здесь — только состояния. */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s var(--ease-out),
    transform .7s var(--ease-soft);
  will-change: opacity, transform;
}

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}

/* Если JS выключен — контент должен быть виден */
.no-js [data-reveal],
.no-js [data-reveal-stagger] > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Параллакс-слои ---------- */
/* transform пишет parallax.js; здесь — только плавность
   для pointer-реакции и гарантия композитинга. */
.hero-visual [data-parallax] {
  will-change: transform;
  backface-visibility: hidden;
}

/* Мягкий «вдох» сфер в покое — едва заметно, не отвлекает */
@keyframes aw-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

@keyframes aw-float-soft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 8px; }
}

.hero-visual__circle--1 { animation: aw-float 9s var(--ease-soft) infinite; }
.hero-visual__circle--2 { animation: aw-float-soft 11s var(--ease-soft) infinite; }

.ui-card--1 { animation: aw-float 8s var(--ease-soft) infinite; }
.ui-card--2 { animation: aw-float-soft 10s var(--ease-soft) infinite; }

.hero-visual__badge { animation: aw-float 12s var(--ease-soft) infinite; }

/* Пульс точки в бейдже */
@keyframes aw-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.8); }
}

.hero-visual__badge::before { animation: aw-pulse 2.6s ease-in-out infinite; }

/* Спиннер для pending-состояния сабмита */
@keyframes aw-spin {
  to { transform: rotate(360deg); }
}

.form__submit.is-pending .btn__arrow {
  animation: aw-spin .8s linear infinite;
}

/* ---------- Reduced motion: полная остановка ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-visual [data-parallax] { transform: none !important; }

  .hero-visual__circle--1,
  .hero-visual__circle--2,
  .ui-card--1,
  .ui-card--2,
  .hero-visual__badge,
  .hero-visual__badge::before,
  .form__submit.is-pending .btn__arrow {
    animation: none !important;
  }
}