/*
 * MX Fade and Scroll-Reveal Effects
 * ---------------------------------
 * External stylesheet for My MX Data landing pages.
 *
 * Required HTML class:
 *   class="mxe-rv"
 *
 * Optional effect selector:
 *   data-reveal="rise"
 *
 * Optional stagger delay:
 *   data-delay="1" through data-delay="8"
 *
 * The landing-page JavaScript adds the class "--in" when an element enters
 * the viewport. Elements without data-reveal use the default "rise" effect.
 */

/* Shared timing controls. Adjust these once to tune every reveal. */
#mxe-root {
  --mxe-reveal-duration: 0.82s;
  --mxe-reveal-duration-long: 0.96s;
  --mxe-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Base reveal: ideal for general text, buttons and mixed content. */
#mxe-root .mxe-rv {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(4px);
  transition:
    opacity var(--mxe-reveal-duration) var(--mxe-reveal-ease),
    transform var(--mxe-reveal-duration-long) var(--mxe-reveal-ease),
    filter var(--mxe-reveal-duration) ease,
    clip-path var(--mxe-reveal-duration-long) var(--mxe-reveal-ease);
  will-change: opacity, transform, filter, clip-path;
}

/* RISE: dependable default for body copy, CTA groups and stacked sections. */
#mxe-root .mxe-rv[data-reveal="rise"] {
  transform: translate3d(0, 30px, 0);
}

/* LEFT: works well for cards or content entering from the left column. */
#mxe-root .mxe-rv[data-reveal="left"] {
  transform: translate3d(-44px, 8px, 0) rotate(-0.35deg);
}

/* RIGHT: pair with LEFT for alternating grids and two-column layouts. */
#mxe-root .mxe-rv[data-reveal="right"] {
  transform: translate3d(44px, 8px, 0) rotate(0.35deg);
}

/* SCALE: suitable for dashboards, diagrams, screenshots and feature panels. */
#mxe-root .mxe-rv[data-reveal="scale"] {
  transform: translate3d(0, 18px, 0) scale(0.94);
  filter: blur(6px);
}

/* SOFT: a calm, premium reveal for headings, introductions and quotations. */
#mxe-root .mxe-rv[data-reveal="soft"] {
  transform: translate3d(0, 18px, 0);
  filter: blur(9px);
}

/* CLIP: useful for banners, notices, wide cards and section summaries. */
#mxe-root .mxe-rv[data-reveal="clip"] {
  transform: translate3d(0, 20px, 0);
  clip-path: inset(0 0 26% 0 round 20px);
}

/* FADE: minimal movement for legal copy, FAQs or motion-sensitive layouts. */
#mxe-root .mxe-rv[data-reveal="fade"] {
  transform: none;
  filter: none;
}

/* ZOOM: adds depth to hero visuals, product demos and central illustrations. */
#mxe-root .mxe-rv[data-reveal="zoom"] {
  transform: translate3d(0, 12px, 0) scale(1.075);
  filter: blur(7px);
}

/* POP: best for compact cards, icons, badges and short proof points. */
#mxe-root .mxe-rv[data-reveal="pop"] {
  transform: translate3d(0, 22px, 0) scale(0.84);
  filter: blur(3px);
}

/* DRIFT: a more editorial entrance for process steps and alternating stories. */
#mxe-root .mxe-rv[data-reveal="drift"] {
  transform: translate3d(-20px, 38px, 0) rotate(-1deg);
  filter: blur(5px);
}

/* FLIP: use sparingly on standalone cards, statistics or key callouts. */
#mxe-root .mxe-rv[data-reveal="flip"] {
  transform: perspective(900px) translate3d(0, 24px, 0) rotateX(13deg);
  transform-origin: 50% 100%;
  filter: blur(4px);
}

/* CURTAIN: particularly effective for section headings and wide media blocks. */
#mxe-root .mxe-rv[data-reveal="curtain"] {
  transform: translate3d(0, 12px, 0);
  clip-path: inset(0 0 100% 0 round 18px);
  filter: blur(2px);
}

/* BLUR-UP: a cinematic option for large statements and final CTA panels. */
#mxe-root .mxe-rv[data-reveal="blur-up"] {
  transform: translate3d(0, 16px, 0) scale(0.985);
  filter: blur(14px);
}

/* Shared visible state applied by the IntersectionObserver. */
#mxe-root .mxe-rv.--in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(-48px round 0);
  will-change: auto;
}

/* Stagger utilities. Use neighbouring values for a cascading grid. */
#mxe-root .mxe-rv[data-delay="1"] { transition-delay: 0.08s; }
#mxe-root .mxe-rv[data-delay="2"] { transition-delay: 0.16s; }
#mxe-root .mxe-rv[data-delay="3"] { transition-delay: 0.24s; }
#mxe-root .mxe-rv[data-delay="4"] { transition-delay: 0.32s; }
#mxe-root .mxe-rv[data-delay="5"] { transition-delay: 0.40s; }
#mxe-root .mxe-rv[data-delay="6"] { transition-delay: 0.48s; }
#mxe-root .mxe-rv[data-delay="7"] { transition-delay: 0.56s; }
#mxe-root .mxe-rv[data-delay="8"] { transition-delay: 0.64s; }

/* Optional speed overrides for one-off elements. */
#mxe-root .mxe-rv[data-reveal-speed="fast"] {
  --mxe-reveal-duration: 0.58s;
  --mxe-reveal-duration-long: 0.68s;
}

#mxe-root .mxe-rv[data-reveal-speed="slow"] {
  --mxe-reveal-duration: 1.02s;
  --mxe-reveal-duration-long: 1.18s;
}

/* Accessibility: reveal content immediately when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  #mxe-root .mxe-rv,
  #mxe-root .mxe-rv.--in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}