/* Things settle onto the page as you scroll, like prints dropped on a table. */
.js .reveal { opacity: 0; transform: translateY(18px) rotate(var(--r, 0deg)); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.stamp.reveal.in:nth-child(1) { transform: rotate(-2deg); }
.stamp.reveal.in:nth-child(2) { transform: rotate(1.5deg) translateY(10px); transition-delay: .08s; }
.stamp.reveal.in:nth-child(3) { transform: rotate(-1deg); transition-delay: .16s; }

.hero-title h1, .hero-title .museum, .hero-title .note { animation: settle .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-title .museum { animation-delay: .15s; }
.hero-title .note { animation-delay: .3s; }
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
.hero-title .museum { animation-name: settle-tilt; }
@keyframes settle-tilt { from { opacity: 0; transform: translateY(14px) rotate(-4deg); } to { transform: rotate(-4deg); } }
.hero-title .museum svg path { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 1s .7s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-title .museum svg path { stroke-dashoffset: 0; }
}