/* TrueFit microsites - shared scroll-reveal library (theme-agnostic).

   Driven by data-reveal on .ms-page, which the renderer sets from the site's
   RevealStyle setting. Every block is wrapped in .ms-rv; the shared observer in
   microsite.js adds .in when a block scrolls into view. Speed comes from
   --ms-rv-dur on .ms-page (set from the RevealSpeed setting).

   Each style declares its hidden AND revealed transform explicitly, using the
   same transform function (e.g. translateY(22px) -> translateY(0)). That matching
   pair is what makes every reveal interpolate reliably in all browsers, Firefox
   included. (Do NOT use "transform: none" for the revealed state - Firefox treats
   the to/from-none transition as a discrete jump, which is why earlier only the
   clip wipe animated.)

   The fade-up / slide-from-left / slide-from-right styles mirror the .rv / .rv-l /
   .rv-r idioms used by the Sanctuary, KPMG and Convex microsites.

   TO ADD A NEW REVEAL: add a hidden rule and a matching ".in" rule below, then add
   the slug to the REVEALS list in microsite-editor.js. No SQL, no server code, no
   theme edits.

   "default" (no attribute) leaves each theme's own .rv hooks alone.
   "none" disables all reveals. Reduced-motion is always honoured. */

.ms-page { --ms-rv-dur: .7s; }

/* Base hidden state + transition - only when an explicit, animating style is on. */
.ms-page[data-reveal]:not([data-reveal="none"]) .ms-rv {
    opacity: 0;
    transition-property: opacity, transform, filter, clip-path;
    transition-duration: var(--ms-rv-dur, .7s);
    transition-timing-function: var(--ms-rv-ease, ease);
    transition-delay: var(--d, 0s);
    will-change: opacity, transform;
}
.ms-page[data-reveal]:not([data-reveal="none"]) .ms-rv.in { opacity: 1; }

/* Under an explicit style the wrapper carries the motion, so silence any inner
   theme reveal hooks to avoid double movement. */
.ms-page[data-reveal]:not([data-reveal="none"]) .ms-rv :is(.rv, .rv-l, .rv-r) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* --- the library: explicit hidden + revealed transforms per style ---------- */
.ms-page[data-reveal="fade"]       .ms-rv    { }
.ms-page[data-reveal="fade"]       .ms-rv.in { }

.ms-page[data-reveal="fadeup"]     .ms-rv    { transform: translateY(22px); }
.ms-page[data-reveal="fadeup"]     .ms-rv.in { transform: translateY(0); }

.ms-page[data-reveal="rise"]       .ms-rv    { transform: translateY(34px); --ms-rv-ease: cubic-bezier(.22, 1, .36, 1); }
.ms-page[data-reveal="rise"]       .ms-rv.in { transform: translateY(0); }

.ms-page[data-reveal="slideleft"]  .ms-rv    { transform: translateX(-34px); }
.ms-page[data-reveal="slideleft"]  .ms-rv.in { transform: translateX(0); }

.ms-page[data-reveal="slideright"] .ms-rv    { transform: translateX(34px); }
.ms-page[data-reveal="slideright"] .ms-rv.in { transform: translateX(0); }

.ms-page[data-reveal="zoom"]       .ms-rv    { transform: scale(.92); }
.ms-page[data-reveal="zoom"]       .ms-rv.in { transform: scale(1); }

.ms-page[data-reveal="blur"]       .ms-rv    { transform: translateY(12px); filter: blur(12px); }
.ms-page[data-reveal="blur"]       .ms-rv.in { transform: translateY(0); filter: blur(0); }

.ms-page[data-reveal="clip"]       .ms-rv    { transform: translateY(14px); clip-path: inset(0 0 100% 0); }
.ms-page[data-reveal="clip"]       .ms-rv.in { transform: translateY(0); clip-path: inset(0 0 0 0); }

/* "None" - kill every reveal on the page (wrapper and inner theme hooks). */
.ms-page[data-reveal="none"] :is(.ms-rv, .rv, .rv-l, .rv-r) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
}

/* Accessibility - never animate for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
    .ms-page[data-reveal] :is(.ms-rv, .rv, .rv-l, .rv-r) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}