/*
 * Scroll transitions for sections with the `wpta-reveal` class, and the items of groups with the
 * `wpta-reveal-stagger` class (see assets/js/scroll-reveal.js).
 *
 * Nothing here applies until the script has added `wpta-reveal-ready` to <html>, so without the script, in the
 * editor, or with reduced motion, every section simply shows.
 */

/* Waiting below the fold: transparent and 20px lower, hidden instantly so nothing fades out on load */
.wpta-reveal-ready .wpta-reveal {
  opacity: 0;
  transform: translateY(20px);
}

/* Scrolled into view: fades in and settles in place */
.wpta-reveal-ready .wpta-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* The fade runs only while the section arrives, so afterwards it keeps its own transitions, such as on hover */
.wpta-reveal-ready .wpta-reveal.is-revealed:not(.is-reveal-done) {
  transition:
    opacity 700ms ease-out,
    transform 700ms ease-out;
}

/* Reduced motion: never hidden or moved */
@media (prefers-reduced-motion: reduce) {
  .wpta-reveal-ready .wpta-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}