/* Scroll-reveal, progressive enhancement: content is fully visible by
   default. Only once motion.js confirms it can actually run the reveal
   (adds .js-reveal to <html>) does the hidden starting state apply — so
   JS failures, old browsers, or a slow/never-firing IntersectionObserver
   can never leave real content (like the contact form) permanently
   invisible. */
html.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}
html.js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
html.js-reveal [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .5s ease;
}
html.js-reveal [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
html.js-reveal [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
html.js-reveal [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 80ms; }
html.js-reveal [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 160ms; }
html.js-reveal [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 240ms; }
html.js-reveal [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 320ms; }
html.js-reveal [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal], html.js-reveal [data-reveal-group] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto; }
    .article-card, .btn-primary { transition: none !important; }
}