@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.btn .ripple {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,.55);
  transform: translate(-50%, -50%);
  animation: ripple .55s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}