/* Scroll animation. Only applies when motion.js has run and the visitor has not asked for reduced motion. */
html.mo-on { --ease: cubic-bezier(.16, 1, .3, 1); }

/* Progress rule along the top edge */
.mo-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--hi); transform-origin: 0 50%; transform: scaleX(0); z-index: 100; pointer-events: none; }

/* Generic rise */
html.mo-on [data-mo="rise"] { opacity: 0; transform: translateY(42px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
html.mo-on [data-mo="rise"].is-in { opacity: 1; transform: none; }

/* Headlines unmask from below */
html.mo-on [data-mo="mask"] { clip-path: inset(0 0 100% 0); transform: translateY(.18em); transition: clip-path 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
html.mo-on [data-mo="mask"].is-in { clip-path: inset(-10% -5% -25% -5%); transform: none; }

/* Plates wipe open, photo settles */
html.mo-on [data-mo="plate"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); transition-delay: var(--d, 0s); }
html.mo-on [data-mo="plate"].is-in { clip-path: inset(0 0 0 0); }
html.mo-on [data-mo="plate"] img { transform: scale(1.18); transition: transform 1.8s var(--ease); transition-delay: var(--d, 0s); }
html.mo-on [data-mo="plate"].is-in img { transform: none; }

/* Key tags pop in after their plate */
html.mo-on .kk { opacity: 0; transform: scale(.4) rotate(-8deg); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--d, 0s) + .7s + var(--k, 0) * .12s); }
html.mo-on .is-in .kk, html.mo-on .kk.is-in { opacity: 1; transform: none; }

/* Discs grow */
html.mo-on [data-mo="disc"] { transform: scale(0); transition: transform 1.4s var(--ease); transition-delay: var(--d, 0s); }
html.mo-on [data-mo="disc"].is-in { transform: none; }

/* Construction lines draw */
html.mo-on .cons circle, html.mo-on .cons line { stroke-dasharray: 2400; stroke-dashoffset: 2400; transition: stroke-dashoffset 2.4s var(--ease); }
html.mo-on .cons.is-in circle, html.mo-on .cons.is-in line { stroke-dashoffset: 0; }

/* Rules between sections draw across */
html.mo-on .pg main section { border-top-color: transparent !important; position: relative; }
html.mo-on .pg main section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease); z-index: 5; }
html.mo-on .pg main section.is-ruled::before { transform: none; }

/* Code blocks type in line by line */
html.mo-on [data-mo="code"] .ln { opacity: 0; transition: opacity .25s linear; transition-delay: calc(var(--d, 0s) + var(--i) * .07s); }
html.mo-on [data-mo="code"].is-in .ln { opacity: 1; }

/* Scrubbed layers move with the scrollbar, set by motion.js */
html.mo-on [data-scrub] { will-change: translate, scale, rotate; }

@media (prefers-reduced-motion: reduce) {
  html.mo-on * { transition: none !important; }
}