/* motion.css - site-wide page transitions and scroll reveals (see assets/js/motion.js).
   Reveal states are transient attributes, so !important only wins while a block animates in;
   the attribute is removed afterwards and the element's own styles apply again. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(.2, .8, .25, 1);
  }
}

[data-reveal] {
  transition:
    opacity 700ms cubic-bezier(.2, .8, .25, 1) var(--reveal-delay, 0ms),
    transform 900ms cubic-bezier(.2, .8, .25, 1) var(--reveal-delay, 0ms) !important;
}
[data-reveal="pending"] {
  opacity: 0 !important;
  transform: translate3d(0, 28px, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: opacity 360ms ease var(--reveal-delay, 0ms) !important; }
  [data-reveal="pending"] { transform: none !important; }
}

@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}