.reveal-setup .reveal,
.reveal-setup .reveal * {
  transition: none !important;
}

.reveal {
  transition:
    opacity 0.3s ease,
    translate 1s ease;
}

.reveal:not(.is-visible) {
  opacity: 0;
  translate: 0 min(100%, 20rem);
}

.intro-media.reveal:not(.is-visible) {
  translate: -100% 0;
}

.intro-text.reveal:not(.is-visible) {
  translate: 100% 0;
}

:is(.area-panels, .stats ul).reveal:not(.is-visible) {
  opacity: 1;
  translate: none;
}

:is(.area-panels, .stats ul).reveal > * {
  transition:
    opacity 0.3s ease calc(var(--order) * 0.15s),
    translate 1s ease calc(var(--order) * 0.15s),
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    background-color 0.3s var(--ease);
}

.area-panels.reveal:not(.is-visible) > * {
  opacity: 0;
  translate: 0 100%;
}

.stats ul.reveal:not(.is-visible) > * {
  opacity: 0;
  translate: 100% 0;
}