@keyframes loadinganim {
    0%, 10% {
        opacity: 1;
        translate: 0 0;
    }
    100% {
        opacity: 1;
        translate: 0 110%;
    }
}

/* header */

@keyframes scrollHeader {
    100% {
        top: calc(var(--spacing-xs) + var(--spacing));
        width: 32rem;
        left: max(var(--spacing), calc(50% - 16rem));
    }
}

@keyframes scrollColorHeader {
    0% {
        --bgc: var(--clr-100);
        background-color: var(--clr-100);
    }
    100% {
        --bgc: var(--clr-200);
        background-color: var(--clr-200);
    }
}

@keyframes scrollColorHeaderLogo {
    100% {
        width: 7.25rem;
    }
}

/* contact button header */

@keyframes scrollContactBtn {
    100% {
        width: 5.375rem;
    }
}

@keyframes scrollContactBtnSpan {
    0% {
        padding-top: 1.75rem;
        opacity: 1;
        height: auto;
    }
    30% {
        opacity: 0;
        padding-top: 1.75rem;
    }
    99% {
        translate: 0 150%;
        padding-top: 0;
        display: block;
        height: auto;
        opacity: 0;
    }
    100% {
        opacity: 0;
        height: 0;
    }
}

@keyframes scrollContactBtnSVG {
    0% {
        height: 1.25rem;
        translate: -50% -1.5rem;
    }
    80%, 100% {
        height: 1.75rem;
        translate: -50% -50%;
    }
}

/* Nav */

@keyframes scrollMainNav {
    100% {
        opacity: 0;
        translate: 0 -80%;
    }
}

@keyframes scrollMenuBtn {
    0% {
        display: none;
        pointer-events: none;
    }
    5%, 35% {
        visibility: hidden;
        opacity: 0;
        translate: -4rem -50%;
        pointer-events: none;
    }
    40% {
        pointer-events: all;
    }
    95%, 100% {
        pointer-events: all;
        visibility: visible;
        opacity: 1;
        translate: 0 -50%;
    }
}

/* Send button */

@keyframes sendbtn {
    0%, 100% {
        margin-left: 0;
        rotate: 0deg;
    }
    20% {
        margin-left: -0.75rem;
    }
    20%, 80% {
        rotate: 45deg;
    }
    48% {
        margin-left: 175%;
        opacity: 1;
    }
    49% {
        margin-left: 175%;
        opacity: 0;
    }
    50% {
        margin-left: -175%;
        opacity: 0;
    }
    52% {
        opacity: 1;
    }
}

/* Hero text switcher */

@keyframes switch-anim {
    0%, 25% {
        translate: 0 0;
        opacity: 1;
    }
    30%, 55% {
        translate: 0 -100%;
    }
    60%, 85% {
        translate: 0 -200%;
    }
    90% {
        translate: 0 -300%;
        opacity: 1;
    }
    91% {
        opacity: 0;
        translate: 0 -300%;
    }
    100% {
        opacity: 0;
        translate: 0 0;
    }
}

@keyframes switch-anim-first {
    0%, 25% {
        translate: 0 0;
        opacity: 1;
    }
    30%, 55% {
        translate: 0 -100%;
    }
    60% {
        translate: 0 -200%;
        opacity: 1;
    }
    61% {
        opacity: 0;
        translate: 0 -200%;
    }
    84% {
        opacity: 0;
        translate: 0 100%;
    }
    85% {
        opacity: 1;
        translate: 0 100%;
    }
    90% {
        translate: 0 0%;
    }
}

/* Marquee */

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@keyframes arrow45 {
    0%, 40%, 100% {
        translate: 0 0;
        opacity: 1;
    }
    20% {
        translate: 200% -200%;
        opacity: 1;
    }
    20.5% {
        translate: 200% -200%;
        opacity: 0;
    }
    21% {
        translate: -200% 200%;
        opacity: 0;
    }
    21.5% {
        translate: -200% 200%;
        opacity: 1;
    }
}

/* Others */

@keyframes roundbg {
    0% {
        scale: 0.001;
        opacity: 1;
        background-color: var(--clr-secondary);
    }
    15% {
        opacity: 1;
        scale: 0.5;
        background-color: var(--clr-secondary);
    }
    25% {
        background-color: transparent;
    }
    65% {
        opacity: 1;
    }
    100% {
        scale: 1.325;
        opacity: 0.5;
    }
}

@keyframes linebefore {
    0%, 100% {
        width: 0;
    }
    30%, 90% {
        width: var(--width);
    }
}

