/**
 * Split Text Animation — ported from the UiCore Animate plugin's own
 * feature of the same name (`uicore-animate/assets/css/split.css` +
 * `assets/css/style1.css`'s shared keyframe library, read directly in this
 * dev environment). Keyframes/timing-functions below are copied 1:1 from
 * there under our own `mdsproduct-` names (see
 * Widgets/Base/HasSplitTextAnimation.php for why this is a full port
 * rather than a runtime dependency on that plugin).
 *
 * DOM contract (built by assets/elementor/split-text-animation.js):
 *   .mdsproduct-split-text            the server-rendered wrapper (plain
 *                                      text until JS splits it) — carries
 *                                      --mdsproduct-split-speed/-delay/
 *                                      -stagger as inline custom properties
 *                                      (set per-instance from the widget's
 *                                      own Speed/Delay/Stagger controls).
 *   .mdsproduct-split-item            one character/word/line span, added
 *                                      by JS — carries its own
 *                                      --mdsproduct-split-item-index.
 *   .mdsproduct-split-anim-<token>    added by JS once the wrapper scrolls
 *                                      into view, one class per
 *                                      space-separated token in the
 *                                      Animation control's value (e.g.
 *                                      "fadeInUp blur" -> two classes) —
 *                                      mirrors UiCore's own technique of
 *                                      letting compound values like "X blur"
 *                                      resolve to two separate CSS classes
 *                                      that combine via a compound selector.
 */

/*
 * Items start invisible only once JS has actually split the text (added via
 * the .mdsproduct-split-is-split class JS puts on the wrapper right before
 * inserting the item spans) — the wrapper's plain original text content
 * stays fully visible the whole time before that, so a page with JS
 * disabled (or slow to load) never gets stuck showing blank/invisible
 * headings, unlike hiding the wrapper itself upfront would risk.
 */
.mdsproduct-split-is-split .mdsproduct-split-item {
  display: inline-block;
  opacity: 0;
}

.mdsproduct-split-item {
  animation-fill-mode: both;
  animation-duration: var(--mdsproduct-split-speed, 1500ms);
  animation-delay: calc(var(--mdsproduct-split-delay, 200ms) + var(--mdsproduct-split-stagger, 15ms) * var(--mdsproduct-split-item-index, 0));
}

@keyframes mdsproduct-split-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes mdsproduct-split-fade-in-up {
  0% { transform: translate3d(0, 7vh, 0); }
  100% { transform: translateZ(0); }
}
@keyframes mdsproduct-split-fade-in-down {
  0% { transform: translate3d(0, -7vh, 0); }
  100% { transform: translateZ(0); }
}
@keyframes mdsproduct-split-fade-in-left {
  0% { transform: translate3d(-7vh, 0, 0); }
  100% { transform: translateZ(0); }
}
@keyframes mdsproduct-split-fade-in-right {
  0% { transform: translate3d(7vh, 0, 0); }
  100% { transform: translateZ(0); }
}
@keyframes mdsproduct-split-rotate-in-up-left {
  0% { opacity: 0; transform: translateY(7vh) rotate(8deg) rotateX(65deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mdsproduct-split-blur-in {
  0% { filter: blur(min(max(5px, 1.8cqmin), 16px)); }
  100% { filter: blur(0); }
}
@keyframes mdsproduct-split-zoom-in {
  0% { transform: matrix(.85, 0, 0, .85, 0, 0); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes mdsproduct-split-scale-in {
  0% { transform: scale(.75); }
  100% { transform: none; }
}
@keyframes mdsproduct-split-roll-in {
  0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes mdsproduct-split-zoom-out {
  0% { transform: matrix(1.2, 0, 0, 1.2, 0, 0); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes mdsproduct-split-zoom-out-down {
  0% { transform: matrix3d(1.2, 0, 0, 0, 0, 1.03, .34, .0003, 0, -.34, .94, 0, 0, -60, 0, 1); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes mdsproduct-split-zoom-out-left {
  0% { transform: matrix3d(1.2, 0, 0, .0003, 0, 1.03, .34, 0, 0, -.34, .94, 0, -40, 0, 0, 1); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes mdsproduct-split-zoom-out-right {
  0% { transform: matrix3d(1.2, 0, 0, -.0003, 0, 1.03, .34, 0, 0, -.34, .94, 0, 40, 0, 0, 1); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes mdsproduct-split-zoom-out-up {
  0% { transform: matrix3d(1.2, 0, 0, 0, 0, 1.03, .34, -.0003, 0, -.34, .94, 0, 0, 60, 0, 1); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}

.mdsproduct-split-anim-fadeInUp {
  animation-name: mdsproduct-split-fade-in-up, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-blur.mdsproduct-split-anim-fadeInUp {
  animation-name: mdsproduct-split-fade-in-up, mdsproduct-split-fade-in, mdsproduct-split-blur-in;
  animation-timing-function: cubic-bezier(.24, .74, .39, .96), ease-out, cubic-bezier(0, 0, .15, 1.01);
}
.mdsproduct-split-anim-fadeInDown {
  animation-name: mdsproduct-split-fade-in-down, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-fadeInLeft {
  animation-name: mdsproduct-split-fade-in-left, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-fadeInRight {
  animation-name: mdsproduct-split-fade-in-right, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-fadeInUpAlt {
  animation-name: mdsproduct-split-rotate-in-up-left, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-fadeIn {
  animation-name: mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(0, 0, .2, 1);
}
/*
 * Matches UiCore's own base `.blur{animation-name:uicoreFadeIn,blurIn}`
 * rule (present verbatim, unprefixed, in every one of their style1-8.css
 * files) — it's the fallback used whenever "blur" combines with anything
 * that has no MORE specific compound rule of its own (only "fadeInUp blur"
 * gets one above); "Fade In Blur" resolves to exactly this since "fadeIn"
 * has no directional keyframe to combine specially with blur.
 */
.mdsproduct-split-anim-blur {
  animation-name: mdsproduct-split-fade-in, mdsproduct-split-blur-in;
  animation-timing-function: cubic-bezier(0, 0, .2, 1), ease-out;
}
.mdsproduct-split-anim-zoomIn {
  animation-name: mdsproduct-split-zoom-in, mdsproduct-split-fade-in;
}
.mdsproduct-split-anim-scaleIn {
  animation-name: mdsproduct-split-scale-in, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.25, .46, .45, .94), cubic-bezier(0, 0, .2, 1);
  transform-origin: 50% 0;
}
.mdsproduct-split-anim-rollIn {
  animation-name: mdsproduct-split-roll-in;
}
.mdsproduct-split-anim-zoomOut {
  animation-name: mdsproduct-split-zoom-out, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-zoomOutDown {
  animation-name: mdsproduct-split-zoom-out-down, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-zoomOutLeft {
  animation-name: mdsproduct-split-zoom-out-left, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-zoomOutRight {
  animation-name: mdsproduct-split-zoom-out-right, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}
.mdsproduct-split-anim-zoomOutUp {
  animation-name: mdsproduct-split-zoom-out-up, mdsproduct-split-fade-in;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(0, 0, .2, 1);
}