/* Auréole — motion guard.
 *
 * Put this inline in <head>, before any stylesheet, together with:
 *   <script>document.documentElement.classList.add('js-motion')</script>
 *
 * Elements to animate are hidden only when JS is running and motion is not
 * ready yet: no flash of content before the reveal, and no content lost when
 * JS is off. If the motion script never loads, the CSS failsafe shows
 * everything after 3 s anyway.
 */
html.js-motion:not(.motion-ready) [data-reveal],
html.js-motion:not(.motion-ready) [data-split] {
  opacity: 0;
  animation: aureole-failsafe 0s 3s forwards;
}
@keyframes aureole-failsafe { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html.js-motion:not(.motion-ready) [data-reveal],
  html.js-motion:not(.motion-ready) [data-split] { opacity: 1; animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Masked lines from SplitText: keep descenders visible. */
[data-split] .line-mask, [data-split] [class*="-mask"] { padding-bottom: 0.08em; margin-bottom: -0.08em; }
