/* Reveal overlays */

.animate {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 98;

    width: 100%;
    height: 100%;

    background: var(--bg-color);
}

.animate.home-animation {
    width: 50%;
}

.logo .animate,
.navbar .animate,
#menu-icon .animate,
.home.show-animate .animate {
    animation: showRight 1s ease forwards;
    animation-delay: calc(0.3s * var(--i));
}


/* Scroll reveal */

.animate.scroll {
    animation: none;

    transition: width 1s ease;
    transition-delay: calc(0.3s * var(--i));
}

.about .animate.scroll,
.ai-skill .animate.scroll,
.footer .animate.scroll {
    background: var(--second-bg-color);
}

.about.show-animate .animate.scroll,
.services.show-animate .animate.scroll,
.ai-skill.show-animate .animate.scroll,
.portfolio.show-animate .animate.scroll,
.contact.show-animate .animate.scroll,
.footer.show-animate .animate.scroll {
    width: 0;
}


/* Home animated text */

@keyframes homeBgText {
    0%,
    10%,
    100% {
        background-position: -33rem 0;
    }

    65%,
    85% {
        background-position: 0 0;
    }
}

@keyframes homeCursorText {
    0%,
    10%,
    100% {
        width: 0;
    }

    65%,
    78%,
    85% {
        width: 100%;
        opacity: 1;
    }

    75%,
    81% {
        opacity: 0;
    }
}


/* About image spinner */

@keyframes aboutSpinner {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* Reveal animation */

@keyframes showRight {
    100% {
        width: 0;
    }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}