/* =========================================================
   BANCO DE DOCUMENTOS NORMATIVOS
   ANIMATIONS.CSS
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.header-card {

    animation:
        fadeDown .8s ease;

}


/* =========================================================
   STATUS BAR
========================================================= */

.status-item {

    animation:
        fadeUp .8s ease;

}

.status-item:nth-child(2) {

    animation-delay: .15s;

}

.status-item:nth-child(3) {

    animation-delay: .30s;

}


/* =========================================================
   DASHBOARD
========================================================= */

.stat-card {

    animation:
        fadeUp .9s ease;

}

.stat-card:nth-child(2) {

    animation-delay: .25s;

}


/* =========================================================
   MAPA
========================================================= */

.map-section {

    animation:
        fadeUp 1s ease;

}

.map-image {

    transition:
        transform .35s ease;

}

.map-image:hover {

    transform:
        scale(1.01);

}


/* =========================================================
   TITULOS
========================================================= */

.section-title {

    animation:
        fadeLeft .8s ease;

}


/* =========================================================
   TARJETAS
========================================================= */

.process-card {

    animation:
        fadeUp .9s ease;

}

.process-card:hover {

    animation: none;

}


/* =========================================================
   BADGES
========================================================= */

.badge-docs {

    animation:
        badgePulse 3s infinite;

}


/* =========================================================
   ICONOS
========================================================= */

.card-icon {

    animation:
        iconFloat 5s ease-in-out infinite;

}

.stat-icon {

    animation:
        iconFloat 5s ease-in-out infinite;

}


/* =========================================================
   FOOTER
========================================================= */

.footer {

    animation:
        fadeUp 1s ease;

}


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

.loader-circle {

    animation:
        loaderSpin 1s linear infinite;

}


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

@keyframes fadeDown {

    from {

        opacity: 0;

        transform:
            translateY(-35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes fadeLeft {

    from {

        opacity: 0;

        transform:
            translateX(-30px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes loaderSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes badgePulse {

    0% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

    }

    100% {

        transform:
            scale(1);

    }

}


@keyframes iconFloat {

    0% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-4px);

    }

    100% {

        transform:
            translateY(0);

    }

}


/* =========================================================
   BRILLO HEADER
========================================================= */

.header-card {

    position: relative;

    overflow: hidden;

}

.header-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -150%;

    width: 50%;

    height: 100%;

    transform:
        skewX(-25deg);

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .45),

            transparent);

    animation:
        shine 8s infinite;

}


@keyframes shine {

    0% {

        left: -150%;

    }

    40% {

        left: 180%;

    }

    100% {

        left: 180%;

    }

}


/* =========================================================
   HOVER TARJETAS
========================================================= */

.process-card:hover .card-icon {

    transform:
        scale(1.08);

}

.process-card:hover .badge-docs {

    transform:
        scale(1.12);

}

.card-icon,
.badge-docs {

    transition:
        transform .3s ease;

}


/* =========================================================
   SCROLL SUAVE
========================================================= */

html {

    scroll-behavior: smooth;

}


/* =========================================================
   MODO OSCURO
========================================================= */

body.dark .badge-docs {

    animation:
        badgePulse 3s infinite;

}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

@media (max-width:768px) {

    .card-icon,
    .stat-icon {

        animation: none;

    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion:reduce) {

    * {

        animation: none !important;

        transition: none !important;

    }

}