/* ========================================
   PREVENT ELEMENTS FROM DISAPPEARING
   Simplified version - only targets animated elements
   ======================================== */

/* Animation fill mode for fade-in elements */
.fade-in-up,
.fade-in,
.fade-in-down,
.slide-in-left,
.slide-in-right,
.scale-in,
.fade-in-up-delay {
    animation-fill-mode: forwards !important;
}

/* After page loads, ensure animated elements are visible */
body.loaded .fade-in-up,
body.loaded .fade-in,
body.loaded .fade-in-down,
body.loaded .slide-in-left,
body.loaded .slide-in-right,
body.loaded .scale-in,
body.loaded .fade-in-up-delay {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Hero section should always be visible immediately */
.modern-hero-section,
.home-hero-section,
.hero-section {
    opacity: 1;
    visibility: visible;
}

/* Modals - let Bootstrap handle visibility */
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal-backdrop {
    opacity: unset;
    visibility: unset;
    transform: unset;
}

/* Modal when shown */
.modal.show {
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Keyframe animations end with visible state */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}