/* =====================================================
   SCROLL REVEAL
   Loaded early so section stylesheets keep the upper hand
   on :hover transforms.
   ====================================================== */

/* The "left"/"right" reveals start offset horizontally, which would widen the
   page while they wait to fire. `clip` contains that without creating a scroll
   container, so smooth scrolling and sticky positioning keep working. */
html {
    overflow-x: clip;
}

[data-reveal] {
    opacity: 0;
    transform: var(--reveal-from, translateY(28px));
    transition: opacity 720ms cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms),
                transform 720ms cubic-bezier(.2, .8, .2, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

[data-reveal="up"]    { --reveal-from: translateY(28px); }
[data-reveal="down"]  { --reveal-from: translateY(-24px); }
[data-reveal="left"]  { --reveal-from: translateX(-44px); }
[data-reveal="right"] { --reveal-from: translateX(44px); }
[data-reveal="scale"] { --reveal-from: scale(.94); }

/* Once revealed the element must own its own transform again, otherwise the
   card :hover lifts would be cancelled by the reveal rule above. */
[data-reveal].is-revealed {
    will-change: auto;
}

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