/* ============================
   FADE ANIMATIONS
   ============================ */
.anim-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.anim-fade-in.anim-ready {
    opacity: 0;
}

.anim-fade-in.anim-fade-in-active {
    opacity: 1;
}

.anim-fade-in.anim-fade-out-active {
    opacity: 0;
}

/* Fade Out Animation */
.anim-fade-out {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

.anim-fade-out.anim-fade-out-active {
    opacity: 0;
}

/* Fade In Up Animation */
.anim-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.anim-fade-in-up.anim-ready {
    opacity: 0;
    transform: translateY(30px);
}

.anim-fade-in-up.anim-fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Down Animation */
.anim-fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.anim-fade-in-down.anim-ready {
    opacity: 0;
    transform: translateY(-30px);
}

.anim-fade-in-down.anim-fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Left Animation */
.anim-fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.anim-fade-in-left.anim-ready {
    opacity: 0;
    transform: translateX(-30px);
}

.anim-fade-in-left.anim-fade-in-active {
    opacity: 1;
    transform: translateX(0);
}

/* Fade In Right Animation */
.anim-fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.anim-fade-in-right.anim-ready {
    opacity: 0;
    transform: translateX(30px);
}

.anim-fade-in-right.anim-fade-in-active {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered Animation Delays */
.anim-delay-100 {
    transition-delay: 0.1s;
}

.anim-delay-200 {
    transition-delay: 0.2s;
}

.anim-delay-300 {
    transition-delay: 0.3s;
}

.anim-delay-400 {
    transition-delay: 0.4s;
}

.anim-delay-500 {
    transition-delay: 0.5s;
}

/* Mobile Animation Adjustments */
@media (max-width: 767px) {
    .anim-fade-in-up,
    .anim-fade-in-down,
    .anim-fade-in-left,
    .anim-fade-in-right {
        transform: translateY(20px);
        transform: translateX(0);
    }
}