/* FONDO */

/* Efecto de ruido */

.ruido {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999;
    overflow: hidden;
}

.ruido.pro {
    position: absolute;
    overflow: visible;
}

.ruido::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: url(../img/ruido.png);
    background-repeat: repeat;
    animation: animateGrain 15s steps(10) infinite;
    pointer-events: none;
}

@keyframes animateGrain {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-5%, -10%);
    }

    20% {
        transform: translate(-15%, -20%);
    }

    30% {
        transform: translate(-5%, -10%);
    }

    40% {
        transform: translate(-15%, -20%);
    }

    50% {
        transform: translate(-5%, -10%);
    }

    60% {
        transform: translate(-15%, -20%);
    }

    70% {
        transform: translate(-5%, -10%);
    }

    80% {
        transform: translate(-15%, -20%);
    }

    90% {
        transform: translate(-5%, -10%);
    }
}

/* Fondo */

.fondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    transition: all 0.8s ease;
}

.fondo img {
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: all 0.8s ease;
}

.fondo.pro {
    filter: blur(50px);
}


/* Animación inicio */

.inicio {
    width: 100%;
    transition: all 0.8s ease;
}

.proyectos {
    width: 100%;
    transition: all 0.8s ease;
}

.sobremi {
    width: 100%;
    transition: all 0.8s ease;
}

.contacto {
    width: 100%;
    transition: all 0.8s ease;
}

/* Figuras inicio */


.inicio #figura1,
.figura1 {
    bottom: -25%;
    left: -45%;
    transform: rotate(0);
}

.inicio #figura2,
.figura2 {
    top: -45%;
    left: -15%;
    transform: rotate(0);
}

.inicio #figura3,
.figura3 {
    bottom: -50%;
    left: 0;
    transform: rotate(0);
}

.inicio #figura4,
.figura4 {
    bottom: -15%;
    right: -40%;
    transform: rotate(0);
}

.inicio #figura5,
.figura5 {
    top: -40%;
    right: -20%;
    transform: rotate(0);

}

/* Figuras proyectos */

.proyectos #figura1,
.figura1-p {
    bottom: -20%;
    left: -90%;
    transform: rotate(0);
}

.proyectos #figura2,
.figura2-p {
    top: -80%;
    left: 15%;
    transform: rotate(0);
}

.proyectos #figura3,
.figura3-p {
    bottom: 20%;
    left: -25%;
    transform: scale(1) rotate(70deg);
}

.proyectos #figura4,
.figura4-p {
    right: -30%;
    bottom: 0;
    transform: rotate(-50deg);
}

.proyectos #figura5,
.figura5-p {
    top: -80%;
    right: -20%;
    transform: rotate(0);
}

/* Figuras sobre mí */

.sobremi #figura1,
.figura1-s {
    bottom: 50%;
    left: 0;
    transform: rotate(100deg);
}

.sobremi #figura2,
.figura2-s {
    top: 0;
    left: 30%;
    transform: rotate(100deg);
}

.sobremi #figura3,
.figura3-s {
    bottom: -5%;
    left: -35%;
    transform: rotate(70deg);
}

.sobremi #figura4,
.figura4-s {
    right: 0;
    bottom: -45%;
    transform: rotate(80deg);
}

.sobremi #figura5,
.figura5-s {
    top: -80%;
    right: -20%;
    transform: rotate(0);
}

/* Figuras contacto */

.contacto #figura1,
.figura1-c {
    bottom: 35%;
    left: 25%;
    transform: rotate(150deg);
}

.contacto #figura2,
.figura2-c {
    top: -20%;
    left: -30%;
    transform: rotate(0);
}

.contacto #figura3,
.figura3-c {
    bottom: -30%;
    left: -25%;
    transform: rotate(-20deg);
}

.contacto #figura4,
.figura4-c {
    right: -80%;
    bottom: -10%;
    transform: rotate(0);
}

.contacto #figura5,
.figura5-c {
    top: 35%;
    right: -20%;
    transform: rotate(0);
}

/* Figuras cambian al pulsar el menu */

.figuras-menu {
    width: 50%;
    height: 80%;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease;
}

