/* ==========================================================================
   VAJ MOTORS — Анимации
   ========================================================================== */

/* ---------- Появление при скролле ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="zoom"]  { transform: scale(.94); }

/* Каскад для детей контейнера */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
[data-reveal-group].is-in > *            { opacity: 1; transform: none; }
[data-reveal-group].is-in > *:nth-child(1) { transition-delay: .00s; }
[data-reveal-group].is-in > *:nth-child(2) { transition-delay: .07s; }
[data-reveal-group].is-in > *:nth-child(3) { transition-delay: .14s; }
[data-reveal-group].is-in > *:nth-child(4) { transition-delay: .21s; }
[data-reveal-group].is-in > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-group].is-in > *:nth-child(6) { transition-delay: .35s; }
[data-reveal-group].is-in > *:nth-child(7) { transition-delay: .42s; }
[data-reveal-group].is-in > *:nth-child(8) { transition-delay: .49s; }
[data-reveal-group].is-in > *:nth-child(9) { transition-delay: .56s; }

/* ---------- Стартовая анимация героя ---------- */
.hero [data-intro] {
  opacity: 0;
  transform: translateY(24px);
  animation: intro .9s var(--ease) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes intro {
  to { opacity: 1; transform: none; }
}

/* ---------- Ключевые кадры ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

@keyframes ping {
  0%        { transform: scale(1);    opacity: .7; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Медленный проезд камеры по фото в шапке */
@keyframes heroPan {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

@keyframes shimmer {
  from { background-position: -180% 0; }
  to   { background-position:  180% 0; }
}

/* ---------- Утилиты ---------- */
.float { animation: float 5.5s var(--ease) infinite; }

/* Мигающая «искра» у надзаголовка */
.spark {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px 2px rgba(255, 90, 95, .8);
  animation: pulse 2.2s var(--ease) infinite;
}

/* Скелетон-мерцание для незагруженных фото */
.skeleton {
  background: linear-gradient(100deg, #14171c 30%, #1d2128 50%, #14171c 70%);
  background-size: 220% 100%;
  animation: shimmer 1.9s linear infinite;
}

/* Спиннер на кнопке */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy svg { animation: spin .8s linear infinite; }

/* Индикатор прогресса чтения страницы */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 101;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  pointer-events: none;
}