/* Homepage re-entrant scroll reveal - the visual half of JsPages/HomeReveal.js.

   Model: an element tagged data-reveal (or the children of a data-reveal-stagger container) is HIDDEN
   until the script adds .is-in, and gets its entrance from a CSS keyframe animation that runs each time
   the class is (re)added. The script removes .is-in only once the element is completely outside the
   viewport, so scrolling away and back replays the entrance, and an element touching a viewport edge
   never flickers.

   Everything is gated on html.js (set by an inline script in <head>) and NOT html.reveal-off, which
   the failsafe / an init error / reduced motion adds - so without JS, on a script failure, or with
   reduced motion, all content is simply visible.

   Keyframes only animate opacity and transform (plus a small blur on "fade" and one clip-path on
   "clip"). Animations use fill-mode `backwards`: the from-state holds during a delay and nothing is
   left behind afterwards, so existing hover transforms/transitions on the same elements keep working. */

:root {
    --rv-ease: var(--ease, cubic-bezier(.22, .61, .36, 1));
    --rv-y: 34px;
    --rv-x: 44px;
    --rv-blur: 6px;
    --rv-step: 110ms;
    --rv-dir: 1;
}

html.rtl {
    --rv-dir: -1;
}

@media (max-width: 991.98px) {
    :root { --rv-y: 28px; --rv-x: 30px; --rv-step: 90ms; }
}

@media (max-width: 575.98px) {
    :root { --rv-y: 20px; --rv-x: 16px; --rv-blur: 0px; --rv-step: 60ms; }
}

/* ---- hidden state ------------------------------------------------------------------------------ */
html.js:not(.reveal-off) [data-reveal]:not(.is-in),
html.js:not(.reveal-off) [data-reveal-stagger]:not(.is-in) > * {
    opacity: 0;
}

/* Wide/side entrances must never widen the page while they run. clip (unlike hidden) creates no scroll
   container, so sticky/fixed descendants are unaffected. */
html.js:not(.reveal-off) .page-wrapper {
    overflow-x: clip;
}

/* ---- direction sign: "left" enters from the inline-start side, "right" from the inline-end side ---- */
[data-reveal="left"],
[data-reveal-stagger="left"] > * { --rv-sx: -1; }

[data-reveal="right"],
[data-reveal-stagger="right"] > * { --rv-sx: 1; }

/* ---- stagger index (pure CSS; capped at 8 so a long list never drags on) ---------------------------- */
[data-reveal-stagger] > * { --rv-d: calc(var(--rv-i, 0) * var(--rv-step)); }
[data-reveal-stagger] > :nth-child(1) { --rv-i: 0; }
[data-reveal-stagger] > :nth-child(2) { --rv-i: 1; }
[data-reveal-stagger] > :nth-child(3) { --rv-i: 2; }
[data-reveal-stagger] > :nth-child(4) { --rv-i: 3; }
[data-reveal-stagger] > :nth-child(5) { --rv-i: 4; }
[data-reveal-stagger] > :nth-child(6) { --rv-i: 5; }
[data-reveal-stagger] > :nth-child(7) { --rv-i: 6; }
[data-reveal-stagger] > :nth-child(n+8) { --rv-i: 7; }

/* ---- keyframes --------------------------------------------------------------------------------- */
@keyframes rv-o { from { opacity: 0; } }
@keyframes rv-up { from { transform: translate3d(0, var(--rv-y), 0); } }
@keyframes rv-x { from { transform: translate3d(calc(var(--rv-x) * var(--rv-sx, 1) * var(--rv-dir)), 0, 0); } }
@keyframes rv-scale { from { transform: translate3d(0, 14px, 0) scale(.965); } }
@keyframes rv-soft-up { from { transform: translate3d(0, 10px, 0); } }
@keyframes rv-blur { from { filter: blur(var(--rv-blur)); } }
@keyframes rv-line { from { transform: scaleX(0); } }
@keyframes rv-clip {
    from { clip-path: inset(0 0 100% 0); transform: scale(1.04); }
    to { clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* ---- variants (single element) ----------------------------------------------------------------- */
html.js:not(.reveal-off) [data-reveal="up"].is-in {
    animation: rv-o .7s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-up .85s var(--rv-ease) var(--rv-d, 0ms) backwards;
}

html.js:not(.reveal-off) [data-reveal="left"].is-in,
html.js:not(.reveal-off) [data-reveal="right"].is-in {
    animation: rv-o .7s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-x .85s var(--rv-ease) var(--rv-d, 0ms) backwards;
}

html.js:not(.reveal-off) [data-reveal="scale"].is-in {
    animation: rv-o .7s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-scale .85s var(--rv-ease) var(--rv-d, 0ms) backwards;
}

html.js:not(.reveal-off) [data-reveal="fade"].is-in {
    animation: rv-o .7s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-soft-up .8s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-blur .7s var(--rv-ease) var(--rv-d, 0ms) backwards;
}

html.js:not(.reveal-off) [data-reveal="clip"].is-in {
    animation: rv-o .5s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-clip .9s var(--rv-ease) var(--rv-d, 0ms) backwards;
}

html.js:not(.reveal-off) [data-reveal="line"] {
    transform-origin: left center;
}

html.rtl.js:not(.reveal-off) [data-reveal="line"] {
    transform-origin: right center;
}

html.js:not(.reveal-off) [data-reveal="line"].is-in {
    animation: rv-o .5s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-line .85s var(--rv-ease) var(--rv-d, 0ms) backwards;
}

/* ---- variants (children of a stagger container) ------------------------------------------------- */
html.js:not(.reveal-off) [data-reveal-stagger="up"].is-in > * {
    animation: rv-o .7s var(--rv-ease) var(--rv-d) backwards, rv-up .85s var(--rv-ease) var(--rv-d) backwards;
}

html.js:not(.reveal-off) [data-reveal-stagger="left"].is-in > *,
html.js:not(.reveal-off) [data-reveal-stagger="right"].is-in > * {
    animation: rv-o .7s var(--rv-ease) var(--rv-d) backwards, rv-x .85s var(--rv-ease) var(--rv-d) backwards;
}

html.js:not(.reveal-off) [data-reveal-stagger="scale"].is-in > * {
    animation: rv-o .7s var(--rv-ease) var(--rv-d) backwards, rv-scale .85s var(--rv-ease) var(--rv-d) backwards;
}

/* ---- small screens: shorter travel is set above (--rv-y/--rv-x/--rv-step); the two expensive effects
        are simplified - no blur (--rv-blur:0) and the clip reveal becomes a plain rise. ------------ */
@media (max-width: 575.98px) {
    html.js:not(.reveal-off) [data-reveal="clip"].is-in {
        animation: rv-o .7s var(--rv-ease) var(--rv-d, 0ms) backwards, rv-up .85s var(--rv-ease) var(--rv-d, 0ms) backwards;
    }
}

/* ---- reduced motion: everything visible immediately, nothing animated ---------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.js [data-reveal],
    html.js [data-reveal-stagger] > * {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}