/* Scroll enhancement: default markup remains visible, including before/without JS. */
:root {
  --reveal-duration: 1s;
  --reveal-easing: ease;
  --reveal-up: 48px;
  --reveal-side: 64px;
}

@keyframes reveal-enter {
  from { opacity: 0; translate: var(--reveal-x, 0px) var(--reveal-y, 0px); }
  to { opacity: 1; translate: 0px 0px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Armed only after a working observer exists; hidden before the delayed trigger, no flash. */
  [data-reveal][data-reveal-state="pending"] { opacity: 0; }
  [data-reveal][data-reveal-state="entering"] {
    animation: reveal-enter var(--reveal-duration) var(--reveal-easing) var(--reveal-delay, 0ms) both;
    will-change: opacity, translate;
  }
}

@media (max-width: 767px) {
  :root { --reveal-duration: .65s; --reveal-up: 24px; --reveal-side: 0px; }
}

/* Reduced motion immediately restores the authored, static layout. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal][data-reveal-state="entering"] { animation: none; }
}

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