/* Entrance animations. A slide gets the class "on" while it is on screen,
   which replays its animations every time the visitor scrolls onto it. */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-14px) rotate(-2deg); } }
@keyframes slam { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes thud { 0%, 100% { transform: none; } 35% { transform: translateY(6px) scale(.985); } }
@keyframes splash { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.rv, .pop, .sl, .stamp, .splash { opacity: 0; }

.on .rv { animation: rise .7s var(--ease) both; }
.on .pop { animation: pop .6s var(--ease) both; }
.on .sl { animation: slide-in .7s var(--ease) both; }
.on .stamp { animation: slam .45s cubic-bezier(.3, .9, .3, 1) both; }
.on .splash { animation: splash .6s ease-out both; }
.on .thud { animation: thud .35s ease-out both; }

.bob { animation: bob 5s ease-in-out infinite; }
.nudge { animation: nudge 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .snap { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .pop, .sl, .stamp { opacity: 1; }
}