/**
 * loader.css
 * ------------------------------------------------------------
 * Page loading screen styles.
 *
 * Contains:
 * - Full screen page loader overlay
 * - Loader logo styling
 * - Loader animation effects
 * - Loading state transitions
 *
 * This file controls the loading screen displayed while the
 * application or page content is being initialized.
 * ------------------------------------------------------------
 */

/* Full-screen loader overlay displayed before page content loads */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

/* Loader logo displayed in the center of the screen */
.loader-logo {
    width: 80px;
    animation: logo_pop 1.6s ease-in-out infinite;
}

/* Pulsing animation applied to the loader logo */
@keyframes logo_pop {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.6;
    }
}