/* ==========================================================================
   KE Animated Text Widget
   ========================================================================== */

.ke-animated-text {
    display: block;
}

/* v0.26.57: Wrapper läuft im normalen Inline-Flow (h-Tag bleibt block-level).
   Vorher `display: inline-flex; flex-wrap: wrap` — Flex-Items sind atomare
   Boxen, weshalb der gesamte Prefix-Span als ein Stück umgebrochen wurde:
   sobald Prefix + Animated nicht zusammen in eine Zeile passten, rutschte
   der animierte Teil komplett in die nächste Zeile, obwohl im Prefix noch
   Platz war. Block-Wrapper + inline/inline-block-Children lassen den Browser
   den Prefix-Text natürlich brechen, der animierte Teil schließt nahtlos an. */
/* v0.32.10: Wrapper bekommt feste line-height. `line-height: inherit` an den
   inline-block-Children (rotating/word) hatte ohne expliziten Wrapper-Wert keinen
   Effekt — `inherit` von `normal` ist immer noch `normal`, und bei `line-height:
   normal` bestimmen Browser die inline-block-Höhe vom Glyph-Inhalt → wackelt
   weiterhin zwischen Wörtern mit verschiedenen Ascendern/Descendern. Festes 1.5
   gibt zusätzlich genug Platz für Descender (g/y) und Ascender (f/h) bei großen
   Schriftgrößen. User kann via Elementor-Typography überschreiben. */
