/* Scroll entrances use individual transforms so widget tilt and hover still work. */
.scroll-reveal {
  opacity: 0;
  translate: 0 56px;
  scale: .975;
  transition-property: opacity, translate, scale, transform, border-color, box-shadow;
  transition-duration: 800ms, 850ms, 850ms, 350ms, 350ms, 350ms;
  transition-timing-function: cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms;
}
.scroll-reveal[data-reveal="left"] { translate: -62px 20px; scale: .96; }
.scroll-reveal[data-reveal="right"] { translate: 62px 20px; }
.scroll-reveal.is-revealed,
.scroll-reveal:focus-within { opacity: 1; translate: 0 0; scale: 1; }
/* Contain lateral entrances without creating a horizontal scrollbar. */
main > .section { overflow-x: clip; }
@media (max-width: 680px) {
  .scroll-reveal[data-reveal="left"] { translate: -30px 24px; }
  .scroll-reveal[data-reveal="right"] { translate: 30px 24px; }
  .scroll-reveal.is-revealed, .scroll-reveal:focus-within { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; translate: none !important; scale: 1; transition: none; }
}