/* =============================================================
   ANIMATIONS — заполняем в этапе 8 (motion-system).
   Сейчас — только заглушки и базовые keyframes.
   ============================================================= */

/* =============================================================
   REVEAL on scroll (skill 7.4)
   ============================================================= */
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--d-slow) var(--ease-out),
    transform var(--d-slow) var(--ease-out);
}

.reveal.is-revealed,
.reveal-stagger.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-revealed > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-revealed > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-revealed > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-revealed > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-revealed > *:nth-child(8) { transition-delay: 560ms; }

/* =============================================================
   MASK-REVEAL по словам (фишка #6 — letter-by-letter SOTD pattern)
   H1 разбит на <span class="word">. Каждое слово открывается
   через clip-path, stagger 80ms, ease-reveal 600ms.
   ============================================================= */
.hero__title {
  /* Защита: пока JS не разбил H1 на слова, текст всё равно виден */
  opacity: 1;
}

.word {
  display: inline-block;
  position: relative;
  clip-path: inset(0 100% 0 0);
  animation: word-reveal 600ms var(--ease-reveal) both;
}

@keyframes word-reveal {
  to { clip-path: inset(0 0 0 0); }
}

.word:nth-child(1) { animation-delay: 0ms; }
.word:nth-child(2) { animation-delay: 80ms; }
.word:nth-child(3) { animation-delay: 160ms; }
.word:nth-child(4) { animation-delay: 240ms; }
.word:nth-child(5) { animation-delay: 320ms; }
.word:nth-child(6) { animation-delay: 400ms; }
.word:nth-child(7) { animation-delay: 480ms; }

/* Универсальный mask-reveal (для других мест) */
.mask-reveal {
  display: inline-block;
  overflow: hidden;
}

.mask-reveal__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--d-slow) var(--ease-reveal);
}

.mask-reveal.is-revealed .mask-reveal__inner {
  transform: translateY(0);
}

/* =============================================================
   IMAGE CLIP-PATH REVEAL (sweep сверху)
   ============================================================= */
.img-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-page) var(--ease-out);
}

.img-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* =============================================================
   MARQUEE (бесконечный скролл текста)
   ============================================================= */
.marquee {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  gap: 64px;
  animation: marquee 60s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =============================================================
   PULSE (для floating-WA при первой загрузке)
   ============================================================= */
@keyframes pulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50%      { box-shadow: 0 0 0 8px rgba(var(--rgb-accent), 0.25), var(--shadow-md); }
}

.wa-float.is-pulsing {
  animation: pulse 1.6s var(--ease-in-out) 0s 3;
}

/* Лёгкая постоянная пульсация иконки WhatsApp (пока кнопка видна) */
@keyframes wa-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(37, 211, 102, 0.45); }
  70%  { transform: scale(1.06); box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(37, 211, 102, 0); }
}
.wa-float.is-visible .wa-float__avatar {
  animation: wa-pulse 2.2s var(--ease-in-out) infinite;
}

/* =============================================================
   LAZY-LOAD FADE-IN (фишка #10 — Aman pattern, 1200ms)
   ============================================================= */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity var(--d-page) var(--ease-reveal);
}

img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* =============================================================
   VIEW TRANSITIONS API (фишка #12 — нативный morph)
   ============================================================= */
@view-transition {
  navigation: auto;
}

/* Плавность morph настраиваем через ::view-transition-* псевдоэлементы */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 600ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================
   REDUCE MOTION — отключаем всё движение
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .mask-reveal__inner,
  .img-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }

  .marquee__track,
  .wa-float.is-pulsing,
  .wa-float.is-visible .wa-float__avatar {
    animation: none;
  }
}