/* ========================================================
   1. INITIAL STATES
   Hide elements before they scroll into view (except Flash and Fade Out)
======================================================== */
.ajoanim-slide-left,
.ajoanim-slide-up,
.ajoanim-slide-right,
.ajoanim-slide-down,
.ajoanim-zoom-in,
.ajoanim-zoom-out,
.ajoanim-fade-in {
    opacity: 0;
    will-change: transform, opacity;
}

/* ========================================================
   2. TRIGGER SETTINGS
   Applies a 1-second duration globally to all triggered classes
======================================================== */
[class*="ajoanim-"].ajoanim-trigger {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* ========================================================
   3. KEYFRAMES & ASSIGNMENTS
======================================================== */

/* Slide to the left (Starts right, slides left) */
@keyframes ajoanim-kf-slide-left {
    0%   { opacity: 0; transform: translateX(50px); }
    100% { opacity: 1; transform: translateX(0); }
}
.ajoanim-slide-left.ajoanim-trigger { animation-name: ajoanim-kf-slide-left; }

/* Slide up (Starts down, slides up) */
@keyframes ajoanim-kf-slide-up {
    0%   { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ajoanim-slide-up.ajoanim-trigger { animation-name: ajoanim-kf-slide-up; }

/* Slide to the right (Starts left, slides right) */
@keyframes ajoanim-kf-slide-right {
    0%   { opacity: 0; transform: translateX(-50px); }
    100% { opacity: 1; transform: translateX(0); }
}
.ajoanim-slide-right.ajoanim-trigger { animation-name: ajoanim-kf-slide-right; }

/* Slide down (Starts up, slides down) */
@keyframes ajoanim-kf-slide-down {
    0%   { opacity: 0; transform: translateY(-50px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ajoanim-slide-down.ajoanim-trigger { animation-name: ajoanim-kf-slide-down; }

/* Zoom In */
@keyframes ajoanim-kf-zoom-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
.ajoanim-zoom-in.ajoanim-trigger { animation-name: ajoanim-kf-zoom-in; }

/* Zoom Out */
@keyframes ajoanim-kf-zoom-out {
    0%   { opacity: 0; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
}
.ajoanim-zoom-out.ajoanim-trigger { animation-name: ajoanim-kf-zoom-out; }

/* Flash */
@keyframes ajoanim-kf-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0; }
}
.ajoanim-flash { opacity: 1; } /* Starts visible */
.ajoanim-flash.ajoanim-trigger { 
    animation-name: ajoanim-kf-flash; 
    animation-timing-function: linear; 
}

/* Fade In */
@keyframes ajoanim-kf-fade-in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.ajoanim-fade-in.ajoanim-trigger { animation-name: ajoanim-kf-fade-in; }

/* Fade Out */
@keyframes ajoanim-kf-fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}
.ajoanim-fade-out { opacity: 1; } /* Starts visible, then fades away when scrolled to */
.ajoanim-fade-out.ajoanim-trigger { animation-name: ajoanim-kf-fade-out; }