/* 
Version: 1.1.0
Description: UNAP Loader CSS (fix rotación sobre eje)
Author: Felix Guerrero
*/

/* =========================
   ANIMACIONES BASE
========================= */

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill {
    to {
        fill-opacity: 1;
    }
}

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

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

/* =========================
   BACKGROUND
========================= */

#loader-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(8px);
    z-index: 9000;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

body.loaded #loader-background {
    opacity: 0;
    pointer-events: none;
}

/* =========================
   CONTENEDOR (NO ROTA)
========================= */

#logo-container {
    position: absolute;
    width: 250px;
    height: auto;
    top: 50%;
    left: 50%;

    /* ? SOLO posicionamiento */
    transform: translate(-50%, -50%);

    z-index: 9001;
    opacity: 1;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* =========================
   SVG (AQUÍ VA LA ROTACIÓN)
========================= */

#logo-container svg {
    display: block;
    margin: auto;

    animation: spin 1.5s linear infinite;

    /* ? FIX REAL */
    transform-origin: center;
    transform-box: fill-box;
}

/* =========================
   ESTADOS
========================= */

body.loading #logo-container {
    display: block;
    overflow: hidden;
}

body.loaded #logo-container {
    opacity: 0;
    transform: translate(-50%, -60%);
}

/* =========================
   FONTS
========================= */

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================
   TEXTO
========================= */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loader-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    text-align: center;
    margin-top: 20px;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out 1s forwards;
}

.loader-text.light {
    color: #FFFFFF;
}

.loader-text.dark {
    color: #1a1a2e;
}

.loader-text.visible {
    opacity: 1;
    animation: none;
}