/* Плавная сборка пяти глав при прокрутке. Файл изолирован для простого отката. */
@media (prefers-reduced-motion: no-preference) {
  html.program-motion-ready,
  html.program-motion-ready body {
    overflow-x: clip;
  }

  html.program-motion-ready .program > .module.program-motion-item {
    --program-visual-shift: -68px;
    --program-copy-shift: 68px;
  }

  html.program-motion-ready .program > .module.program-motion-item:nth-child(even) {
    --program-visual-shift: 68px;
    --program-copy-shift: -68px;
  }

  html.program-motion-ready .program > .module.program-motion-item .module-visual,
  html.program-motion-ready .program > .module.program-motion-item .module-copy {
    opacity: 0;
    will-change: transform, opacity;
    transition-property: transform, opacity, border-color;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  }

  html.program-motion-ready .program > .module.program-motion-item .module-visual {
    transform: translate3d(var(--program-visual-shift), 0, 0) scale(.985);
    transition-duration: 980ms, 720ms, 720ms;
  }

  html.program-motion-ready .program > .module.program-motion-item .module-copy {
    transform: translate3d(var(--program-copy-shift), 0, 0);
    border-left-color: rgba(245, 50, 47, 0);
    transition-duration: 900ms, 680ms, 680ms;
    transition-delay: 110ms;
  }

  html.program-motion-ready .program > .module.program-motion-item .module-chapter::after {
    opacity: .18;
    transform: scaleX(.08);
    transform-origin: left center;
    transition: transform 820ms cubic-bezier(.16, 1, .3, 1) 180ms,
                opacity 520ms ease 180ms;
  }

  html.program-motion-ready .program > .module.program-motion-item.is-assembled .module-visual,
  html.program-motion-ready .program > .module.program-motion-item.is-assembled .module-copy {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  html.program-motion-ready .program > .module.program-motion-item.is-assembled .module-copy {
    border-left-color: var(--red);
  }

  html.program-motion-ready .program > .module.program-motion-item.is-assembled .module-chapter::after {
    opacity: 1;
    transform: scaleX(1);
  }

  html.program-motion-ready .program > .module.program-motion-item.motion-complete .module-visual,
  html.program-motion-ready .program > .module.program-motion-item.motion-complete .module-copy {
    will-change: auto;
  }

  @media (max-width: 1020px) {
    html.program-motion-ready .program > .module.program-motion-item,
    html.program-motion-ready .program > .module.program-motion-item:nth-child(even) {
      --program-visual-shift: 0px;
      --program-copy-shift: 0px;
    }

    html.program-motion-ready .program > .module.program-motion-item .module-visual {
      transform: translate3d(0, 42px, 0) scale(.975);
      transition-duration: 820ms, 620ms, 620ms;
    }

    html.program-motion-ready .program > .module.program-motion-item .module-copy {
      transform: translate3d(0, 28px, 0);
      transition-duration: 760ms, 580ms, 580ms;
      transition-delay: 130ms;
    }
  }

  @media (max-width: 520px) {
    html.program-motion-ready .program > .module.program-motion-item .module-visual {
      transform: translate3d(0, 32px, 0) scale(.982);
    }

    html.program-motion-ready .program > .module.program-motion-item .module-copy {
      transform: translate3d(0, 22px, 0);
      transition-delay: 100ms;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .program > .module .module-visual,
  .program > .module .module-copy,
  .program > .module .module-chapter::after {
    transition: none !important;
    animation: none !important;
  }
}