/* How a page arrives.
 *
 * Hand-written, like _ours.css, _listing.css and _links.css. No design file
 * draws this; its mock is the sheet at /design-2026/entrances.html, built by
 * build-entrances.py.
 *
 * Taken off noechague-site.vercel.app, which Jack liked. Study 04 of the
 * eight, at his word on 9 September: "a longer rise". Twenty-four pixels
 * rather than the reference's eight, everything else as they have it.
 *
 * Three things worth keeping in mind about it.
 *
 * It is not triggered by scrolling. Every band carries its delay from the
 * moment the page loads, and the ones far down are still arriving as you
 * begin to move, which is what makes it read as scroll-reveal. That is
 * steadier than watching the viewport: nobody who scrolls quickly is ever
 * stranded in front of an empty page, and nothing hides itself again on the
 * way back up.
 *
 * The blur is the whole of it. Fade and rise is what every site has; four
 * pixels of blur resolving is the part that looks expensive.
 *
 * There is no `to` block on purpose. A keyframe with only a `from` animates
 * to whatever the element already is, so nothing has to be restated here and
 * nothing can drift out of step with the design sheets.
 */

@keyframes arrive {
    from {
        opacity: 0;
        transform: translate3d(0, var(--arrive-rise, 24px), 0);
        filter: blur(var(--arrive-blur, 4px));
    }
}

/* The bands of a page, in the order they are written. Each is a fifth of a
   second behind the one above it. */
.arrive > .band,
.arrive > section {
    animation: arrive var(--arrive-ms, 900ms) ease both;
}

.arrive > *:nth-child(1)  { animation-delay: 0ms }
.arrive > *:nth-child(2)  { animation-delay: 200ms }
.arrive > *:nth-child(3)  { animation-delay: 400ms }
.arrive > *:nth-child(4)  { animation-delay: 600ms }
.arrive > *:nth-child(5)  { animation-delay: 800ms }
.arrive > *:nth-child(6)  { animation-delay: 1000ms }
.arrive > *:nth-child(7)  { animation-delay: 1200ms }
.arrive > *:nth-child(8)  { animation-delay: 1400ms }
/* Past the eighth, everything shares the last delay rather than waiting
   longer and longer: a reader who scrolls straight down should not meet a
   band that has not started yet. */
.arrive > *:nth-child(n+9) { animation-delay: 1400ms }

/* The hero is the page. It should not fade in behind the reader's eye, and a
   blur on a full-bleed photograph at load looks like a fault rather than an
   effect. */
.arrive > .hero {
    animation: none;
}

/* Anyone who asked for less movement gets the page whole and still, which is
   the point of asking. */
@media (prefers-reduced-motion: reduce) {
    .arrive > .band,
    .arrive > section {
        animation: none;
    }
}