body {
    --time: .4s;
}

.animation {
    -webkit-animation: load calc(var(--time) * 2) forwards var(--time);
    animation: load calc(var(--time) * 2) forwards var(--time);
    -webkit-animation-timing-function: cubic-bezier(0.09, 0.72, 0.6, 1.12);
    animation-timing-function: cubic-bezier(0.09, 0.72, 0.6, 1.12);
}

.animation-alpha {
    opacity: 0;
}

.animation-beta {
    opacity: 0;
    transform: translateY(5%);
    -webkit-animation-delay: calc(var(--time) * 2);
    animation-delay: calc(var(--time) * 2);
}

.animation-beta:nth-child(2) {
    -webkit-animation-delay: calc(var(--time) * (2 + .1));
    animation-delay: calc(var(--time) * (2 + .1));
}

.animation-beta:nth-child(3) {
    -webkit-animation-delay: calc(var(--time) * (2 + .2));
    animation-delay: calc(var(--time) * (2 + .2));
}

.animation-beta:nth-child(4) {
    -webkit-animation-delay: calc(var(--time) * (2 + .3));
    animation-delay: calc(var(--time) * (2 + .3));
}

.animation-beta:nth-child(5) {
    -webkit-animation-delay: calc(var(--time) * (2 + .4));
    animation-delay: calc(var(--time) * (2 + .4));
}

.animation-beta:nth-child(6) {
    -webkit-animation-delay: calc(var(--time) * (2 + .5));
    animation-delay: calc(var(--time) * (2 + .5));
}

.animation-beta:nth-child(7) {
    -webkit-animation-delay: calc(var(--time) * (2 + .6));
    animation-delay: calc(var(--time) * (2 + .6));
}

.animation-beta:nth-child(8) {
    -webkit-animation-delay: calc(var(--time) * (2 + .7));
    animation-delay: calc(var(--time) * (2 + .7));
}

.animation-beta:nth-child(9) {
    -webkit-animation-delay: calc(var(--time) * (2 + .8));
    animation-delay: calc(var(--time) * (2 + .8));
}

.animation-gamma {
    opacity: 0;
    transform: translateX(-5%);
    -webkit-animation-delay: calc(var(--time) * 3.5);
    animation-delay: calc(var(--time) * 3.5);
}

.animation-delta {
    opacity: 0;
    transform: translateY(2%);
    -webkit-animation-delay: calc(var(--time) * 4);
    animation-delay: calc(var(--time) * 4);
}

.animation-epsilon {
    opacity: 0;
    transform: translateY(2%);
    -webkit-animation-delay: calc(var(--time) * 4.5);
    animation-delay: calc(var(--time) * 4.5);
}

.animation-zeta {
    opacity: 0;
    transform: translateY(5%);
    -webkit-animation-delay: calc(var(--time) * 4.75);
    animation-delay: calc(var(--time) * 4.75);
}

.animation-eta {
    opacity: 0;
    transform: translateY(5%);
    -webkit-animation-delay: calc(var(--time) * 5);
    animation-delay: calc(var(--time) * 5);
}

.animation-theta {
    opacity: 0;
    transform: translateY(-10%);
    -webkit-animation-delay: calc(var(--time) * 7);
    animation-delay: calc(var(--time) * 7);
}

.animation-theta:nth-child(1) {
    -webkit-animation-delay: calc(var(--time) * (7 + .3));
    animation-delay: calc(var(--time) * (7 + .3));
}

.animation-theta:nth-child(2) {
    -webkit-animation-delay: calc(var(--time) * (7 + .6));
    animation-delay: calc(var(--time) * (7 + .6));
}

.animation-theta:nth-child(3) {
    -webkit-animation-delay: calc(var(--time) * (7 + .9));
    animation-delay: calc(var(--time) * (7 + .9));
}

.animation-theta:nth-child(4) {
    -webkit-animation-delay: calc(var(--time) * (7 + 1.2));
    animation-delay: calc(var(--time) * (7 + 1.2));
}

.animation-iota {
    opacity: 0;
    transform: translateY(-10%);
    -webkit-animation-delay: calc(var(--time) * 6);
    animation-delay: calc(var(--time) * 6);
}

.animation-iota:nth-child(1) {
    -webkit-animation-delay: calc(var(--time) * (6 + .3));
    animation-delay: calc(var(--time) * (6 + .3));
}

.animation-iota:nth-child(2) {
    -webkit-animation-delay: calc(var(--time) * (6 + .6));
    animation-delay: calc(var(--time) * (6 + .6));
}

.animation-iota:nth-child(3) {
    -webkit-animation-delay: calc(var(--time) * (6 + .9));
    animation-delay: calc(var(--time) * (6 + .9));
}

.animation-iota:nth-child(4) {
    -webkit-animation-delay: calc(var(--time) * (6 + 1.2));
    animation-delay: calc(var(--time) * (6 + 1.2));
}

.animation-kappa {
    transform: translateX(-47%);
    -webkit-animation-delay: calc(var(--time) * 5);
    animation-delay: calc(var(--time) * 5);
}

@-webkit-keyframes load {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes load {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Page Scroll animitions using view timeline API */


.fade-in {
    scale: .8;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

@keyframes fade-in {

    to {
        scale: 1;
        opacity: 1;
    }
}

.subtle-up {
    transform: translateY(10%);
    animation: move-up linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

@keyframes move-up {

    to {
        transform: translateY(-20%);
        color: #02020279;
    }
}

.slide-left {
    overflow-x: hidden;
    transform: translateX(50%);
    /* opacity: 0; */
    animation: slide-left linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

@keyframes slide-left {

    to {
        /* width: 100%; */
        transform: translateX(0);
        /* opacity: 1; */
    }
}


.slide-right {
    overflow-x: hidden;
    transform: translateX(-50%);
    /* opacity: 0; */
    animation: slide-right 0.8s linear forwards;
    animation-timeline: view();
    animation-range: entry;
}

@keyframes slide-right {

    to {
        /* width: 100%; */
        transform: translateX(0);
        /* opacity: 1; */
    }
}


.fade-grow-in {
    /* transform-origin: bottom; */
    animation: fade-grow-in linear forwards;
    animation-timeline: view();
    animation-range: exit;
}

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

    85% {
        opacity: 0;
        scale: -3;
    }
}


.fade-grow-out {
    transform-origin: bottom;
    animation: fade-grow-out linear forwards;
    animation-timeline: view();
    animation-range: exit;
}

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

    85% {
        opacity: 0;
        scale: 3;
    }
}

.fade-out {
    animation: fade-out linear;
    animation-timeline: view();
    animation-range: exit -200px;
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-down {
    animation: fade-in-down 0.8s ease-out;
}