:root {
    --base-reveal-animation-time: .3s;
}

/* ---------------- */
.reveal-1 {
    transform: translate(-1em, 1em) scale(.9);
    opacity: 0;
    user-select: none;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0, 1, .3, 1), linear;
    transition-duration: var(--base-reveal-animation-time);
}
.shown .reveal-1 {
    transition-timing-function: cubic-bezier(.9, 0, .7, 1), cubic-bezier(.4, 2, .6, 1);
    transform: none;
    opacity: 1;
}

/* ---------------- */
.reveal-2 {
    transform: scale(.4);
    opacity: 0;
    transition-timing-function: cubic-bezier(0.5,0, 0, 1);
    /* transition-timing-function: cubic-bezier(0,1.17,1,.95); */
    user-select: none;
    transition-duration: calc(var(--base-reveal-animation-time) * 2);
}
.shown .reveal-2 {
    transform: none;
    opacity: 1;
}

/* ---------------- */
/* The disappearance transition malfunctions (elements disappear abruptly)
   when triggered immediately after the reveal animation. */
.reveal-3 > * {
    position: relative;
    overflow: hidden;
}
.reveal-3 > *::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--reveal-3-block-colour, #ddd);
    transform: translateX(-101%);
}
.shown .reveal-3 > *::after {
    animation: reveal-3-box-slide calc(var(--base-reveal-animation-time) * 3) cubic-bezier(.77,0,.18,1) forwards;
}
.reveal-3 > * > * {
    opacity: 0;
    /* transition for when the element disappears */
    transition: opacity calc(var(--base-reveal-animation-time) * 2);
}
.shown .reveal-3 > * > * {
    opacity: 1;
    transition: opacity 0s linear calc(var(--base-reveal-animation-time) * 3);
    animation: reveal-3-text calc(var(--base-reveal-animation-time) * 3);
}
@keyframes reveal-3-text {
    0% { opacity: 0; }
    /* 48.52% is an experimentally found value, it depends on the reveal-3-box-slide animation timing function */
    48.52% { opacity: 0; }
    100% { opacity: 1; }
}

.reveal-3 > *:nth-of-type(1) > *,
.reveal-3 > *:nth-of-type(1)::after {
    animation-delay: 0s;
}
.reveal-3 > *:nth-of-type(2) > *,
.reveal-3 > *:nth-of-type(2)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 0.6);
}
.reveal-3 > *:nth-of-type(3) > *,
.reveal-3 > *:nth-of-type(3)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 1.1);
}
.reveal-3 > *:nth-of-type(4) > *,
.reveal-3 > *:nth-of-type(4)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 1.5);
}
.reveal-3 > *:nth-of-type(5) > *,
.reveal-3 > *:nth-of-type(5)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 1.8);
}
.reveal-3 > *:nth-of-type(6) > *,
.reveal-3 > *:nth-of-type(6)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 1.8);
}
.reveal-3 > *:nth-of-type(7) > *,
.reveal-3 > *:nth-of-type(7)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 2.0);
}
.reveal-3 > *:nth-of-type(8) > *,
.reveal-3 > *:nth-of-type(8)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 2.1);
}
.reveal-3 > *:nth-of-type(9) > *,
.reveal-3 > *:nth-of-type(9)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 2.2);
}
.reveal-3 > *:nth-of-type(10) > *,
.reveal-3 > *:nth-of-type(10)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 2.3);
}
.reveal-3 > *:nth-of-type(n+11) > *,
.reveal-3 > *:nth-of-type(n+11)::after {
    animation-delay: calc(var(--base-reveal-animation-time) * 2.4);
}
@keyframes reveal-3-box-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(101%);  }
}