/* CONTENEDOR PRINCIPAL */

#peru-animation {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 999999;

    pointer-events: none;
    overflow: hidden;

    perspective: 1000px;

    opacity: 1;
    transition: opacity .7s ease;
}


/* CAPAS DE PROFUNDIDAD */

.peru-layer {
    position: absolute;
    inset: 0;

    overflow: hidden;
}


.peru-back {
    z-index: 1;
}


.peru-middle {
    z-index: 2;
}


.peru-front {
    z-index: 3;
}



/* BANDERAS */

.peru-flag {

    position: absolute;

    width: var(--size);

    opacity: var(--opacity);

    filter: blur(var(--blur));

    transform:
        translateY(-20vh)
        rotate(var(--rotation));

    animation:
        peruFall var(--duration)
        linear forwards;


    will-change: transform, opacity;

}


/* ANIMACIÓN CAÍDA */

@keyframes peruFall {


    0% {

        transform:
        translateY(-25vh)
        translateX(0)
        rotate(var(--rotation));

    }


    50% {

        transform:
        translateY(45vh)
        translateX(var(--move))
        rotate(calc(var(--rotation) + 10deg));

    }


    100% {

        transform:
        translateY(130vh)
        translateX(calc(var(--move) * -1))
        rotate(calc(var(--rotation) - 15deg));

        opacity:0;

    }

}