/* ============================================
   Анимации по секциям — работают на всём лендинге
   ============================================ */

:root {
  --aos-duration: 0.75s;
  --aos-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* До инициализации JS контент виден */
html:not(.aos-ready) .aos-item {
  opacity: 1;
  transform: none;
}

/* Скрытое состояние элементов в неактивной секции */
html.aos-ready .aos-section:not(.aos-active) .aos-item {
  opacity: 0;
}

html.aos-ready .aos-section[data-aos="up"]:not(.aos-active) .aos-item {
  transform: translate3d(0, 36px, 0);
}

html.aos-ready .aos-section[data-aos="left"]:not(.aos-active) .aos-item {
  transform: translate3d(-36px, 0, 0);
}

html.aos-ready .aos-section[data-aos="right"]:not(.aos-active) .aos-item {
  transform: translate3d(36px, 0, 0);
}

html.aos-ready .aos-section[data-aos="scale"]:not(.aos-active) .aos-item {
  transform: scale(0.94);
}

/* Keyframes */
@keyframes aos-up {
  from { opacity: 0; transform: translate3d(0, 36px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aos-left {
  from { opacity: 0; transform: translate3d(-36px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aos-right {
  from { opacity: 0; transform: translate3d(36px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aos-scale {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Активная секция — каскадная анимация дочерних элементов */
html.aos-ready .aos-section.aos-active[data-aos="up"] .aos-item {
  animation: aos-up var(--aos-duration) var(--aos-ease) both !important;
  animation-delay: calc(var(--aos-i, 0) * 0.07s) !important;
}

html.aos-ready .aos-section.aos-active[data-aos="left"] .aos-item {
  animation: aos-left var(--aos-duration) var(--aos-ease) both !important;
  animation-delay: calc(var(--aos-i, 0) * 0.07s) !important;
}

html.aos-ready .aos-section.aos-active[data-aos="right"] .aos-item {
  animation: aos-right var(--aos-duration) var(--aos-ease) both !important;
  animation-delay: calc(var(--aos-i, 0) * 0.07s) !important;
}

html.aos-ready .aos-section.aos-active[data-aos="scale"] .aos-item {
  animation: aos-scale var(--aos-duration) var(--aos-ease) both !important;
  animation-delay: calc(var(--aos-i, 0) * 0.07s) !important;
}

/* Шапка */
@keyframes aos-header {
  from { opacity: 0; transform: translate3d(0, -14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

.aos-header {
  animation: aos-header 0.65s var(--aos-ease) both;
}

/* Стрелка разделителя */
@keyframes aos-arrow {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.aos-section.aos-active .comparison__arrow {
  animation: aos-arrow 0.65s var(--aos-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  html.aos-ready .aos-section:not(.aos-active) .aos-item,
  html.aos-ready .aos-section.aos-active .aos-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .aos-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}