/* Motion: the page arrives the way print would if it could move. Headlines rise line by line from
   behind a mask, supporting text follows, hairline lists are drawn left to right, images are
   uncovered from below. Only when the visitor has not asked for reduced motion (html.m). */
:root { --m-ease: cubic-bezier(.16, .84, .24, 1); --m-ease-out: cubic-bezier(.2, .7, .1, 1); }

/* Until the script has prepared the page, the first section waits (never longer than 1.6s). */
.m:not(.m-ready) main > :first-child { opacity: 0; animation: m-failsafe 0s 1.6s forwards; }
@keyframes m-failsafe { to { opacity: 1; } }

/* Headlines: each line slides up from behind its own mask. */
.m .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.m .ln__in { display: block; transform: translate3d(0, 108%, 0) rotate(.5deg); transform-origin: 0 100%; transition: transform 1.15s var(--m-ease) var(--d, 0ms); will-change: transform; }
.m .is-in > .ln > .ln__in, .m .is-in .ln__in { transform: none; }

/* Supporting content: rises a little and comes into focus. */
.m .m-rise { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s var(--m-ease-out) var(--d, 0ms), transform 1.1s var(--m-ease) var(--d, 0ms); }
.m .m-rise.is-in { opacity: 1; transform: none; }

/* Rows with hairlines: drawn from left to right, the text arriving with the line. */
.m .m-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--m-ease) var(--d, 0ms); }
.m .m-wipe.is-in { clip-path: inset(0 0 0 0); }

/* Images and frames: uncovered from below, settling into place. */
.m .m-media { clip-path: inset(18% 0 0 0); transform: scale(1.035); transform-origin: 50% 100%; opacity: 0; transition: clip-path 1.4s var(--m-ease) var(--d, 0ms), transform 1.6s var(--m-ease) var(--d, 0ms), opacity .5s linear var(--d, 0ms); }
.m .m-media.is-in { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }

/* Between pages: the header stays put, the old page steps back, the new one rises in. */
@view-transition { navigation: auto; }
.header { view-transition-name: site-header; }
.m main { view-transition-name: page; }
::view-transition-old(page) { animation: m-page-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(page) { animation: m-page-in .7s var(--m-ease) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@keyframes m-page-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes m-page-in { from { opacity: 0; transform: translateY(26px); } }

@media (prefers-reduced-motion: reduce) {
  .m .ln__in, .m .m-rise, .m .m-wipe, .m .m-media { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}