/* glow */

.glow {
    animation: glow 10s infinite linear;
}

@keyframes glow {
    0% {
        stroke: rgb(var(--light-1));
        filter: drop-shadow(0 0 2px rgb(var(--light-1)));
    }
    25% {
        stroke: rgb(var(--light-2));
        filter: drop-shadow(0 -1px 3px rgb(var(--light-2)));
    }
    40% {
        stroke: rgb(var(--light-1));
        filter: drop-shadow(1px 0 1px rgb(var(--light-1)));
    }
    65% {
        stroke: rgb(var(--light-3));
        filter: drop-shadow(0 -1px 2px rgb(var(--light-3)));
    }
    80% {
        stroke: rgb(var(--light-2));
        filter: drop-shadow(-1px 0 1px rgb(var(--light-2)));
    }
    100% {
        stroke: rgb(var(--light-1));
        filter: drop-shadow(0 0 2px rgb(var(--light-1)));
    }
}

/* fade-stack */

.fade-stack {
    position: relative;
}

.fade-stack > * {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.9);
    visibility: hidden;
    pointer-events: none;
    transition:
            opacity 0.35s ease,
            transform 0.35s ease,
            visibility 0.35s ease;
}

.fade-stack > *.show {
    opacity: 1;
    transform: scale(1); /* slide into place */
    visibility: visible;
    pointer-events: auto;
}

/* state render */

.state-render {
    position: relative;
    transition: height 200ms ease-in-out;
}

.state-render-animation {
    opacity: 0;
    filter: blur(6px);
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, filter 200ms ease-out;
    pointer-events: none;
}

.state-render-animation.enter-stage {
    opacity: 1;
    filter: blur(0px);
    pointer-events: auto;
}

.state-render-animation.exit-stage {
    position: absolute;
}

/* flow block */

.flow-block.animate {
    opacity: 0;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, filter 200ms ease-out;
    pointer-events: none;
}

.flow-block.animate.reveal {
    opacity: 1;
    pointer-events: auto;
}

.flow-block.animate.blur {
    filter: blur(6px);
}

.flow-block.animate.blur.reveal {
    filter: blur(0px);
}

.flow-block.animate.slide-x {
    transform: translate(20px, 0px);
}

.flow-block.animate.slide-x.reveal {
    transform: translate(0px, 0px);
}

.flow-block.animate.slide-y {
    transform: translate(0px, 20px);
}

.flow-block.animate.slide-y.reveal {
    transform: translate(0px, 0px);
}

/* items block */
.items-block {
    width: 100%;
    position: relative;
}

.items-block > * {
    width: 100%;
}

.items-block.animate {
    transition: height 200ms ease-in-out;
}

.items-block.animate > * {
    position: absolute;
    opacity: 0;
    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, filter 200ms ease-in-out, top 200ms ease-in-out;
    pointer-events: none;
}

.items-block.animate > .reveal {
    opacity: 1;
    pointer-events: auto;
}

.items-block.animate.blur > * {
    filter: blur(6px);
}

.items-block.animate > .reveal {
    filter: blur(0px);
}

.items-block.animate.slide-x > * {
    transform: translate(20px, 0px);
}

.items-block.animate.slide-x > .reveal {
    transform: translate(0px, 0px);
}

.items-block.animate.slide-y > * {
    transform: translate(0px, 20px);
}

.items-block.animate.slide-y > .reveal {
    transform: translate(0px, 0px);
}