/* ══════════════════════════════════════════════════════════════════════════════
   vitalite-motion.css — revealed by vitalite-motion.js, loaded right after
   vitalite-ui.css. Kept in a second file so the motion layer can be removed on
   its own without losing the design-system rules.

   THE IMPORTANT PART: nothing here applies until JavaScript adds the
   `.vt-reveal` class. If the script is blocked, slow, or throws, no element
   ever gets the class and every block stays visible. A stylesheet that hides
   content by default is the classic way to ship a blank page.
   ══════════════════════════════════════════════════════════════════════════════ */

.vt-reveal {
  opacity: 0;
  transform: translateY(12px);
}
.vt-reveal.vt-revealed {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-slow) var(--motion-ease),
              transform var(--motion-slow) var(--motion-ease);
}

/* Readers who ask for less motion get the same page with no motion at all.
   The class is still added and removed, so the observer keeps working, but
   nothing animates. vitalite-ui.css already neutralises durations; this makes
   the intent explicit for these two classes. */
@media (prefers-reduced-motion: reduce) {
  .vt-reveal { opacity: 1; transform: none; }
  .vt-reveal.vt-revealed { transition: none; }
}