/**
 * Секционные reveal (иерархия) + pin/scrub compare.
 */

:root {
  --reveal-stagger: 100ms;
  --reveal-duration: 0.52s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-step {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: calc(var(--reveal-step-delay, 0) * 1ms);
  will-change: opacity, transform;
}

.reveal-step.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-sequence].is-sequence-active > .reveal-step,
[data-reveal-sequence].is-sequence-active .reveal-step {
  /* класс is-revealed ставит JS */
}

/* Pin: compare при скролле линейки */
@media (min-width: 1024px) {
  .site-premium .ladder-split[data-scrub-pin] {
    align-items: flex-start;
  }

  .site-premium .ladder-split[data-scrub-pin] .ladder-split__col--compare {
    position: sticky;
    top: calc(var(--header-h, 76px) + 20px);
    align-self: flex-start;
  }
}

.site-premium .ladder-path__node {
  transition:
    color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.site-premium .ladder-path__node.is-scrub-lit {
  color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45, 128, 194, 0.18);
}

.site-premium .ladder-path__node--pro.is-scrub-lit {
  background: linear-gradient(135deg, var(--primary-color), var(--info-color));
  color: #fff;
}

.site-premium .compare[data-scrub-compare].is-scrub-active .compare__handle {
  box-shadow: 0 0 0 2px rgba(45, 128, 194, 0.35), 0 8px 24px rgba(45, 128, 194, 0.25);
}

.site-premium .trust-marquees__wrap {
  width: 100%;
}

/* Compare «До/после» — один блок с карточкой MVP (шаг 1) */
.site-premium .ladder-compare--side.no-react-reveal {
  transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-premium .ladder-compare--side.no-react-reveal:not(.is-inview) .ladder-compare__head,
.site-premium .ladder-compare--side.no-react-reveal:not(.is-inview) .ladder-compare__frame {
  opacity: 0;
}

.site-premium .ladder-compare--side.no-react-reveal.is-inview .ladder-compare__head,
.site-premium .ladder-compare--side.no-react-reveal.is-inview .ladder-compare__frame {
  opacity: 1;
  transition: opacity 0.45s ease;
}

.site-premium .compare[data-scrub-compare].is-scrub-active .compare__label--pro {
  opacity: 1;
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-step {
    opacity: 1;
    transform: none;
    transition: none;
  }
}