/**
 * Scroll reveal — AutomatorsX LMS
 *
 * Replaces the AOS library that these pages used to pull from unpkg.com.
 *
 * Two reasons, in order of seriousness:
 *
 * 1. AOS's stylesheet sets [data-aos] to opacity: 0 and relies on its script to
 *    put it back. If the stylesheet loads and the script does not — a blocked
 *    CDN, a corporate proxy, an offline install, unpkg having a bad day — the
 *    About, Team, Affiliate, Contact, Home and blog pages render permanently
 *    blank below the fold. A marketing site that disappears when a third party
 *    is unreachable is not a trade worth making for a fade-in.
 *
 * 2. Its fade-left variant starts the element 100px to the right, which on a
 *    375px screen extended the document's scrollable width and gave two pages
 *    84px of sideways swipe into empty space.
 *
 * The rule here is inverted from AOS's: nothing is hidden until the script has
 * announced that it can reveal things again (html.reveal-ready). No script, no
 * hiding — the page simply appears, which is the correct failure.
 *
 * Movement is vertical only. A horizontal entrance cannot be made safe on a
 * narrow screen without clipping something, and it is the least of what these
 * animations were doing.
 */

.reveal-ready [data-aos] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal-ready [data-aos="fade-down"] {
    transform: translateY(-18px);
}

/* The horizontal variants keep their name — the markup asks for them by name —
   and are given the vertical motion, so no element ever starts off-screen. */
.reveal-ready [data-aos="fade-left"],
.reveal-ready [data-aos="fade-right"],
.reveal-ready [data-aos="zoom-in"],
.reveal-ready [data-aos="fade-in"] {
    transform: translateY(14px);
}

.reveal-ready [data-aos].aos-animate {
    opacity: 1;
    transform: none;
}

/* Somebody who has asked their system for less motion gets the content, not a
   slower version of the animation. */
@media (prefers-reduced-motion: reduce) {
    .reveal-ready [data-aos] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}