@keyframes left {
    from {
        opacity: 0;
        sacale: 0.5;
        left: -400px;
    }
    to {
        opacity: 1;
        scale: 1;
        left: 0;
    }
}
.left {
    animation: left linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}



@keyframes right {
    from {
        opacity: 0;
        sacale: 0.5;
        right: -400px;
    }
    to {
        opacity: 1;
        scale: 1;
        right: 0;
    }
}

.right {
    animation: right linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

/* Animación de títulos de secciones */

@keyframes tracking-in-contract {
  0% {
    letter-spacing: 0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}



.section-title {
    animation: tracking-in-contract 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    animation-timeline: view();
    animation-range: entry 5% cover 45%;
}


/* Animación del logo */
@keyframes movelogo {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(15px);
    }
    100% {
        transform: translateY(0px);
    }
}

.logo-container {
    animation: movelogo 5.2s ease-in-out infinite;
}



/* Animación de modelo 3d*/
@keyframes tambaleo3d {
    0%   { transform: rotateY(0deg) rotateZ(0deg); }
    25%  { transform: rotateY(-30deg) rotateZ(-1deg); }
    50%  { transform: rotateY(0deg) rotateZ(0deg); }
    75%  { transform: rotateY(30deg) rotateZ(1deg); }
    100% { transform: rotateY(0deg) rotateZ(0deg); }
}

/* modelo 3D */
.model-3d-hang {
    animation: tambaleo3d 8s ease-in-out infinite;
    will-change: transform;
}


/* Animación de sobre mi */
@keyframes slide-in-fwd-bottom {
  0% {
    transform: translateZ(-1400px) translateY(800px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
.section-titleH3, .about-text, .speech-bubble, .project1, .project2, .project3, .project4 , .skills-group, .contact-info, .met-contact {
    animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation-timeline: view();
    animation-range: entry 0% cover 31%;
}

@keyframes fade-in-right {
  0% {
    transform: translateX(450px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.about-image{
    animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-timeline: view();
    animation-range: entry 0% cover 31%;
}