/* Animation ---------------------------------------------------------------
   Entrance effects on content fields, driven by AOS (wwwroot/lib/aos). The
   effect names, delays and easings all come from the catalogue in
   ContentEditService, so this file only has to supply what AOS does not.

   AOS's own stylesheet hides every [data-aos] element until its script marks
   it .aos-animate. That is the whole mechanism, and the trap: load the
   stylesheet without the script and every animated field is invisible, with
   no error anywhere. Both layouts load both. */

/* The two effects AOS lacks and the live site's headline uses. Written the
   way AOS writes its own: a start state on the attribute, the rest state
   once animated, and AOS supplies the transition. */
[data-aos="skew-left"] {
    opacity: 0;
    transform: skewX(20deg) translateX(-60px);
}

[data-aos="skew-right"] {
    opacity: 0;
    transform: skewX(-20deg) translateX(60px);
}

[data-aos="skew-left"].aos-animate,
[data-aos="skew-right"].aos-animate {
    opacity: 1;
    transform: none;
}

/* Effects that travel in from a side push an element past the viewport edge
   for their first frame, which on a full bleed page is a horizontal scrollbar.
   AOS's own docs pair the library with this rule for that reason.

   **clip, not hidden, and the difference is not cosmetic.** `hidden` makes an
   element a scroll container, and CSS then refuses to leave the other axis
   `visible` - so `overflow-x: hidden` here silently computed `overflow-y:
   auto` on the body. Bootstrap 5.3's scrollspy picks its IntersectionObserver
   root by asking exactly that question:

       this._rootElement = getComputedStyle(el).overflowY === 'visible' ? null : el

   so it observed against the body instead of the viewport, the root never
   moved as the page scrolled, and every section link froze on whichever one
   happened to match first. Bootstrap 5.1 read scroll events and offsets and
   never looked at overflow, which is why this only appeared when the bundle
   went to 5.3.

   A body that claims to be a scroll container but never scrolls is also a
   plausible reason for SortableJS losing track of a drag - the reordering on
   Settings > Menu was reported broken, and this rule landed on 2026-09-21,
   six days before the Bootstrap upgrade it was blamed on. **Unconfirmed**:
   synthetic drags could not be made to fire SortableJS's own events reliably,
   so that link was never actually demonstrated either way. It wants a human
   with a mouse before anyone writes it down as fact.

   `clip` clips without creating a scroll container, leaves overflow-y
   `visible`, and does not break the `position: sticky` header the way moving
   this rule to `html` would. Anything that wants to clip an axis on a page
   this size wants `clip` and not `hidden` for the same reasons. */
body {
    overflow-x: clip;
}

/* Someone who has asked for less motion gets the words, not the entrance.
   The init option only stops the script; the stylesheet would still hide
   everything, so the override has to be here too. */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}