.loader {
    position: relative;
    width: 75%;
    aspect-ratio: 16/9;
}

.loader img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.loader img:nth-child(1) {
    z-index: 100;
    animation: t_grow 1s forwards;
    animation-timing-function: ease-out;
}

@keyframes t_grow {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }

}

.loader img:nth-child(2) {
    z-index: 2;
    animation: t1 500ms forwards 1s;
}

@keyframes t1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.loader img:nth-child(3) {
    z-index: 3;
    animation: t2 500ms forwards 1200ms;
}

@keyframes t2 {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}

.loader img:nth-child(4) {
    z-index: 4;
    animation: t3 500ms forwards 1400ms;
}

@keyframes t3 {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}

.loader img:nth-child(5) {
    z-index: 5;
    animation: t4 500ms forwards 1600ms;
}

@keyframes t4 {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0px);
    }

}

.loader img:nth-child(6) {
    z-index: 6;
    animation: moverAbajo 500ms forwards 1500ms;
}

@keyframes moverAbajo {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.loader img:nth-child(7) {
    z-index: 7;
    animation: moveUp 500ms forwards 1500ms;

}

@keyframes moveUp {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }

}

.loader img:nth-child(8) {
    z-index: 8;
    animation: moveToLeft 500ms forwards 1800ms;
}

@keyframes moveToLeft {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }

}


.loader img:nth-child(9) {
    z-index: 9;
    animation: fade 500ms forwards 2000ms;
}

.loader img:nth-child(10) {
    z-index: 10;
    animation: o_der_sup 500ms forwards 2200ms;
}

@keyframes o_der_sup {
    0% {
        opacity: 0;
        transform: rotate(20deg);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg);
    }

}

.loader img:nth-child(11) {
    z-index: 11;
    animation: rotateDown 500ms forwards 2400ms;
    animation-timing-function: ease-out;
}

@keyframes rotateDown {
    0% {
        opacity: 0;
        transform: rotate(-30deg);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}


.loader img:nth-child(12) {
    z-index: 12;
    animation: fade 500ms forwards 2600ms;
}


@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.loader img:nth-child(13) {
    z-index: 13;
    animation: moveDown 1000ms forwards 2800ms;
    animation-timing-function: ease-out;
}

@keyframes moveDown {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}