/* The static page remains readable until the scroll enhancement starts. */
.ys-feature--practice[data-ys-practice-scroll][data-cues-reveal="active"] > .ys-feature-copy {
  opacity: var(--cues-copy-opacity, 1);
  transform: translate3d(0, var(--cues-copy-shift, 0px), 0);
  will-change: opacity, transform;
}

.ys-feature--practice[data-ys-practice-scroll][data-cues-reveal="active"] > .ys-feature-visual--practice {
  opacity: var(--cues-image-opacity, 1);
  transform: translate3d(0, var(--cues-image-shift, 0px), 0);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .ys-feature--practice[data-ys-practice-scroll] > .ys-feature-copy,
  .ys-feature--practice[data-ys-practice-scroll] > .ys-feature-visual--practice {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}