.figuras-menu img {
    transition: all 0.8s ease;
}

.figuras-menu .figura1,
.figuras-menu .figura1-p,
.figuras-menu .figura1-s,
.figuras-menu .figura1-c {
    bottom: -15%;
    left: -83%;
    transform: scale(0.6, 0.6) rotate(-10deg);
}

.figuras-menu .figura2,
.figuras-menu .figura2-p,
.figuras-menu .figura2-s,
.figuras-menu .figura2-c {
    top: -37%;
    left: -60%;
    transform: scale(0.6, 0.6) rotate(10deg);
}

.figuras-menu .figura3,
.figuras-menu .figura3-p,
.figuras-menu .figura3-s,
.figuras-menu .figura3-c {
    bottom: -23%;
    left: -43%;
    transform: scale(0.6, 0.6) rotate(10deg);
}

.figuras-menu .figura4,
.figuras-menu .figura4-p,
.figuras-menu .figura4-s,
.figuras-menu .figura4-c {
    right: -84%;
    bottom: -16%;
    transform: scale(0.6, 0.6);
}

.figuras-menu .figura5,
.figuras-menu .figura5-p,
.figuras-menu .figura5-s,
.figuras-menu .figura5-c {
    top: -45%;
    right: -78%;
    transform: scale(0.6, 0.6);
}

/* Figuras números */

.numeros {
    width: 25%;
    height: 80%;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease;
}

/* Cero */
.numeros #figura1.cero {
    bottom: 10%;
    left: -160%;
    transform: scale(0.6, 0.6) rotate(130deg);
}

.numeros #figura2.cero {
    left: -160%;
    top: 17%;
    transform: scale(0.6, 0.6) rotate(130deg)
}

.numeros #figura3.cero {
    left: -135%;
    bottom: -20%;
    transform: scale(0.6, 0.6) rotate(-130deg)
}

.numeros #figura4.cero {
    right: -111%;
    bottom: -15%;
    transform: scale(0.6, 0.6) rotate(-30deg);
}

.numeros #figura5.cero {
    right: -115%;
    top: 20%;
    transform: scale(0.6, 0.6) rotate(-50deg);
}

/* Uno */
.numeros #figura1.uno {
    bottom: -130%;
    left: -130%;
}

.numeros #figura2.uno {
    top: -100%;
    left: -100%;
}

.numeros #figura3.uno {
    bottom: 15%;
    left: -170%;
    transform: scale(0.7, 0.7) rotate(90deg);
}

.numeros #figura4.uno {
    right: -150%;
    bottom: -15%;
    transform: scale(0.7, 0.7) rotate(-25deg);
}

.numeros #figura5.uno {
    top: -50%;
    right: -290%;
}

/* Dos */
.numeros #figura1.dos {
    left: -160%;
    bottom: 10%;
    transform: scale(0.6, 0.6) rotate(120deg);
}

.numeros #figura2.dos {
    left: -150%;
    top: -10%;
    transform: scale(0.6, 0.6) rotate(130deg)
}

.numeros #figura3.dos {
    left: -180%;
    bottom: -25%;
    transform: scale(0.6, 0.6) rotate(100deg)
}

.numeros #figura4.dos {
    right: -145%;
    bottom: -40%;
    transform: scale(0.6, 0.6) rotate(80deg);
}

.numeros #figura5.dos {
    top: -50%;
    right: -290%;
}

/* Tres */

.numeros #figura1.tres {
    left: -165%;
    bottom: 10%;
    transform: scale(0.55, 0.55) rotate(190deg);
}

.numeros #figura2.tres {
    left: -165%;
    top: -2%;
    transform: scale(0.55, 0.55) rotate(5deg);
}

.numeros #figura3.tres {
    left: -170%;
    bottom: -50%;
    transform: scale(0.55, 0.55) rotate(-45deg);
}

.numeros #figura4.tres {
    right: -120%;
    bottom: -120%;
}

.numeros #figura5.tres {
    top: 15%;
    right: -150%;
    transform: scale(0.55, 0.55);
}

/* Adaptar las figuras a diferentes dispositivos */