/* button */

@keyframes ring {
    0%, 100% {
        rotate: 0;
    }
    25%, 75% {
        rotate: 10deg;
    }
    50% {
        rotate: -10deg;
    }
}

@keyframes buttonIconBefore {
    0% {
        width: 90%;
        height: 90%;
        rotate: -45deg;
        border-radius: 50vh;
    }
    30%, 62% {
        width: calc(100% + 1.325rem);
        height: calc(100% + 1.325rem);
    }
    100% {
        border-radius: 50vh;
        width: 1500%;
        height: calc(100% + 1.325rem);
        rotate: -45deg;
        background-color: var(--clr-primary);
    }
}

@keyframes buttonIconColor {
    0%, 65% {
        color: var(--clr-100);
        border-color: var(--clr-100);
    }
    95%, 100% {
        color: var(--clr-700);
        border-color: var(--clr-700);
    }
}

@keyframes buttonIcon {
    0%, 10% {
        color: var(--clr-900);
    }
    0%, 30% {
        rotate: 0deg;
        translate: 0% 0%;
    }
    35% {
        rotate: 45deg;
    }
    40% {
        translate: 0% 0%;
    }
    60% {
        rotate: 45deg;
        translate: 150% 0%;
        opacity: 1;
    }
    61% {
        opacity: 0;
        translate: 150% 0%;
    }
    62% {
        opacity: 0;
        translate: -500% 0%;
        color: var(--clr-900);
    }
    63% {
        opacity: 1;
        translate: -500% 0%;
    }
    100% {
        rotate: 45deg;
        translate: 0% 0%;
        color: var(--clr-900);
    }
}

@keyframes morebtn {
    0%, 100% {
        scale: 1;
    }
    50% {
        scale: 1.25;
    }
    100% {
        rotate: 360deg;
    }
}

@keyframes sendbtn2 {
    0%, 100% {
        translate: 0 0;
        rotate: 0deg;
        scale: 1;
    }
    20% {
        translate: -0.75rem 0;
        scale: 1.25;
    }
    20%, 80% {
        rotate: 45deg;
    }
    48% {
        translate: 25rem 0;
        opacity: 1;
    }
    49% {
        translate: 25rem 0;
        opacity: 0;
    }
    50% {
        translate: -25rem 0;
        opacity: 0;
    }
    52% {
        translate: -25rem 0;
        opacity: 1;
    }
}

@keyframes wobble {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 2rem 6rem var(--clr-primary));
    }
    55% {
        filter: drop-shadow(0 1rem 3rem var(--clr-primary));
    }
    50% {
        transform: translateY(-12%);
    }
}

@keyframes wobbleShadow {
    0%, 100% {
        transform: translateY(0%) scaleX(1);
        opacity: 1;
    }
    50% {
        opacity: 0.7;
        transform: translateY(30%) scaleX(1.5);
    }
}

@keyframes bggradient {
    50% {
        --h-1: 190;
        --c-1: 0.05;
        --l-1: 0.2;
    }
    100% {
        --h-1: 250;
        --c-1: 0.05;
        --l-1: 0.35;
    }
}

/* Scroll in/out */

@keyframes outTop {
    0% {
        opacity: 1;
        filter: blur(0);
    }
    50% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        translate: 0 -15%;
        opacity: 0;
        filter: blur(2px);
    }
}

@keyframes heroScale {
    100% {
        scale: 1.1;
        filter: blur(9px);
    }
}

