:root {
    --kfw-animation-duration: .45s;
    --kfw-animation-stagger: .06s;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin .8s linear infinite;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1.25rem);
    }

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.page-animate > * {
    opacity: 0;
    animation: slideUp var(--kfw-animation-duration) ease-out forwards;
}

    .page-animate > *:nth-child(1) {
        animation-delay: calc(var(--kfw-animation-stagger) * 0);
    }

    .page-animate > *:nth-child(2) {
        animation-delay: calc(var(--kfw-animation-stagger) * 1);
    }

    .page-animate > *:nth-child(3) {
        animation-delay: calc(var(--kfw-animation-stagger) * 2);
    }

    .page-animate > *:nth-child(4) {
        animation-delay: calc(var(--kfw-animation-stagger) * 3);
    }

    .page-animate > *:nth-child(5) {
        animation-delay: calc(var(--kfw-animation-stagger) * 4);
    }

    .page-animate > *:nth-child(6) {
        animation-delay: calc(var(--kfw-animation-stagger) * 5);
    }

    .page-animate > *:nth-child(7) {
        animation-delay: calc(var(--kfw-animation-stagger) * 6);
    }

    .page-animate > *:nth-child(8) {
        animation-delay: calc(var(--kfw-animation-stagger) * 7);
    }

    .page-animate > *:nth-child(9) {
        animation-delay: calc(var(--kfw-animation-stagger) * 8);
    }

    .page-animate > *:nth-child(10) {
        animation-delay: calc(var(--kfw-animation-stagger) * 9);
    }

.list-animate > * {
    opacity: 0;
    animation: scaleIn .35s ease-out forwards;
}

    .list-animate > *:nth-child(1) {
        animation-delay: .00s;
    }

    .list-animate > *:nth-child(2) {
        animation-delay: .04s;
    }

    .list-animate > *:nth-child(3) {
        animation-delay: .08s;
    }

    .list-animate > *:nth-child(4) {
        animation-delay: .12s;
    }

    .list-animate > *:nth-child(5) {
        animation-delay: .16s;
    }

    .list-animate > *:nth-child(6) {
        animation-delay: .20s;
    }

    .list-animate > *:nth-child(7) {
        animation-delay: .24s;
    }

    .list-animate > *:nth-child(8) {
        animation-delay: .28s;
    }

    .list-animate > *:nth-child(9) {
        animation-delay: .32s;
    }

    .list-animate > *:nth-child(10) {
        animation-delay: .36s;
    }

@media (prefers-reduced-motion: reduce) {
    .page-animate > *,
    .list-animate > * {
        animation: none;
        opacity: 1;
    }
}

@keyframes header-shine-sweep {
    0%, 80% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(200%);
    }
}

@keyframes bell-vibrate {
    0% {
        transform: rotate(0deg);
    }

    2% {
        transform: rotate(12deg);
    }

    4% {
        transform: rotate(-12deg);
    }

    6% {
        transform: rotate(8deg);
    }

    8% {
        transform: rotate(-8deg);
    }

    10% {
        transform: rotate(4deg);
    }

    12% {
        transform: rotate(-4deg);
    }

    14% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}