@keyframes nav-stretch {
    0% {
        margin-inline: var(--nav-collapsed-margin);
        padding-inline: 0rem;
    }
    100% {
        margin-inline: 0rem;
        padding-inline: var(--nav-collapsed-margin);
    }
}

@keyframes nav-shrink {
    0% {
        margin-inline: 0rem;
        padding-inline: var(--nav-collapsed-margin);
    }

    100% {
        margin-inline: var(--nav-collapsed-margin);
        padding-inline: 0rem;
    }
}

@keyframes nav-toggle-bounce-in {
    0% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0));
    }

    25% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 1));
    }

    45% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0.75));
    }

    55% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 1));
    }

    66% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0.87));
    }

    75% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 1));
    }

    80% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0.95));
    }

    100% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 1));
    }
}

@keyframes nav-toggle-bounce-out {
    0% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 1));
    }

    40% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0));
    }

    55% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * -0.125));
    }

    70% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0));
    }

    85% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * -0.05));
    }

    100% {
        transform: translate(-50%, calc(var(--toggle-expanded-position) * 0));
    }
}

@keyframes nav-toggle-stretch {
    0% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0)));
    }

    25% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 1)));
    }

    45% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0.33)));
    }

    55% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 1)));
    }

    66% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0.66)));
    }

    75% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 1)));
    }

    80% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0.8)));
    }


    100% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 1)));
    }
}

@keyframes nav-toggle-shrink {
    0% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 1)));
    }

    40% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0)));
    }

    55% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * -0.15)));
    }

    70% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0)));
    }

    85% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * -0.1)));
    }

    100% {
        transform: scaleX(calc(100% + (var(--toggle-capsule-leg-expanded-perc) * 0)));
    }

}


@keyframes grain {
    0% {
        background-position: 0;
    }

    10% {
        background-position: -8% -73%;
    }

    20% {
        background-position: -155% 35%;
    }

    30% {
        background-position: 27% -65%;
    }

    40% {
        background-position: -35% 22%;
    }

    50% {
        background-position: -15% 100%;
    }

    60% {
        background-position: 10% 45%;
    }

    70% {
        background-position: 88% 30%;
    }

    80% {
        background-position: 3% 35%;
    }

    90% {
        background-position: -10% 10%;
    }

    100% {
        background-position: 28% 80%;
    }

}

/* FADE IN */

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

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* SLIDE IN */

@keyframes slide-in-down {
    0% {
        translate: 0% -100%;
    }

    100% {
        translate: 0% 0%;
    }
}


@keyframes slide-in-up {
    0% {
        translate: 0% 100%;
    }

    100% {
        translate: 0% 0%;
    }
}

@keyframes slide-in-left {
    0% {
        translate: -100% 0%;
    }

    100% {
        translate: 0% 0%;
    }
}

@keyframes slide-in-right {
    0% {
        translate: 100% 0%;
    }

    100% {
        translate: 0% 0%;
    }
}

/* SLIDE OUT */

@keyframes slide-out-down {
    0% {
        translate: 0% 0%;
    }

    100% {
        translate: 0% 100%;
    }
}


@keyframes slide-out-up {
    0% {
        translate: 0% 0%;
    }

    100% {
        translate: 0% -100%;
    }
}

@keyframes slide-out-left {
    0% {
        translate: 0% 0%;
    }

    100% {
        translate: -100% 0%;
    }
}

@keyframes slide-out-right {
    0% {
        translate: 0% 0%;
    }

    100% {
        translate: 100% 0%;
    }
}


@keyframes rotate-clockwise {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}

@keyframes rotate-counterclockwise {
    0% {
        rotate: 360deg;
    }
    100% {
        rotate: 0deg;
    }
}

@keyframes zoom-in {
    from {
        scale: 0%;
    }

    to {
        scale: 100%
    }
}

@keyframes zoom-out {
    from {
        scale: 100%;
    }

    to {
        scale: 0%;
    }
}

@keyframes theme-transition-out {
    0% {
        opacity: 1;
        transform: translateZ(0px) rotateY(0deg);
        filter: drop-shadow(0px 0px 5rem hsl(0 0% 0% / 0.5));
    }

    50% {
        transform: translateZ(-1500px) rotateY(0deg);
        filter: drop-shadow(0px 0px 1rem hsl(0 0% 0% / 0.5));
        --theme-shadow-blur: 0rem;
    }

    100% {
        opacity: 1;
        transform: translateZ(-1500px) rotateY(90deg);
        filter: drop-shadow(0px 0px 1rem hsl(0 0% 0% / 0.5));
    }
}

@keyframes theme-transition-in {


    0% {
        opacity: 1;
        transform: translateZ(-1500px) rotateY(-90deg);
        filter: drop-shadow(0px 0px 1rem hsl(0 0% 0% / 0.5));
    }

    50% {
        transform: translateZ(-1500px) rotateY(0deg);
        filter: drop-shadow(0px 0px 1rem hsl(0 0% 0% / 0.5));
    }


    100% {
        opacity: 1;
        transform: translateZ(0px) rotateY(0deg);
        filter: drop-shadow(0px 0px 5rem hsl(0 0% 0% / 0.5));
    }
}