/* Wordmark: one letter at a time softens and lifts as a decay wave crosses; the zero evaporates. */
.brand {
    white-space: nowrap
}
.brand .gl {
    display: inline-block;
    animation: brand-decay 9s linear calc(var(--i)*.9s) infinite
}
.brand .gl.z {
    animation-name: brand-decay-z;
    animation-delay: calc(var(--i)*.9s + .45s)
}
.brand i {
    animation: brand-ember 3.4s ease-in-out infinite;
    will-change: transform, opacity
}
.brand:hover .gl {
    animation-duration: 3s;
    animation-delay: calc(var(--i)*.3s)
}
.brand:hover .gl.z {
    animation-delay: calc(var(--i)*.3s + .15s)
}
.brand:hover i {
    animation-duration: .8s
}
@keyframes brand-decay {
    0%,48%,100% {
        opacity: 1;
        transform: none;
        filter: none
    }
    50% {
        opacity: .55;
        transform: translate(.2px,-1.2px);
        filter: blur(1px)
    }
    52% {
        opacity: .92;
        transform: translate(0,.2px);
        filter: blur(.15px)
    }
}
@keyframes brand-decay-z {
    0%,44%,64%,100% {
        opacity: 1;
        transform: none;
        filter: none;
        color: inherit
    }
    52% {
        opacity: .08;
        transform: translate(.4px,-2.2px) scale(.95);
        filter: blur(2.4px);
        color: var(--red)
    }
    58% {
        opacity: .5;
        transform: translate(0,.3px);
        filter: blur(.9px);
        color: var(--red2)
    }
}
/* Composited properties only: the dot lives inside the backdrop-filtered header, and an animated
   box-shadow there repaints the whole frosted band every frame, at rest. */
@keyframes brand-ember {
    0%,100% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(1.3);
        opacity: .35
    }
}
@media(prefers-reduced-motion:reduce){
    .brand .gl,.brand i {
        animation: none!important
    }
}