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

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

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

@keyframes pulse
{
    0%, 100%
    {
        opacity: .35;
    }

    50%
    {
        opacity: 1;
    }
}

.pulse
{
    animation: pulse 1.2s ease-in-out 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 > *,
    .pulse
    {
        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);
    }
}

@keyframes kfw-orb-pulse
{
    0%, 100%
    {
        transform: scale(1);
    }

    50%
    {
        transform: scale(1.1);
    }
}

@keyframes kfw-orb-fade
{
    0%, 100%
    {
        opacity: 1;
    }

    50%
    {
        opacity: .6;
    }
}

.kfw-orb-pulse
{
    animation: kfw-orb-pulse 1.8s ease-in-out infinite;
}

.kfw-orb-pulse-fast
{
    animation: kfw-orb-pulse .8s ease-in-out infinite;
    box-shadow: 0 0 7.5rem color-mix(in srgb, var(--kfw-orb-glow, #4444B8) 80%, transparent);
}

.kfw-orb-fade
{
    animation: kfw-orb-fade 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce)
{
    .kfw-orb-pulse,
    .kfw-orb-pulse-fast,
    .kfw-orb-fade
    {
        animation: none;
    }
}