/*
 * Zachor motion: the starting states of the animation classes.
 * The animation itself is in zm-motion.js. Class reference: wordpress-design/02-motion-classes.md
 *
 * Everything here sits under html.zm-js. That flag is set by a tiny inline script only when motion
 * is wanted (not for visitors who prefer reduced motion, not in the Bricks builder) and is taken
 * off again if GSAP has not started within four seconds, so nothing can stay hidden.
 * ".zm-in" is added to an element once its animation has finished.
 */

/* Single elements */
html.zm-js :is(.zm-fade, .zm-fade-up, .zm-fade-down, .zm-fade-left, .zm-fade-right, .zm-scale-in):not(.zm-in) {
    opacity: 0;
}

html.zm-js :is(.zm-blur-in, .zm-blur-up):not(.zm-in) {
    opacity: 0;
    filter: blur(14px);
}

html.zm-js .zm-reveal-up:not(.zm-in) {
    clip-path: inset(100% 0 0 0);
}

html.zm-js .zm-reveal-right:not(.zm-in) {
    clip-path: inset(0 100% 0 0);
}

html.zm-js .zm-grow-x:not(.zm-in) {
    transform: scaleX(0);
    transform-origin: left center;
}

/* The picture settles inside its frame, so the frame clips it */
.zm-zoom-settle {
    overflow: hidden;
}

html.zm-js .zm-zoom-settle:not(.zm-in) :is(img, video, picture, svg) {
    opacity: 0;
}

/* Groups: the direct children animate one after another */
html.zm-js :is(.zm-stagger, .zm-stagger-fade, .zm-stagger-left, .zm-stagger-right, .zm-stagger-scale) > :not(.zm-in) {
    opacity: 0;
}

html.zm-js .zm-stagger-blur > :not(.zm-in) {
    opacity: 0;
    filter: blur(14px);
}

/* Words: hidden until the script has split the text, then word by word */
html.zm-js .zm-words:not(.zm-split) {
    opacity: 0;
}

.zm-word {
    display: inline-block;
}

html.zm-js .zm-words.zm-split .zm-word:not(.zm-in) {
    opacity: 0;
}

/* Parallax: put the class on an image inside a frame with overflow: hidden, and make the image
   a little taller than the frame (about 120%) so it never shows a gap */
.zm-parallax {
    will-change: transform;
}