/* ==========================================================================
   Овация — лендинг. Анимации: появление при скролле, параллакс,
   наклон за курсором, «живые» пятна и овечки у окна приложения.

   Механика движения: JavaScript пишет переменные --px/--py (параллакс),
   --mx/--my (курсор), --rx/--ry (наклон), а CSS собирает из них один
   transform. Переменные --tx/--ty/--sc отвечают за появление.
   ========================================================================== */

/* ------------------------------ появление ------------------------------ */

[data-reveal] {
  opacity: 0;
  --tx: 0px;
  --ty: 26px;
  --sc: 1;
  transition:
    opacity .8s ease,
    transform .95s cubic-bezier(.16, .84, .24, 1);
  will-change: transform, opacity;
}

[data-reveal="right"] { --tx: 34px; --ty: 0px; }
[data-reveal="scale"] { --sc: .965; --ty: 30px; }
[data-reveal="left"]  { --tx: -34px; --ty: 0px; }

[data-reveal].is-in {
  opacity: 1;
  --tx: 0px;
  --ty: 0px;
  --sc: 1;
}

[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }
[data-reveal-delay="5"] { transition-delay: .45s; }
[data-reveal-delay="6"] { transition-delay: .54s; }

/* ------------------------------ сборка transform ------------------------------ */

/* Значения --px/--py/--mx/--my/--rx/--ry скрипт пишет inline в конкретный
   элемент. Кастомные свойства наследуются, поэтому без обнуления вложенные
   блоки (окно приложения, овечки) получали смещение родителя и применяли его
   второй раз — сцена «плыла» при прокрутке. Объявление ниже перебивает
   наследование, а inline-значение самого элемента остаётся в силе. */
[data-parallax],
[data-parallax-y],
[data-tilt],
[data-tilt-soft],
[data-reveal] {
  --px: 0px;
  --py: 0px;
  --mx: 0px;
  --my: 0px;
  --rx: 0deg;
  --ry: 0deg;

  transform:
    translate3d(
      calc(var(--px, 0px) + var(--mx, 0px) + var(--tx, 0px)),
      calc(var(--py, 0px) + var(--my, 0px) + var(--ty, 0px)),
      0)
    scale(var(--sc, 1))
    perspective(1400px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
}

.window img,
.media img { transform: translateZ(0); }

/* ------------------------------ овечки ------------------------------ */
/* Овца на кромке окна «спит» и потому стоит неподвижно — иначе она
   отрывалась бы от края окна. Две другие еле заметно покачиваются. */

.stage__sheep--eat  { animation: sheepGraze 6.4s ease-in-out infinite; }
.stage__sheep--walk { animation: sheepStep 5.2s ease-in-out infinite; animation-delay: -1.6s; }

/* ------------------------------ пятна ------------------------------ */

.blob--orange { animation: blobDriftA 22s ease-in-out infinite; }
.blob--blue   { animation: blobDriftB 26s ease-in-out infinite; }

/* ------------------------------ keyframes ------------------------------ */

@keyframes sheepGraze {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes sheepStep {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(47, 158, 99, 0); opacity: .9; }
  100% { box-shadow: 0 0 0 0 rgba(47, 158, 99, 0); opacity: 1; }
}

@keyframes blobDriftA {
  0%, 100% { translate: 0 0; scale: 1; }
  50%      { translate: 36px 26px; scale: 1.08; }
}

@keyframes blobDriftB {
  0%, 100% { translate: 0 0; scale: 1; }
  50%      { translate: -30px 34px; scale: 1.06; }
}

@keyframes agentSwap {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

@keyframes chipPop {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.agent-view__rules li { animation: chipPop .4s var(--ease) both; }
.agent-view__rules li:nth-child(2) { animation-delay: .05s; }
.agent-view__rules li:nth-child(3) { animation-delay: .1s; }
.agent-view__rules li:nth-child(4) { animation-delay: .15s; }
.agent-view__rules li:nth-child(5) { animation-delay: .2s; }
.agent-view__rules li:nth-child(6) { animation-delay: .25s; }

/* ------------------------------ доступность ------------------------------ */

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  [data-reveal] { opacity: 1; --tx: 0px; --ty: 0px; --sc: 1; }
  [data-parallax],
  [data-tilt],
  [data-tilt-soft] { transform: none !important; }
}