/* ============================================================
   COWAY ANIMATIONS SYSTEM - FADE IN & FADE OUT ENTRANCE/EXIT
   ============================================================ */

/* Base animation setup */
.anim-fade-in,
.anim-fade-in-up,
.anim-fade-in-down,
.anim-fade-in-left,
.anim-fade-in-right,
.anim-zoom-in {
    opacity: 0;
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Initial state offset for directionals */
.anim-fade-in-up { transform: translateY(40px); }
.anim-fade-in-down { transform: translateY(-40px); }
.anim-fade-in-left { transform: translateX(-40px); }
.anim-fade-in-right { transform: translateX(40px); }
.anim-zoom-in { transform: scale(0.92); }

/* ============================
   ACTIVE ENTRANCE (FADE IN)
   ============================ */
.anim-fade-in-active {
    opacity: 1 !important;
    transform: translateY(0) translateX(0) scale(1) !important;
}

/* ============================
   ACTIVE EXIT (FADE OUT)
   ============================ */
.anim-fade-out-active {
    opacity: 0 !important;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out !important;
}
.anim-fade-in-up.anim-fade-out-active { transform: translateY(30px) !important; }
.anim-fade-in-down.anim-fade-out-active { transform: translateY(-30px) !important; }
.anim-fade-in-left.anim-fade-out-active { transform: translateX(-30px) !important; }
.anim-fade-in-right.anim-fade-out-active { transform: translateX(30px) !important; }
.anim-zoom-in.anim-fade-out-active { transform: scale(0.95) !important; }

/* 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; }

/* Pulsing & Floating Animations */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 167, 225, 0.4); }
    50% { box-shadow: 0 0 0 16px rgba(0, 167, 225, 0); }
}

.anim-float {
    animation: floatY 4s ease-in-out infinite;
}

.anim-pulse {
    animation: pulseGlow 2.5s infinite;
}

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