.ke-animated-text-wrapper {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.ke-animated-text-prefix,
.ke-animated-text-suffix {
    display: inline;
    line-height: inherit;
}

/* v0.26.67: `overflow: hidden` ergibt bei inline-block-Containern eine
   verschobene Baseline (Spec: Bottom der Margin-Box statt Schrift-Baseline).
   v0.32.10: `overflow: visible` — Glyphen mit Descender (g/y) oder hohen
   Ascendern (f/h) wurden bei großen Schriftgrößen (z.B. font-size: 42) durch
   `overflow: clip` abgeschnitten. visible löst das. Slide/Fade-Animationen
   ragen kurz aus dem Container, aber das ist visuell unauffällig — das
   Wechselwort schiebt sich sowieso über den Prefix-/Suffix-Text. */
.ke-animated-text-rotating {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    line-height: inherit;
    overflow: visible;
}

.ke-animated-text-word {
    display: inline-block;
    white-space: nowrap;
    line-height: inherit;
}

/* Cursor (Typing Animation) */
.ke-animated-text-cursor {
    display: inline-block;
    line-height: inherit;
    animation: ke-cursor-blink 0.7s infinite;
}

@keyframes ke-cursor-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Animation Keyframes - Enter */
@keyframes ke-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ke-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes ke-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes ke-zoom {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ke-rotate {
    from {
        transform: rotateX(90deg);
        opacity: 0;
    }
    to {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes ke-flip {
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

@keyframes ke-bounce {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    50% {
        transform: translateY(-20px);
        opacity: 1;
    }
    70% {
        transform: translateY(10px);
    }
    85% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Animation Keyframes - Exit */
@keyframes ke-slide-up-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes ke-slide-down-out {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes ke-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes ke-zoom-out {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

@keyframes ke-rotate-out {
    from {
        transform: rotateX(0deg);
        opacity: 1;
    }
    to {
        transform: rotateX(-90deg);
        opacity: 0;
    }
}

@keyframes ke-flip-out {
    from {
        transform: rotateY(0deg);
        opacity: 1;
    }
    to {
        transform: rotateY(-90deg);
        opacity: 0;
    }
}

@keyframes ke-bounce-out {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

/* Animation Classes - Enter */
.ke-animated-text-word.ke-animating {
    animation-duration: var(--ke-animation-speed, 500ms);
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.ke-animated-text-word.ke-animation-slide-up {
    animation-name: ke-slide-up;
}

.ke-animated-text-word.ke-animation-slide-down {
    animation-name: ke-slide-down;
}

.ke-animated-text-word.ke-animation-fade {
    animation-name: ke-fade;
}

.ke-animated-text-word.ke-animation-zoom {
    animation-name: ke-zoom;
}

.ke-animated-text-word.ke-animation-rotate {
    animation-name: ke-rotate;
    transform-origin: center bottom;
    perspective: 1000px;
}

.ke-animated-text-word.ke-animation-flip {
    animation-name: ke-flip;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.ke-animated-text-word.ke-animation-bounce {
    animation-name: ke-bounce;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animation Classes - Exit */
.ke-animated-text-word.ke-animating-out {
    animation-duration: var(--ke-animation-speed, 500ms);
    animation-fill-mode: both;
    animation-timing-function: ease-in;
}

.ke-animated-text-word.ke-animation-slide-up-out {
    animation-name: ke-slide-up-out;
}

.ke-animated-text-word.ke-animation-slide-down-out {
    animation-name: ke-slide-down-out;
}

.ke-animated-text-word.ke-animation-fade-out {
    animation-name: ke-fade-out;
}

.ke-animated-text-word.ke-animation-zoom-out {
    animation-name: ke-zoom-out;
}

.ke-animated-text-word.ke-animation-rotate-out {
    animation-name: ke-rotate-out;
    transform-origin: center bottom;
    perspective: 1000px;
}

.ke-animated-text-word.ke-animation-flip-out {
    animation-name: ke-flip-out;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.ke-animated-text-word.ke-animation-bounce-out {
    animation-name: ke-bounce-out;
}

/* v0.26.57: Mobile-MQ obsolet — Flex-Wrapper-Hack entfernt (siehe Wrapper-
   Kommentar oben). Ausrichtung wird über die Alignment-Control gesteuert. */

/* =====================================================
   KE Animated Text - Highlighted Style
   ===================================================== */

/* Highlighted Text Container */
.ke-animated-text-highlight {
    position: relative;
    display: inline-block;
}

/* Text Layer */
.ke-animated-text-highlight-text {
    position: relative;
    z-index: 1;
}

/* SVG Overlay Container */
.ke-animated-text-highlight-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    pointer-events: none;
    z-index: 2;
}

/* SVG behind text */
.ke-animated-text-highlight.ke-highlight-back .ke-animated-text-highlight-svg {
    z-index: 0;
}

/* SVG in front of text */
.ke-animated-text-highlight.ke-highlight-front .ke-animated-text-highlight-svg {
    z-index: 2;
}

/* SVG Element Styling */
.ke-animated-text-highlight svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--ke-primary);
}

.ke-animated-text-highlight svg path,
.ke-animated-text-highlight svg line,
.ke-animated-text-highlight svg ellipse {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
}

/* Stroke Animation - Initial State */
.ke-animated-text-highlight svg path,
.ke-animated-text-highlight svg line,
.ke-animated-text-highlight svg ellipse {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}

/* Animation Active */
.ke-animated-text-highlight.ke-highlight-animating svg path,
.ke-animated-text-highlight.ke-highlight-animating svg line,
.ke-animated-text-highlight.ke-highlight-animating svg ellipse {
    animation: ke-highlight-draw var(--ke-highlight-duration, 1.2s) ease-out forwards;
    animation-delay: var(--ke-highlight-delay, 0s);
}

/* Draw Animation Keyframes */
@keyframes ke-highlight-draw {
    0% {
        stroke-dashoffset: 1500;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Undraw Animation for Loop */
@keyframes ke-highlight-undraw {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 1500;
    }
}

.ke-animated-text-highlight.ke-highlight-undrawing svg path,
.ke-animated-text-highlight.ke-highlight-undrawing svg line,
.ke-animated-text-highlight.ke-highlight-undrawing svg ellipse {
    animation: ke-highlight-undraw var(--ke-highlight-duration, 1.2s) ease-in forwards;
}

/* Shape-specific adjustments */

/* Circle shape - needs more space */
.ke-animated-text--highlighted[data-shape="circle"] .ke-animated-text-highlight-svg {
    width: calc(100% + 30px);
    height: calc(100% + 40px);
}

/* Underline shapes - position at bottom */
.ke-animated-text--highlighted[data-shape="underline"] .ke-animated-text-highlight-svg,
.ke-animated-text--highlighted[data-shape="curly"] .ke-animated-text-highlight-svg,
.ke-animated-text--highlighted[data-shape="double_underline"] .ke-animated-text-highlight-svg,
.ke-animated-text--highlighted[data-shape="underline_zigzag"] .ke-animated-text-highlight-svg {
    top: auto;
    bottom: -5px;
    transform: translateX(-50%);
    height: 20px;
}

/* Double shape - full height */
.ke-animated-text--highlighted[data-shape="double"] .ke-animated-text-highlight-svg {
    height: calc(100% + 30px);
}

/* Strikethrough - center vertically */
.ke-animated-text--highlighted[data-shape="strikethrough"] .ke-animated-text-highlight-svg {
    height: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Editor Preview - Always show SVG drawn */
.elementor-editor-active .ke-animated-text-highlight svg path,
.elementor-editor-active .ke-animated-text-highlight svg line,
.elementor-editor-active .ke-animated-text-highlight svg ellipse {
    stroke-dashoffset: 0;
    animation: none;
}