/* ═══════════════════════════════════════════════════════════════
   landing-animate.css
   Scroll-reveal + Hero load-in + Parallax layers
   Подключить ПОСЛЕ всех остальных landing-*.css
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. KEYFRAMES ───────────────────────────────────────────── */
@keyframes land-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes land-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes land-scale-in {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(.975);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ── 2. HERO — анимации при загрузке (CSS-only, без JS) ─────── */
.hero-eyebrow {
  animation: land-fade-up .72s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .06s;
}

.hero-title {
  animation: land-fade-up .82s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .18s;
}

.hero-sub {
  animation: land-fade-up .78s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .32s;
}

.hero-actions {
  animation: land-fade-up .74s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .46s;
}

.hero-social-proof {
  animation: land-fade-in .8s ease both;
  animation-delay: .62s;
}

.demo-card {
  animation: land-scale-in .95s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .26s;
}

/* ── 3. SCROLL-REVEAL — базовое скрытое состояние ──────────── */
/*
  JS добавляет .reveal-item к целевым элементам при инициализации.
  IntersectionObserver добавляет .is-visible когда элемент входит во viewport.
*/
.reveal-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.992);
  transition:
    opacity .88s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger-задержки (JS ставит data-stagger="0..7") */
.reveal-item[data-stagger="0"] { transition-delay: 0ms; }
.reveal-item[data-stagger="1"] { transition-delay: 70ms; }
.reveal-item[data-stagger="2"] { transition-delay: 140ms; }
.reveal-item[data-stagger="3"] { transition-delay: 210ms; }
.reveal-item[data-stagger="4"] { transition-delay: 280ms; }
.reveal-item[data-stagger="5"] { transition-delay: 350ms; }
.reveal-item[data-stagger="6"] { transition-delay: 420ms; }
.reveal-item[data-stagger="7"] { transition-delay: 490ms; }

/* Вариант для заголовков — чуть более выраженный сдвиг */
.reveal-item.reveal-title {
  transform: translate3d(0, 30px, 0) scale(.99);
}

.reveal-item.reveal-title.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* ── 4. NAV — тень при скролле ──────────────────────────────── */
.land-nav {
  transition: box-shadow .28s ease;
}

.land-nav.is-scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, .08);
}

[data-theme="dark"] .land-nav.is-scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

/* ── 5. REDUCED MOTION — полностью отключаем анимации ───────── */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-title,
  .hero-sub,
  .hero-actions,
  .hero-social-proof,
  .demo-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}