/*
 * Wrapped motion · the numbers (wrapped-motion/cards.js, picks.js, hours.js): only the parts those modules
 * add. Every rule hangs on a class the module sets while it runs, so with reduced motion (no modules), or
 * when a module fails, the slides look exactly as wrapped.css draws them.
 */

/* One canvas per slide for flying cards, ink rings, speckles and gold leaf; gone when the enter ends. */
.mn-fx { position: absolute; z-index: 2; top: 0; left: 0; display: block; pointer-events: none; }

/* ---------- picks: the covers hang on a rope like lanterns ---------- */

.wr-s-picks.mn-rope .wr-covers { position: relative; justify-content: space-evenly; margin-top: 5.4cqh; padding: 0 0 calc(var(--mn-sag, 12px) + 6px); }
.wr-s-picks.mn-rope .wr-cover { width: var(--mn-cover, min(16cqw, 12.5cqh)); margin-left: 0; transform: none; }
/* The peg that holds each cover on the rope. */
.wr-s-picks.mn-rope .wr-cover::before {
    content: ''; position: absolute; z-index: 2; top: -11px; left: 50%; width: 6px; height: 16px; margin-left: -3px;
    border-radius: 1px; background: #c9a46a; box-shadow: 1px 1px 0 rgba(0, 0, 0, .5), inset 0 -5px 0 rgba(0, 0, 0, .18);
}
.mn-rope-line { position: absolute; z-index: 0; top: 0; left: 0; overflow: visible; pointer-events: none; }
.mn-rope-line path { fill: none; stroke-linecap: round; }
.mn-rope-line .mn-rope-a { stroke: rgba(242, 238, 223, .62); stroke-width: 2.2; }
.mn-rope-line .mn-rope-b { stroke: rgba(20, 20, 22, .55); stroke-width: 2.2; stroke-dasharray: 2 3.2; }
/* A lit lantern: warm light behind a cover whose evening ended in a pick. */
.mn-glow {
    position: absolute; z-index: -1; inset: -34% -48%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 184, 104, .5), rgba(239, 75, 63, .16) 60%, rgba(239, 75, 63, 0));
}
/* The ink ring a 了 leaves when it lands. */
.mn-ring { position: absolute; inset: -5px; border: 2px solid var(--red, #ef4b3f); border-radius: 50%; opacity: 0; pointer-events: none; }
/* Warm light behind the big number of a slide (picks: a lantern, hours: lacquer catching it). */
.mn-bloom {
    position: absolute; z-index: -1; top: 50%; left: 0; width: 120%; aspect-ratio: 1; margin: -60% 0 0 -22%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(255, 170, 92, .26), rgba(239, 75, 63, .1) 50%, rgba(239, 75, 63, 0));
}
/* Only a containing block for the bloom; nothing moves. */
.wr-s-picks .wr-figure, .wr-s-hours .wr-figure { position: relative; }
.wr-s-hours .mn-bloom { background: radial-gradient(closest-side, rgba(255, 222, 170, .3), rgba(255, 210, 150, .08) 55%, rgba(255, 210, 150, 0)); }