@keyframes fadeIn {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}

@keyframes popIn {
    from {
        opacity:0;
        transform:translateY(20px) scale(.96)
    }
    to {
        opacity:1;
        transform:none
    }
}

@keyframes wheel {
    0% {
        opacity:0;
        transform:translate(-50%,0)
    }
    30% {
        opacity:1
    }
    100% {
        opacity:0;
        transform:translate(-50%,12px)
    }
}

@keyframes arrowBounce {
    0%,100% {
        transform:translateY(0)
    }
    50% {
        transform:translateY(6px)
    }
}

.js [data-animate] {
    opacity:0;
    transform:translateY(28px);
    transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)
}

body.loaded [data-animate] {
    opacity:1;
    transform:none
}

@keyframes lineUp {
    to {
        transform:translateY(0)
    }
}

@keyframes shine {
    0% {
        left:-120%
    }
    55% {
        left:140%
    }
    100% {
        left:140%
    }
}

@keyframes ring {
    0%,100% {
        transform:rotate(0)
    }
    5% {
        transform:rotate(14deg)
    }
    10% {
        transform:rotate(-12deg)
    }
    15% {
        transform:rotate(10deg)
    }
    20% {
        transform:rotate(-6deg)
    }
    25% {
        transform:rotate(0)
    }
}

@keyframes statsGlow {
    0%,100% {
        box-shadow:var(--stats-glow-1)
    }
    50% {
        box-shadow:var(--stats-glow-2)
    }
}

.hero .sub[data-animate] {
    transition-delay: .3s;
}

.hero-cta[data-animate] {
    transition-delay: .45s;
}

.hero-stats[data-animate] {
    transition-delay: .6s;
}