/*
 * animations.css
 * This file contains the CSS keyframes and classes for the animations.
 */

/* Base class for elements that will be animated */
.amb-animate {
    opacity: 0; /* Start hidden */
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;
}

/* Class added by JS when the element is in view */
.amb-animate.is-visible {
    opacity: 1;
    transform: none;
    visibility: visible;
}


/* --- FADE IN --- */
@keyframes amb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.amb-fade-in.is-visible {
    animation-name: amb-fade-in;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* --- FADE IN UP --- */
@keyframes amb-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.amb-fade-in-up.is-visible {
    animation-name: amb-fade-in-up;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- FADE IN DOWN --- */
@keyframes amb-fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.amb-fade-in-down.is-visible {
    animation-name: amb-fade-in-down;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- FADE IN LEFT --- */
@keyframes amb-fade-in-left {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
.amb-fade-in-left.is-visible {
    animation-name: amb-fade-in-left;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- FADE IN RIGHT --- */
@keyframes amb-fade-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
.amb-fade-in-right.is-visible {
    animation-name: amb-fade-in-right;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- SLIDE IN UP --- */
@keyframes amb-slide-in-up {
    from { transform: translateY(100%); visibility: visible; }
    to { transform: translateY(0); }
}
.amb-slide-in-up.is-visible {
    animation-name: amb-slide-in-up;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- SLIDE IN DOWN --- */
@keyframes amb-slide-in-down {
    from { transform: translateY(-100%); visibility: visible; }
    to { transform: translateY(0); }
}
.amb-slide-in-down.is-visible {
    animation-name: amb-slide-in-down;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}


/* --- SLIDE IN LEFT --- */
@keyframes amb-slide-in-left {
    from { transform: translateX(-100%); visibility: visible; }
    to { transform: translateX(0); }
}
.amb-slide-in-left.is-visible {
    animation-name: amb-slide-in-left;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- SLIDE IN RIGHT --- */
@keyframes amb-slide-in-right {
    from { transform: translateX(100%); visibility: visible; }
    to { transform: translateX(0); }
}
.amb-slide-in-right.is-visible {
    animation-name: amb-slide-in-right;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

/* --- ZOOM IN --- */
@keyframes amb-zoom-in {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; }
}
.amb-zoom-in.is-visible {
    animation-name: amb-zoom-in;
    animation-duration: 0.7s;
    animation-fill-mode: both;
}

/* --- BOUNCE --- */
@keyframes amb-bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}
.amb-bounce.is-visible {
    animation-name: amb-bounce;
    animation-duration: 1s;
    animation-fill-mode: both;
}