/* Page transitions. As a page loads it fades in, the nav drops into place and the hero's parts rise
   in one after another; transitions.js fades the page out before following a link to another page of
   the site. site.css turns every animation off for reduced motion, and transitions.js then navigates
   without waiting. All of it is CSS animation that ends fully visible, so nothing can stay hidden. */

body { animation: page-in 0.5s ease-out both; }
@keyframes page-in { from { opacity: 0; } }

.nav { animation: nav-in 0.6s ease-out 0.1s both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } }

.hero__copy > *,
.page-hero .container > * { animation: rise-in 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero__copy > :nth-child(1), .page-hero .container > :nth-child(1) { animation-delay: 0.1s; }
.hero__copy > :nth-child(2), .page-hero .container > :nth-child(2) { animation-delay: 0.18s; }
.hero__copy > :nth-child(3), .page-hero .container > :nth-child(3) { animation-delay: 0.26s; }
.hero__copy > :nth-child(4), .page-hero .container > :nth-child(4) { animation-delay: 0.34s; }
.hero__copy > :nth-child(5), .page-hero .container > :nth-child(5) { animation-delay: 0.42s; }
.hero__copy > :nth-child(6), .page-hero .container > :nth-child(6) { animation-delay: 0.5s; }
.hero__copy > :nth-child(n+7), .page-hero .container > :nth-child(n+7) { animation-delay: 0.58s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } }

.hero__photo { animation: photo-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
@keyframes photo-in { from { opacity: 0; transform: scale(0.95); } }

/* Leaving: the page fades out and drifts up a little. The drift is on main, not body, so the sticky
   nav stays put while it fades. */
html.is-leaving body { animation: page-out 0.28s ease-in both; }
html.is-leaving main { animation: drift-out 0.28s ease-in both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes drift-out { to { transform: translateY(-10px); } }