/* Scroll reveal for the Pip flow, matching the LANA pages. Hooked on a data
   attribute rather than a class so it never appears inside a class="" value:
   the page contract tests assert exact class attributes, and a presentation
   hook has no business changing what those say: elements start
   slightly low and transparent and settle into place on a soft ease-out
   (cubic-bezier(0.16, 1, 0.3, 1)). It runs once per element - the observer
   stops watching after the first reveal - so scrolling back up never replays
   it and nothing flickers at a section boundary. */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

/* Two ways this must never hide content. A visitor who asked for less motion
   sees everything immediately, and so does anyone whose browser has no
   IntersectionObserver or ran with JavaScript disabled - pip-reveal.js sets
   .reveal-ready on <html> only once it is certain it can reveal them again. */
html:not(.reveal-ready) [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}