/* Scroll reveal for the landing page (motion.js adds the attributes; without JS, or with reduced motion, nothing is hidden).
   Only opacity and transform move, one quick ease-out, a tiny stagger inside each group. After the reveal motion.js removes the
   attributes again, so hover and press styles of each element work exactly as before. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--reveal-i, 0) * 60ms),
    transform 460ms cubic-bezier(0.23, 1, 0.32, 1) calc(var(--reveal-i, 0) * 60ms);
}

/* Every button confirms the press: a barely visible squeeze while the mouse or finger is down. */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(:disabled):active,
  button:not(:disabled):active {
    transform: scale(0.98);
  }
}

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