/* JS-Enabled State: Only hide the elements if JavaScript is confirmed to be running. */
html[data-js=js] {
    body.has-wx-aos .site-main {
        overflow: hidden;
    }
    
    /* Base Style: Defines the transition properties, using CSS variable for delay and distance. */
    [class*=wx-aos-] {
        opacity: 0;
        /* Initialize the delay variable. Default to 0ms if no utility class is used. */
        --wx-aos-delay: 0ms;
        /* Initialize the distance variable. Default to 100px. */
        --wx-aos-distance: 100px;

        transition-property: opacity, transform;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition-duration: 1s;
        transition-delay: var(--wx-aos-delay)
    }

    /* Base Visible State: Applies to all when triggered by JS. */
    [class*=wx-aos-].animate {
        opacity: 1;
        transform: translate(0, 0); 
    }
    [class*=wx-aos-zoom].animate {
        transform: translate3d(0, 0, 0) scale(1);
    }

    /* --- Fade Animations --- */
    /* fadeIn (Pure Opacity) no transform needed, starts at opacity: 0 */
    .wx-aos-fadeInUp {
        transform: translateY(var(--wx-aos-distance));
    }
    .wx-aos-fadeInLeft {
        transform: translateX(var(--wx-aos-distance));
    }
    .wx-aos-fadeInRight {
        transform: translateX(calc(-1 * var(--wx-aos-distance)));
    }

    /* --- Zoom Animations --- */
    .wx-aos-zoomIn {
        transform: scale(.6);
    }
    .wx-aos-zoomInUp {
        transform: translate3d(0, var(--wx-aos-distance), 0) scale(.6);
    }

    /* --- Delay Utility Classes --- */
    /* These classes define the value of the --wx-aos-delay variable */
    .wx-aos-delay-100 { --wx-aos-delay: 100ms; }
    .wx-aos-delay-200 { --wx-aos-delay: 200ms; }
    .wx-aos-delay-300 { --wx-aos-delay: 300ms; }
    .wx-aos-delay-400 { --wx-aos-delay: 400ms; }
    .wx-aos-delay-500 { --wx-aos-delay: 500ms; }
    .wx-aos-delay-600 { --wx-aos-delay: 600ms; }
    .wx-aos-delay-700 { --wx-aos-delay: 700ms; }
    .wx-aos-delay-800 { --wx-aos-delay: 800ms; }
    .wx-aos-delay-900 { --wx-aos-delay: 900ms; }
}


@media (max-width: 600px) {
    /* Use subtle distance for the slide effect. Avoid large movements that feel jarring on a small screen. */
    html[data-js=js] [class*=wx-aos-] {
        --wx-aos-distance: 20px;
    }
}


/* The first part of the query, targeting low-to-no-animation, is done via prefers-reduced-motion. */ 
/* The second, targeting a screen with a low refresh rate, uses update. */
@media (prefers-reduced-motion: reduce), (update: slow) {
    /* Disable transform animations and make them instant */
    html[data-js=js] [class*=wx-aos-] {
        transform: none !important;
        transition: opacity 0.001s !important; /* Nearly instant fade */
    }
}