@keyframes wipe-enter {
    0% {
        /* transform: scale(0, .025); */
        transform: translateX(-520px);
        opacity: 0;
    }

    95% {
        /* transform: scale(1, .025); */
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes line-enter {
    0% {
        /* transform: scale(0, .025); */
        transform: translateX(-320px);
        opacity: 0;
    }

    100% {
        /* transform: scale(1, .025); */
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes pentagon-rotate {
    0% {
        transform: rotateY(3.142rad);
        opacity: 0;
    }

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

@keyframes talk-alpha {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fella-animation {
    0% {
        /* transform: scale(0, .025); */
        transform: translateX(-200px);
        opacity: 0;
    }

    100% {
        /* transform: scale(1, .025); */
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes skills-animation {
    0% {
        /* transform: scale(0, .025); */
        transform: translateX(200px);
        opacity: 0;
    }

    100% {
        /* transform: scale(1, .025); */
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes skill-bar-1 {
    0% {
        transform: scaleX(0);
    }

    70% {
        transform: scaleX(1);
    }
}

@keyframes project-slide {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@media (prefers-reduced-motion: no-preference) {
    .page-title-animation {
        animation: wipe-enter 0.7s 1;
    }

    .line-animation {
        animation: wipe-enter 1s 1;
    }

    .pentagon-animation {
        animation: pentagon-rotate 1.5s 1;
    }

    .talk-animation {
        animation: talk-alpha 3s 1;
    }

    .fella-animation {
        animation: fella-animation 1s 1;
    }

    .skills-animation {
        animation: skills-animation 1s 1;
    }

    .skill-1-animation {
        animation: skill-bar-1 3s 1;
    }

    .project-animation {
        animation: project-slide 2s 1;
    }
}