@media screen and (max-width: 900px) {

    .inicio #figura1,
    .figura1,
    .inicio #figura2,
    .figura2,
    .inicio #figura3,
    .figura3,
    .inicio #figura4,
    .figura4,
    .inicio #figura5,
    .figura5 {
        transform: scale(0.8) rotate(0deg);
    }

    .proyectos #figura3,
    .figura3-p {
        transform: scale(0.8) rotate(70deg);
    }

    .proyectos #figura4,
    .figura4-p {
        transform: scale(0.8) rotate(-50deg);
    }

    .sobremi #figura1,
    .figura1-s,
    .sobremi #figura2,
    .figura2-s {
        transform: scale(0.8) rotate(100deg);
    }

    .sobremi #figura3,
    .figura3-s {
        transform: scale(0.8) rotate(70deg);
    }

    .sobremi #figura4,
    .figura4-s {
        transform: scale(0.8) rotate(80deg);
    }

    .contacto #figura1,
    .figura1-c {
        transform: scale(0.8) rotate(150deg);
    }

    .contacto #figura2,
    .figura2-c {
        transform: scale(0.8) rotate(0);
    }

    .contacto #figura3,
    .figura3-c {
        transform: scale(0.8) rotate(-20deg);
    }

    .contacto #figura5,
    .figura5-c {
        transform: scale(0.8) rotate(0);
    }
}

@media screen and (max-width: 700px) {

    .ruido.pro {
        overflow-x: hidden;
    }

    .fondo img {
        opacity: 0.3;
    }

    .inicio #figura1,
    .figura1,
    .inicio #figura2,
    .figura2,
    .inicio #figura3,
    .figura3,
    .inicio #figura4,
    .figura4,
    .inicio #figura5,
    .figura5 {
        transform: scale(0.7) rotate(0deg);
    }

    .proyectos #figura3,
    .figura3-p {
        transform: scale(0.7) rotate(70deg);
    }

    .proyectos #figura4,
    .figura4-p {
        transform: scale(0.7) rotate(-50deg);
    }

    .sobremi #figura1,
    .figura1-s,
    .sobremi #figura2,
    .figura2-s {
        transform: scale(0.7) rotate(100deg);
    }

    .sobremi #figura3,
    .figura3-s {
        transform: scale(0.7) rotate(70deg);
    }

    .sobremi #figura4,
    .figura4-s {
        transform: scale(0.7) rotate(80deg);
    }

    .contacto #figura1,
    .figura1-c {
        transform: scale(0.7) rotate(150deg);
    }

    .contacto #figura2,
    .figura2-c {
        transform: scale(0.7) rotate(0);
    }

    .contacto #figura3,
    .figura3-c {
        transform: scale(0.7) rotate(-20deg);
    }

    .contacto #figura5,
    .figura5-c {
        transform: scale(0.7) rotate(0);
    }

    .figuras-menu {
        width: 100%;
        height: 100vh;
    }

    .figuras-menu .figura1,
    .figuras-menu .figura1-p,
    .figuras-menu .figura1-s,
    .figuras-menu .figura1-c {
        bottom: 15%;
        left: -30%;
        transform: scale(0.6, 0.6) rotate(80deg);
    }

    .figuras-menu .figura2,
    .figuras-menu .figura2-p,
    .figuras-menu .figura2-s,
    .figuras-menu .figura2-c {
        top: -3%;
        left: -5%;
        transform: scale(0.6, 0.6) rotate(110deg);
    }

    .figuras-menu .figura3,
    .figuras-menu .figura3-p,
    .figuras-menu .figura3-s,
    .figuras-menu .figura3-c {
        bottom: -5%;
        left: -35%;
        transform: scale(0.6, 0.6) rotate(110deg);
    }

    .figuras-menu .figura4,
    .figuras-menu .figura4-p,
    .figuras-menu .figura4-s,
    .figuras-menu .figura4-c {
        right: 15%;
        bottom: -20%;
        transform: scale(0.6, 0.6) rotate(80deg);
    }

    .figuras-menu .figura5,
    .figuras-menu .figura5-p,
    .figuras-menu .figura5-s,
    .figuras-menu .figura5-c {
        top: 13%;
        right: -5%;
        transform: scale(0.6, 0.6);
    }
}