/* Motion (Oct 2026), on every page: sections and cards ease in as they
   scroll into view (assets/js/motion.js), and the moving pictures on Home
   (home.css) wait, armed, until they're seen. Only what starts below the fold
   is ever hidden, and the resting state is always the finished one: without
   the script, or with reduced motion (base.css stops every animation), the
   page simply shows. Only opacity and transform move, easing out, no bounce. */

:root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Entrances ---------- */
/* `translate` rather than `transform`, so tilted cards keep their tilt. */
.rv { opacity: 0; translate: 0 18px; }
.rv.rv-in { opacity: 1; translate: 0 0; transition: opacity 700ms var(--ease-out-expo) var(--rv-d, 0ms), translate 900ms var(--ease-out-expo) var(--rv-d, 0ms); }
/* Anything holding a moving drawing only fades in. Sliding, it sits between
   whole pixels while the drawing plays, and the drawing's small words blur. */
.rv:has([data-mo]) { translate: none; }
@media print { .rv { opacity: 1 !important; translate: none !important; } }

/* ---------- Moving pictures (data-mo) ---------- */
/* Armed, below the fold and waiting: each animation holds its first frame. */
.is-armed:not(.is-playing) *, .is-armed:not(.is-playing) *::before, .is-armed:not(.is-playing) *::after { animation-play-state: paused !important; }

/* "Play it again": its room is kept from the start, so nothing shifts when
   motion.js shows it (.mo-on); without the script it stays invisible, and
   with reduced motion it isn't there at all. */
.mo-again { display: flex; justify-content: center; margin-top: 18px; visibility: hidden; }
.mo-on .mo-again { visibility: visible; }
.mo-again .btn { font-size: 15px; }
.mo-again .btn svg { width: 17px; height: 17px; }
[data-motion="reduced"] .mo-again { display: none; }
@media (prefers-reduced-motion: reduce) { .mo-again { display: none; } }