:root {
    --stack-size: calc(100%);
    --glitch-progression-speed: 200ms;
    --glitch-slide-speed: 640ms;
    --stacks: 3;
    --glitch-translate: 24px;
    --glitch-delay: 2s;
    /*--glitch-slide-speed: 340ms;*/
    /*--glitch-speed: 120ms*/
    
}

div.active-background {
    width: 100vw;
    height: 100vh;
    position: fixed;
}

div.active-background > span.image-container {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    text-align: center;
    overflow: visible;
    display: block;
    opacity: 0.0;
    transform: translateX(var(--slide-offset-negative));

    animation-duration: 4s;
    animation-timing-function: linear; /* ease-in-out; */
    animation-iteration-count: 1;

    z-index: -1;

    transition-property: opacity, filter;
    transition-duration: 300ms;
    transition-timing-function: linear;
}

canvas.media-canvas {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

div.active-background > span.image-container.active {
    opacity: 1.0;
    display: block;
    animation-name: slowSlide;
}

/* Transitions: Slices */
div.active-background.slices > .image-container.active {
    display: flex;
    flex-direction: column;
}

div.active-background.slices > .image-container > img:first-child {
    display: none;
}

div.active-background.slices > .image-container > .stack {
    display: grid;
    grid-template-columns: 1fr;

    width: var(--stack-size);
    height: var(--stack-size);
    min-width: var(--stack-size);
    min-height: var(--stack-size);
}

div.active-background.slices > .image-container > .stack > span {
    width: var(--stack-size);
    height: var(--stack-size);
    min-width: var(--stack-size);
    min-height: var(--stack-size);

    font-weight: bold;
    grid-row-start: 1;
    grid-column-start: 1;
    font-size: 4rem;
}

/* Slide stack into view */
div.active-background.slices > .image-container.active > .stack > span {
    --stack-height: calc(100% / var(--stacks) - 1px);
    --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
    --clip-top: calc(var(--stack-height) * var(--index));
    --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
    clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
    animation: frameIn var(--glitch-slide-speed) cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * var(--glitch-progression-speed));
}

div.active-background.slices > .image-container > .stack > span > img {
    width: var(--stack-size);
    height: var(--stack-size);
    min-width: var(--stack-size);
    min-height: var(--stack-size);
    object-fit: cover;
}

div.active-background.slices > .image-container > .stack > span:nth-child(odd) { --glitch-translate: 24px; }
div.active-background.slices > .image-container > .stack > span:nth-child(even) { --glitch-translate: -24px; }

@keyframes frameIn {
    0% {
        opacity: 0;
        transform: translateX(-50%);
        text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
    }
    60% {
        opacity: 0.5;
        transform: translateX(50%);
    }
    80% {
        transform: none;
        opacity: 1;
        text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
    }
    100% {
        text-shadow: none;
    }
}