/* Scroll-in reveals. Only active once site.js has added .js to <html>, so
   the page is fully visible without JavaScript. */
:root {
  --reveal-shift: 20px;      /* "up": distance elements rise from */
  --reveal-shift-lg: 30px;   /* "up-lg", "left", "right": larger travel */
  --reveal-scale: 0.9;       /* "pop": starting scale */
  --reveal-scale-sm: 0.95;   /* "pop-sm": starting scale */
  --reveal-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.js [data-reveal] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--reveal-duration, 0.6s);
  transition-delay: var(--reveal-delay, 0s);
  transition-timing-function: var(--reveal-ease);
}
.js [data-reveal="up"] { transform: translateY(var(--reveal-shift)); }
.js [data-reveal="up-lg"] { transform: translateY(var(--reveal-shift-lg)); }
.js [data-reveal="left"] { transform: translateX(calc(-1 * var(--reveal-shift-lg))); }
.js [data-reveal="right"] { transform: translateX(var(--reveal-shift-lg)); }
.js [data-reveal="pop"] { transform: scale(var(--reveal-scale)); }
.js [data-reveal="pop-sm"] { transform: scale(var(--reveal-scale-sm)); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}