/*! RM Animate 2.0 core: Safari-safe tokens, native-dropdown keyframes, and fail-open states. */
:root {
  --rm-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --rm-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --rm-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --rm-ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
  --rm-ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --rm-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rm-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --rm-ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --rm-ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --rm-ease-spring: cubic-bezier(0.16, 1.22, 0.3, 1);
  --rm-ease-spring-soft: cubic-bezier(0.22, 1.08, 0.36, 1);
  --rm-ease-bounce-out: cubic-bezier(0.34, 1.32, 0.64, 1);
  --rm-hidden-o: 0.01;
}

/* Both entrance paths run these keyframes: Elementor's dropdown via .animated
   (presets.css), the RM runtime via .rm-in (below). CSS restarts an animation
   only when the computed animation-name CHANGES — re-triggers are inert. */
@keyframes rm-in {
  from {
    opacity: var(--rm-from-o, var(--rm-hidden-o, 0.01));
    transform: translate3d(var(--rm-x, 0), var(--rm-y, 0), 0)
      scale(var(--rm-scale, 1)) rotate(var(--rm-rot, 0deg)) skewY(var(--rm-skew, 0deg));
    filter: var(--rm-from-f, none);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg) skewY(0deg);
    filter: none;
  }
}

@keyframes rm-in-clip {
  from {
    clip-path: inset(var(--rm-clip, 0 0 100% 0));
    transform: translate3d(var(--rm-x, 0), var(--rm-y, 0), 0);
    opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* Entrance engine: the runtime only toggles classes. fill-mode 'both' holds the
   from-state through the delay; per-child --rm-stagger composes with --rm-delay.
   :not(.rm-done) is the replay latch. */
html.rm-js .rm-anim.rm-in:not(.rm-done) {
  animation-name: var(--rm-kf, rm-in);
  animation-duration: var(--rm-duration, 0.9s);
  animation-timing-function: var(--rm-ease, var(--rm-ease-out-quint));
  animation-delay: calc(var(--rm-delay, 0s) + var(--rm-stagger, 0s));
  animation-fill-mode: both;
}

/* Latched = finished: can neither replay nor be re-hidden, whatever late script
   touches its classes. Only the Replay leave handler clears rm-done. */
html.rm-js .rm-anim.rm-done {
  opacity: 1 !important;
  animation: none !important;
}

/* will-change exists only while Anime.js owns an active effect. Permanent
   compositor promotion is costly on iOS, especially across long Elementor pages. */
.rm-running {
  backface-visibility: hidden;
  will-change: opacity, transform;
}
.rm-running.rm-blur-in,
.rm-running.rm-blur-rise,
.rm-split .rm-u.rm-running { will-change: opacity, transform, filter; }
.rm-running.rm-reveal-up,
.rm-running.rm-reveal-down,
.rm-running.rm-reveal-left,
.rm-running.rm-reveal-right { will-change: transform, clip-path; }

/* Skip and recovery states reveal content without overwriting author-defined
   transforms or filters. Anime.js reverts its temporary inline values itself. */
.rm-anim.rm-skip,
.rm-split.rm-skip { opacity: 1 !important; animation: none !important; }
.rm-anim.elementor-invisible,
.rm-stagger-child.elementor-invisible { visibility: visible !important; }

@media (prefers-reduced-motion: reduce) {
  html.rm-js:not(.rm-reduce-fade) .rm-anim,
  html.rm-reduce:not(.rm-reduce-fade) .rm-anim,
  html.rm-js:not(.rm-reduce-fade) .rm-split,
  html.rm-reduce:not(.rm-reduce-fade) .rm-split {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  html.rm-js.rm-reduce-fade .rm-anim.rm-in {
    --rm-x: 0px;
    --rm-y: 0px;
    --rm-scale: 1;
    --rm-rot: 0deg;
    --rm-skew: 0deg;
    --rm-from-f: none;
    --rm-kf: rm-in;
    animation-duration: 0.25s !important;
    animation-delay: 0s !important;
  }
  .animated[class*="rm-"] { animation-duration: 0.01ms !important; }
}

/* CSS is only the fail-open backup here. The runtime also checks these queries
   before it creates split markup or a WAAPI animation. */
@media (max-width: 767px) {
  html.rm-js .rm-off-mobile,
  html.rm-js .rm-off-mobile .rm-u {
    opacity: 1 !important;
    animation: none !important;
    will-change: auto !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  html.rm-js .rm-off-tablet,
  html.rm-js .rm-off-tablet .rm-u {
    opacity: 1 !important;
    animation: none !important;
    will-change: auto !important;
  }
}