/**
 * Animaciones del landing — activar con .pagina-mantenimiento--animada
 *
 * Autor: Juan Morel (jcmorelm@mvisual.cl)
 */

.pagina-mantenimiento--animada .tarjeta-estado__marca {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.05s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .tarjeta-estado__logo {
    animation-name: dv-flotar-logo;
    animation-duration: 3.2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.6s;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .tarjeta-estado__panel {
    animation-name: dv-panel-aparece, dv-panel-respiro;
    animation-duration: 0.85s, 3.5s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
    animation-delay: 0.12s, 1s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

.pagina-mantenimiento--animada .etiqueta-estado {
    animation-name: dv-entrar-arriba, dv-etiqueta-pulso;
    animation-duration: 0.6s, 2.8s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
    animation-delay: 0.25s, 1.1s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
}

.pagina-mantenimiento--animada .etiqueta-estado__punto {
    animation-name: dv-punto-pulso;
    animation-duration: 1.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .tarjeta-estado__titulo {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.65s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.32s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .tarjeta-estado__titulo::after {
    animation-name: dv-linea-crecer;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.5s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .tarjeta-estado__mensaje {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.65s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.4s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .barra-progreso-decorativa {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.48s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .barra-progreso-decorativa__segmento {
    transform-origin: center bottom;
    animation-name: dv-barra-onda;
    animation-duration: 1.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.pagina-mantenimiento--animada .barra-progreso-decorativa__segmento:nth-child(1) {
    animation-delay: 0.7s;
}

.pagina-mantenimiento--animada .barra-progreso-decorativa__segmento:nth-child(2) {
    animation-delay: 0.85s;
}

.pagina-mantenimiento--animada .barra-progreso-decorativa__segmento:nth-child(3) {
    animation-delay: 1s;
}

.pagina-mantenimiento--animada .barra-progreso-decorativa__segmento:nth-child(4) {
    animation-delay: 1.15s;
}

.pagina-mantenimiento--animada .tarjeta-estado__nota {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.56s;
    animation-fill-mode: both;
}

.pagina-mantenimiento--animada .pagina-mantenimiento__pie {
    animation-name: dv-entrar-arriba;
    animation-duration: 0.65s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.45s;
    animation-fill-mode: both;
}

@keyframes dv-entrar-arriba {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes dv-panel-aparece {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes dv-panel-respiro {
    0%,
    100% {
        box-shadow:
            0 1px 2px rgba(26, 36, 28, 0.04),
            0 8px 28px rgba(160, 24, 48, 0.06);
    }

    50% {
        box-shadow:
            0 2px 8px rgba(160, 24, 48, 0.12),
            0 14px 36px rgba(45, 106, 49, 0.12);
    }
}

@keyframes dv-flotar-logo {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -12px, 0);
    }
}

@keyframes dv-linea-crecer {
    from {
        opacity: 0;
        transform: scaleX(0.2);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes dv-barra-onda {
    0%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    50% {
        transform: scaleY(2.2);
        opacity: 0.85;
    }
}

@keyframes dv-etiqueta-pulso {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes dv-punto-pulso {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-mantenimiento--animada .tarjeta-estado__marca,
    .pagina-mantenimiento--animada .tarjeta-estado__logo,
    .pagina-mantenimiento--animada .tarjeta-estado__panel,
    .pagina-mantenimiento--animada .etiqueta-estado,
    .pagina-mantenimiento--animada .etiqueta-estado__punto,
    .pagina-mantenimiento--animada .tarjeta-estado__titulo,
    .pagina-mantenimiento--animada .tarjeta-estado__titulo::after,
    .pagina-mantenimiento--animada .tarjeta-estado__mensaje,
    .pagina-mantenimiento--animada .barra-progreso-decorativa,
    .pagina-mantenimiento--animada .barra-progreso-decorativa__segmento,
    .pagina-mantenimiento--animada .tarjeta-estado__nota,
    .pagina-mantenimiento--animada .pagina-mantenimiento__pie {
        animation: none;
    }
}