.btn::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
.btn.ripple::after {
  left: var(--ripple-x);
  top: var(--ripple-y);
  animation: ripple .55s ease-out;
}
@keyframes ripple {
  from { transform: scale(0); opacity: .7; }
  to { transform: scale(28); opacity: 0; }
}
.hover-lift { transition: transform .22s ease, box-shadow .22s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.parallax-soft { background-attachment: fixed; }
@media (max-width: 768px) { .parallax-soft { background-attachment: scroll; } }