@keyframes podium {
    6% {
        translate: 0 100%;
        opacity: 0;
        filter: drop-shadow(0 10rem 10rem #13304b) blur(3px);
    }
    15%, 78% {
        opacity: 1;
        filter: drop-shadow(0 10rem 10rem #13304b) blur(0);
        translate: 0 0%;
    }
    81% {
        opacity: 1;
        translate: 0 0%;
    }
    84% {
        opacity: 0;
    }
    100% {
        translate: 0 100rem;
        opacity: 0;
        filter: drop-shadow(0 10rem 10rem #13304b) blur(3px);
    }
}

@keyframes floaty {
    0% {
        translate: 0 -100vh;
        opacity: 0;
    }
    25% {
        translate: 0 -150%;
        opacity: 1;
    }
    85% {
        translate: 0 175%;
        opacity: 1;
    }
    95% {
        opacity: 0;
    }
    100% {
        translate: 0 +100vh;
        opacity: 0;
    }
}

@keyframes floatyShadow {
    0% {
        translate: -50% 100%;
        background-color: transparent;
        scale: 2.75 .65;
    }
    5%, 73% {
        translate: -50% 0;
        scale: 1.75 .65;
        background-color: oklch(0.3004 0.0367 175.55);
    }
    78%, 100% {
        translate: -50% -50%;
        background-color: transparent;
    }
}

@keyframes spotlightcontent {
    0%, 20% {
        opacity: 0;
    }
    30%, 50% {
        opacity: 1;
    }
    60%, 100% {
        opacity: 0;
    }
}

@keyframes pointLine {
    0%, 20% {
        width: 0;
        opacity: 0;
    }
    40% {
        opacity: 1;
        width: 0;
    }
    50%, 70% {
        opacity: 1;
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@keyframes scaleIn {
    0%, 20% {
        scale: 0;
        opacity: 0;
    }
    50% {
        opacity: 1;
        scale: 0;
    }
    55%, 65% {
        opacity: 1;
        scale: 1;
    }
    70%, 100% {
        scale: 0;
    }
}

@keyframes fadeInLeft {
    0%, 20% {
        translate: 100% 0;
        opacity: 0;
    }
    35%, 100% {
        translate: 0 0;
        opacity: 1;
    }
}

@keyframes spotlightTitle {
    0% {
        opacity: 0;
    }
    5%, 80% {
        opacity: 1;
    }
    0%, 80% {
        translate: 0 0;
        filter: blur(0px);
    }
    100% {
        translate: 0 15rem;
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes fullcardscroll {
    0% {
        translate: 0 -25%;
    }
    30%, 100% {
        translate: 0 0;
    }
}

@keyframes fullcardscrollreverse {
    0% {
        translate: 0 15%;
    }
    30%, 100% {
        translate: 0 0%;
    }
}

@keyframes fullcardscrollreversesm {
    0% {
        translate: 0 20%;
    }
    30%, 100% {
        translate: 0 -5%;
    }
}

@keyframes heightIn {
    0% {
        padding-top: 0;
        opacity: 0;
    }
    30%, 100% {
        padding-top: var(--spacing);
        opacity: 1;
    }
}

@keyframes inOut {
    0%, 5%, 95%, 100% {
        opacity: 0;
    }
    25%, 85% {
        opacity: 1;
    }
}

@keyframes inOutLeft {
    0%, 5%, 95%, 100% {
        opacity: 0;
    }
    25%, 85% {
        opacity: 1;
    }
    15%, 100% {
        translate: 0% 0;
    }
    0% {
        translate: -25% 0;
    }
}

@keyframes inOutRight {
    0%, 5%, 95%, 100% {
        opacity: 0;
    }
    25%, 85% {
        opacity: 1;
    }
    15%, 100% {
        translate: 0% 0;
    }
    0% {
        translate: 25% 0;
    }
}

@keyframes inOutBottom {
    0%, 5%, 95%, 100% {
        opacity: 0;
    }
    25%, 85% {
        opacity: 1;
    }
    20%, 100% {
        translate: 0% 0;
    }
    0% {
        translate: 0% 40%;
    }
}

@keyframes hrVertical {
    0%, 5% {
        height: 0;
        opacity: 1;
    }
    25%, 85% {
        height: 6rem;
        opacity: 1;
    }
    95%, 100% {
        opacity: 0;
    }
}

@keyframes hrsep {
    0%, 5% {
        width: 0;
        opacity: 1;
    }
    25%, 85% {
        width: 6rem;
        opacity: 1;
    }
    95%, 100% {
        opacity: 0;
    }
}

@media screen and (max-width: 64rem) {
    @keyframes inOutLeft {
        0%, 5%, 95%, 100% {
            opacity: 0;
        }
        25%, 85% {
            opacity: 1;
        }
    }
    @keyframes inOutRight {
        0%, 5%, 95%, 100% {
            opacity: 0;
        }
        25%, 85% {
            opacity: 1;
        }
    }
    @keyframes fadeInLeft {
        0%, 5% {
            translate: 80% 0;
            opacity: 0;
        }
        25%, 100% {
            translate: 0 0;
            opacity: 1;
        }
    }
    @keyframes pointLine {
        0%, 20% {
            width: 0;
            opacity: 0;
        }
        40% {
            opacity: 1;
            width: 0;
        }
        50%, 70% {
            opacity: 1;
            width: 55%;
        }
        100% {
            width: 0;
        }
    }
}