/* DmApp Animated Loaders */

/* ===== LOADER CONTAINER ===== */

.animated-loader-container {
    z-index: 10001;
}

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

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

/* ===== HEART LOADER ===== */

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.2);
    }
}

/* ===== DOTS LOADER ===== */

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
}

/* ===== PULSE LOADER ===== */

@keyframes pulsate {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* ===== BOUNCE LOADER ===== */

@keyframes bounceLoader {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

/* ===== SPINNER LOADER ===== */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== LOADER TEXT ===== */

@keyframes textPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loader-text {
    text-align: center;
    user-select: none;
}

/* ===== PERFORMANCE ===== */

.loader-heart,
.loader-dots,
.loader-pulse,
.loader-bounce,
.loader-spinner {
    will-change: transform;
    backface-visibility: hidden;
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
    .loader-heart,
    .loader-dots div,
    .loader-pulse div,
    .loader-bounce,
    .loader-spinner {
        animation: none !important;
    }
    
    .loader-spinner {
        animation: spin 2s linear infinite !important;
    }
}