/*
 * Animation styles
 * @since v0.9.0
 * 
 */

:root {
    --transition-type: ease;
    --transition-delay: .3s;
    --transition-speed: .3s;
}

@media (prefers-reduced-motion: no-preference) {

    .navbar-brand img {
        animation-delay: var(--transition-delay); 
        animation-name: animate-logo;
        animation-timing-function: var(--transition-type);
        animation-duration: calc(var(--transition-speed) * 5);
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .card,
    .feature {
        animation: slide-up-fade-in var(--transition-type) both;
        animation-timeline: view();
        animation-range: entry 50%  cover 50%;
    }

    .banner-content > * {
        position:relative;
        animation-delay: calc(var(--transition-delay) + .4s); 
        animation-name: slide-left-fade-in;
        animation-timing-function: var(--transition-type);
        animation-duration: calc(var(--transition-speed) * 5);
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        opacity: 0;
        transform: translate(0);
    }

    .banner-content > *:nth-child(2) {
        animation-delay: calc(var(--transition-delay) + .8s);
    }

    .banner-content > *:nth-child(3) {
        animation-delay: calc(var(--transition-delay) + 1.2s);
    }

    .banner-content > *:nth-child(4) {
        animation-delay: calc(var(--transition-delay) + 1.6s);
    }
}

@keyframes animate-logo {
    0% {
        opacity:0;
        transform:translateX(-5vw);
    }
    100% {
        opacity: 1;
        transform:translateX(0);
    }
}

@keyframes slide-left-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10vw);
    }
    to {
        opacity: 1;
        transform:translateX(0);
    }
}

@keyframes slide-up-fade-in {
    from {
        opacity: 0;
        transform: translateY(5vh);
    }
    to {
        opacity: 1;
        transform:translateY(0);
    }
}