.din-a4 {
    --din-stroke: clamp(1px, 0.22vmin, 2px);
    --din-cycle: 6s;
    --din-run: 3s;
}

.din-a4 {
    position: relative;
    width: min(12rem, 55vw);
    height: auto;
    margin: 2em auto;
    aspect-ratio: 1 / 1.4142135624;
    overflow: hidden;
    isolation: isolate;
    color: var(--color-main);
    background: transparent;
    animation: din-reverse-colors var(--din-cycle) steps(1, end) infinite;
}

#din-proportion .grid-item-content {
    display: grid;
    justify-items: center;
}

.din-a4::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    content: "";
    pointer-events: none;
    box-shadow: inset 0 0 0 var(--din-stroke) var(--color-main);
}

.din-size,
.din-fill {
    position: absolute;
    inset: 0 auto auto 0;
    display: block;
}

.din-size {
    z-index: 1;
    opacity: 0;
    box-shadow: inset 0 0 0 var(--din-stroke) currentColor;
    animation-duration: var(--din-run);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.din-a5 {
    width: 100%;
    height: 50%;
    animation-name: din-reveal-a5;
}

.din-a6 {
    width: 50%;
    height: 50%;
    animation-name: din-reveal-a6;
}

.din-a7 {
    width: 50%;
    height: 25%;
    animation-name: din-reveal-a7;
}

.din-a8 {
    width: 25%;
    height: 25%;
    animation-name: din-reveal-a8;
}

.din-fill {
    z-index: 2;
    width: 25%;
    height: 25%;
    opacity: 0;
    background: var(--color-bg);
    transform: scale(1);
    transform-origin: left top;
    will-change: opacity, transform;
    animation: din-fill-cycle var(--din-cycle) ease-in-out infinite;
}

@keyframes din-reveal-a5 {
    0%, 4% { opacity: 0; }
    15%, 100% { opacity: 1; }
}

@keyframes din-reveal-a6 {
    0%, 11% { opacity: 0; }
    22%, 100% { opacity: 1; }
}

@keyframes din-reveal-a7 {
    0%, 18% { opacity: 0; }
    29%, 100% { opacity: 1; }
}

@keyframes din-reveal-a8 {
    0%, 25% { opacity: 0; }
    36%, 100% { opacity: 1; }
}

/*
 * Keep the expanding fill over the sheet while its background changes.
 * The covered handoffs prevent independently composited animations from
 * exposing a frame between the 3 s fill reset and the 6 s color reversal.
 */
@keyframes din-fill-cycle {
    0%, 0.49% {
        opacity: 1;
        background: var(--color-bg);
        transform: scale(4);
    }

    0.5%, 14.5% {
        opacity: 0;
        background: var(--color-main);
        transform: scale(1);
    }

    17.5%, 24.5% {
        opacity: 1;
        background: var(--color-main);
        transform: scale(1);
    }

    46%, 50.5% {
        opacity: 1;
        background: var(--color-main);
        transform: scale(4);
    }

    50.51%, 64.5% {
        opacity: 0;
        background: var(--color-bg);
        transform: scale(1);
    }

    67.5%, 74.5% {
        opacity: 1;
        background: var(--color-bg);
        transform: scale(1);
    }

    96%, 100% {
        opacity: 1;
        background: var(--color-bg);
        transform: scale(4);
    }
}

@keyframes din-reverse-colors {
    0%, 49.999% {
        color: var(--color-main);
        background: transparent;
    }

    50%, 99.999% {
        color: var(--color-bg);
        background: var(--color-main);
    }

    100% {
        color: var(--color-main);
        background: transparent;
    }
}