:root {
  /* Same distance for every element (a % would be relative to each element's own size) */
  --reveal-distance: clamp(20px, 3vw, 48px);
  --reveal-duration: .9s;
}

/* Sideways slides start outside their final spot: don't let that widen the page */
.entry-content { overflow-x: clip; }

/* Hidden until revealed. `reveal-js` is added by autoAnims.js in <head>, before the first paint,
   so nothing flashes; without JS everything stays visible. */
.reveal-js .entry-content>div>div:not(.reveal--done),
.reveal:not(.reveal--done) { opacity: 0; }

.reveal--left, .reveal--right, .reveal--bottom, .reveal--top, .reveal--custom, .reveal--fade {
  animation-duration: var(--reveal-duration);
  animation-timing-function: cubic-bezier(.22,1,.36,1);
  animation-delay: var(--reveal-delay, 0s);
  animation-fill-mode: both;
}

.reveal--left   { animation-name: revealLeft; }
.reveal--right  { animation-name: revealRight; }
.reveal--bottom { animation-name: revealBottom; }
.reveal--top    { animation-name: revealTop; }
.reveal--fade   { animation-name: revealFade; }

@keyframes revealLeft   { from { opacity: 0; translate: calc(var(--reveal-distance) * -1) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes revealRight  { from { opacity: 0; translate: var(--reveal-distance) 0; }             to { opacity: 1; translate: 0 0; } }
@keyframes revealBottom { from { opacity: 0; translate: 0 var(--reveal-distance); }             to { opacity: 1; translate: 0 0; } }
@keyframes revealTop    { from { opacity: 0; translate: 0 calc(var(--reveal-distance) * -1); } to { opacity: 1; translate: 0 0; } }
@keyframes revealFade   { from { opacity: 0; } to { opacity: 1; } }