/* ============================================================
   MJC DIVI 5 TEXT ANIMATIONS v6
   PRODUCTION / DIVI SAFE

   WICHTIG:
   - Keine body-, html-, :root-, *-, div-, p- oder span-Globalstyles
   - Kein Hintergrund
   - Kein Margin-/Padding-Reset
   - Kein Font-Override
   - Kein Textify.min.css erforderlich
   ============================================================ */


/* ============================================================
   TEXTIFY / BASIS-RENDERING
   Nur Elemente mit expliziten MJC-Klassen
   ============================================================ */

[class*="mjc-txt-"],
[class*="mjc-scroll-"],
[class*="mjc-slow-"],
[class*="mjc-blur-"],
[class*="mjc-mask-"],
[class*="mjc-gentle-"],
[class*="mjc-editorial-"],
.mjc-soft-zoom,
.mjc-perspective-in,
.mjc-tracking-in,
.mjc-underline-reveal,
.mjc-underline-scrub,
.mjc-gsap-fade-up,
.mjc-gsap-scrub {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   VON UNS PER JS GESPLITTETE WÖRTER / BUCHSTABEN
   ============================================================ */

.mjc-scroll-word,
.mjc-scroll-char {
  display: inline-block;
  position: relative;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}


/* ============================================================
   OPTIONALER FOUC-SCHUTZ
   Nur aktiv, wenn zusätzlich "mjc-animated-target" gesetzt ist.
   ============================================================ */

.mjc-animated-target {
  visibility: hidden;
}

.mjc-animated-target.mjc-animation-ready {
  visibility: visible;
}


/* ============================================================
   MASK / CLIP-PATH
   ============================================================ */

.mjc-mask-reveal,
.mjc-mask-scrub {
  will-change: clip-path, opacity;
}


/* ============================================================
   BLUR
   ============================================================ */

.mjc-blur-in,
.mjc-scroll-blur,
.mjc-scroll-words-blur .mjc-scroll-word,
.mjc-scroll-chars-blur .mjc-scroll-char {
  will-change: filter, opacity, transform;
}


/* ============================================================
   3D / PERSPECTIVE
   ============================================================ */

.mjc-perspective-in {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


/* ============================================================
   TRACKING
   ============================================================ */

.mjc-tracking-in {
  will-change: letter-spacing, opacity;
}


/* ============================================================
   UNDERLINE REVEAL
   ============================================================ */

.mjc-underline-reveal,
.mjc-underline-scrub {
  --mjc-line-scale: 0;
  position: relative;
  display: inline-block;
}

.mjc-underline-reveal::after,
.mjc-underline-scrub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.06em;
  background: currentColor;
  transform: scaleX(var(--mjc-line-scale));
  transform-origin: left center;
  pointer-events: none;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  [class*="mjc-txt-"],
  [class*="mjc-scroll-"],
  [class*="mjc-slow-"],
  [class*="mjc-blur-"],
  [class*="mjc-mask-"],
  [class*="mjc-gentle-"],
  [class*="mjc-editorial-"],
  .mjc-soft-zoom,
  .mjc-perspective-in,
  .mjc-tracking-in,
  .mjc-gsap-fade-up,
  .mjc-gsap-scrub,
  .mjc-animated-target {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    letter-spacing: normal !important;
  }

  .mjc-underline-reveal,
  .mjc-underline-scrub {
    --mjc-line-scale: 1 !important;
  }
}


/* ============================================================
   V7 - SPEED VARIANTS
   ============================================================ */

[class*="mjc-mask-reveal-"],
[class*="mjc-slow-fade-"],
[class*="mjc-blur-in-"],
[class*="mjc-soft-zoom-"],
[class*="mjc-gentle-right-"],
[class*="mjc-gentle-left-"] {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

[class*="mjc-mask-reveal-"] {
  will-change: clip-path, opacity;
}

[class*="mjc-blur-in-"] {
  will-change: filter, opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  [class*="mjc-mask-reveal-"],
  [class*="mjc-slow-fade-"],
  [class*="mjc-blur-in-"],
  [class*="mjc-soft-zoom-"],
  [class*="mjc-gentle-right-"],
  [class*="mjc-gentle-left-"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}


/* ============================================================
   V8 - GENERISCHE DAUER-SUFFIXE
   ============================================================ */

[class*="mjc-mask-reveal-"] {
  will-change: clip-path, opacity;
}

[class*="mjc-blur-in-"],
[class*="mjc-scroll-blur-"],
[class*="mjc-scroll-words-blur-"] .mjc-scroll-word,
[class*="mjc-scroll-chars-blur-"] .mjc-scroll-char {
  will-change: filter, opacity, transform;
}

[class*="mjc-underline-reveal-"],
[class*="mjc-underline-scrub-"] {
  --mjc-line-scale: 0;
  position: relative;
  display: inline-block;
}

[class*="mjc-underline-reveal-"]::after,
[class*="mjc-underline-scrub-"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.06em;
  background: currentColor;
  transform: scaleX(var(--mjc-line-scale));
  transform-origin: left center;
  pointer-events: none;
}


/* ============================================================
   V9 - WORD-FLOW REVEALS
   ============================================================ */

.mjc-word-flow-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.mjc-word-flow-item {
  display: inline-block;
  position: relative;
  backface-visibility: hidden;
  will-change: transform, opacity, filter, clip-path;
}

[class*="mjc-word-mask-ltr-"],
[class*="mjc-word-fade-ltr-"],
[class*="mjc-word-slide-ltr-"],
[class*="mjc-word-lift-ltr-"],
[class*="mjc-word-blur-ltr-"],
[class*="mjc-word-scale-ltr-"],
[class*="mjc-word-editorial-ltr-"] {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  .mjc-word-flow-item {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}


/* ============================================================
   V10 - TYPOGRAPHY SAFE WORD FLOW
   Die erzeugten Wort-Spans dürfen NIEMALS Divi Typography ändern.
   ============================================================ */

.mjc-word-flow-wrap,
.mjc-word-flow-item {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  font-variant: inherit !important;
  font-stretch: inherit !important;

  line-height: inherit !important;
  letter-spacing: inherit !important;
  word-spacing: inherit !important;

  color: inherit !important;

  text-align: inherit;
  text-transform: inherit !important;
  text-decoration: inherit;
  text-shadow: inherit;

  vertical-align: baseline;
}

.mjc-word-flow-wrap {
  display: inline-block;
  overflow: hidden;

  /*
   * Keine eigene Zeilenhöhe oder Box-Höhe erzeugen.
   */
  line-height: inherit !important;
}

.mjc-word-flow-item {
  display: inline-block;
  position: relative;

  /*
   * Animation darf ausschließlich Transform / Opacity / Filter / ClipPath
   * beeinflussen, niemals Typografie.
   */
  will-change: transform, opacity, filter, clip-path;
  backface-visibility: hidden;
}

/*
 * Auch Links, Strong, Em usw. innerhalb eines animierten Textes
 * behalten ihre ursprüngliche Typografie.
 */
[class*="mjc-word-"] a,
[class*="mjc-word-"] strong,
[class*="mjc-word-"] b,
[class*="mjc-word-"] em,
[class*="mjc-word-"] i {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}


/* ============================================================
   V11 - CONTINUOUS WORD FLOW
   ============================================================ */

[class*="mjc-word-mask-ltr-"] .mjc-word-flow-wrap,
[class*="mjc-word-fade-ltr-"] .mjc-word-flow-wrap,
[class*="mjc-word-slide-ltr-"] .mjc-word-flow-wrap,
[class*="mjc-word-lift-ltr-"] .mjc-word-flow-wrap,
[class*="mjc-word-blur-ltr-"] .mjc-word-flow-wrap,
[class*="mjc-word-scale-ltr-"] .mjc-word-flow-wrap,
[class*="mjc-word-editorial-ltr-"] .mjc-word-flow-wrap {
  overflow: visible;
}

/*
 * Nur die eigentliche Wort-Maske braucht Clip-Verhalten am Wort selbst.
 */
[class*="mjc-word-mask-ltr-"] .mjc-word-flow-item {
  overflow: hidden;
}


/* ============================================================
   V13 - RESPONSIVE MULTILINE UNDERLINE
   ============================================================ */

[class*="mjc-underline-lines-scrub-"],
[class*="mjc-underline-lines-reveal-"] {
  position: relative;

  /*
   * Optional je Element überschreibbar:
   *
   * --mjc-underline-thickness: 2px;
   * --mjc-underline-offset-px: 3;
   */
  --mjc-underline-thickness: max(1px, 0.06em);
}

.mjc-underline-overlay {
  position: absolute;
  inset: 0;

  display: block;
  overflow: visible;

  pointer-events: none;
  z-index: 1;

  font: inherit;
  color: inherit;
}

.mjc-underline-line {
  position: absolute;
  display: block;

  height: var(--mjc-underline-thickness);
  background: currentColor;

  transform: scaleX(0);
  transform-origin: left center;

  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .mjc-underline-line {
    transform: scaleX(1) !important;
  }
}