/**
 * Animated Text Effects Widget Styles
 */

.wml-animated-text-effects {
    position: relative;
    display: inline-block;
}

.wml-ate-span {
    display: inline-block;
    position: relative;
    line-height: 1;
    /* Default typography inheritance */
}

/* Variation 1: Skew Sweep */
.wml-ate-v1 {
    position: relative;
    overflow: hidden;
    background-color: var(--wml-ate-bg, black);
    padding: 10px 20px;
    display: inline-block;
    transform: skewX(-20deg);
    /* Skew the wrapper */
}

.wml-ate-v1 .wml-ate-span {
    color: whitesmoke;
    /* Base Text Color */
    z-index: 1;
    position: relative;
    display: inline-block;
    transform: skewX(20deg);
    /* Unskew the text so it stays upright */
}

/* Moving Box Background */
.wml-ate-v1 .wml-ate-span::before {
    content: "";
    position: absolute;
    inset: -10px -20px;
    /* Expand to cover padding area if needed ensure full coverage */
    background-color: var(--wml-ate-v1-sweep, white);
    z-index: 2;
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    /* Initial hidden state */
    animation: wml-ate-sweep-clip 4s linear infinite;
}

/* Moving Box Text */
.wml-ate-v1 .wml-ate-span::after {
    content: attr(data-text);
    position: absolute;
    inset: -10px -20px;
    /* Match ::before size exactly for synced clip-path */
    color: var(--wml-ate-v1-text, black);
    /* Inside Text Color */
    z-index: 3;

    /* Center text within this larger box to align with original text */
    display: flex;
    align-items: center;
    justify-content: center;

    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    /* Synced clip */
    animation: wml-ate-sweep-clip 4s linear infinite;
}

/* Clip Path Animation simulating skewed box moving */
/* 
   Polygon shape: Slanted rectangle. 
   We move the 4 points across from left to right.
   Slope approx: top is ahead/behind bottom.
*/
@keyframes wml-ate-sweep-clip {
    0% {
        clip-path: polygon(-80px 0,
                -20px 0,
                -40px 100%,
                -100px 100%);
    }

    50% {
        clip-path: polygon(calc(100% + 20px) 0,
                calc(100% + 80px) 0,
                calc(100% + 60px) 100%,
                calc(100%) 100%);
    }

    100% {
        clip-path: polygon(-80px 0,
                -20px 0,
                -40px 100%,
                -100px 100%);
    }
}

/* Variation 2: Wave Effect */
.wml-ate-v2 .wml-ate-span {
    display: inline-block;
    position: relative;
}

.wml-ate-v2 .wml-ate-span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wml-ate-v2-wave, #00ff88);
    overflow: hidden;
    animation: wml-ate-wave2 3s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes wml-ate-wave2 {

    0%,
    100% {
        width: 0;
    }

    50% {
        width: 100%;
    }
}

/* Variation 3: Glitch */
.wml-ate-v3 .wml-ate-span {
    position: relative;
    animation: wml-ate-glitch3 1s infinite;
}

.wml-ate-v3 .wml-ate-span::before,
.wml-ate-v3 .wml-ate-span::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.wml-ate-v3 .wml-ate-span::before {
    animation: wml-ate-glitchBefore3 1s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    color: var(--wml-ate-v3-c2, #ff00ff);
    z-index: -1;
}

.wml-ate-v3 .wml-ate-span::after {
    animation: wml-ate-glitchAfter3 1s infinite;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    color: var(--wml-ate-v3-c1, #00ffff);
    z-index: -1;
}

@keyframes wml-ate-glitchBefore3 {
    0% {
        transform: translate(0);
    }

    14% {
        transform: translate(-3px, 2px);
    }

    28% {
        transform: translate(3px, -2px);
    }

    43%,
    100% {
        transform: translate(0);
    }
}

@keyframes wml-ate-glitchAfter3 {
    0% {
        transform: translate(0);
    }

    14% {
        transform: translate(3px, -2px);
    }

    28% {
        transform: translate(-3px, 2px);
    }

    43%,
    100% {
        transform: translate(0);
    }
}

@keyframes wml-ate-glitch3 {
    0% {
        transform: translate(0);
    }

    14% {
        transform: translate(-2px, 1px);
    }

    28% {
        transform: translate(2px, -1px);
    }

    43%,
    100% {
        transform: translate(0);
    }
}

/* Variation 4: Gradient Sweep */
.wml-ate-v4 .wml-ate-span {
    background: linear-gradient(90deg, var(--wml-ate-v4-start, #ff6b6b), var(--wml-ate-v4-mid, #4ecdc4), var(--wml-ate-v4-end, #45b7d1));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wml-ate-gradient4 3s ease infinite;
}

@keyframes wml-ate-gradient4 {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Variation 5: Neon Flicker */
.wml-ate-v5 .wml-ate-span {
    /* Color handled by typography settings */
    text-shadow: 0 0 10px var(--wml-ate-v5-neon, #00ffff), 0 0 20px var(--wml-ate-v5-neon, #00ffff), 0 0 30px var(--wml-ate-v5-neon, #00ffff);
    animation: wml-ate-flicker5 1.5s infinite alternate;
}

@keyframes wml-ate-flicker5 {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        text-shadow: 0 0 10px var(--wml-ate-v5-neon, #00ffff), 0 0 20px var(--wml-ate-v5-neon, #00ffff), 0 0 30px var(--wml-ate-v5-neon, #00ffff), 0 0 40px var(--wml-ate-v5-neon, #00ffff);
    }

    20%,
    24%,
    55% {
        text-shadow: none;
    }
}

/* Variation 6: Typewriter */
.wml-ate-v6 .wml-ate-span {
    overflow: hidden;
    border-right: 3px solid var(--wml-ate-v6-cursor, whitesmoke);
    /* Cursor color */
    white-space: nowrap;
    animation: wml-ate-typing6 2s steps(13) infinite, wml-ate-blink6 0.75s step-end infinite;
    max-width: 0;
    display: inline-block;
    vertical-align: bottom;
}

@keyframes wml-ate-typing6 {

    0%,
    100% {
        max-width: 0;
    }

    50%,
    90% {
        max-width: 100%;
    }
}

@keyframes wml-ate-blink6 {
    50% {
        border-color: transparent;
    }
}

/* Variation 7: 3D Rotate */
.wml-ate-v7 {
    perspective: 1000px;
}

.wml-ate-v7 .wml-ate-span {
    animation: wml-ate-rotate7 3s ease-in-out infinite;
    transform-style: preserve-3d;
    display: inline-block;
}

@keyframes wml-ate-rotate7 {

    0%,
    100% {
        transform: rotateY(0deg) rotateX(0deg);
    }

    25% {
        transform: rotateY(180deg) rotateX(0deg);
    }

    50% {
        transform: rotateY(180deg) rotateX(180deg);
    }

    75% {
        transform: rotateY(0deg) rotateX(180deg);
    }
}

/* Variation 8: Bounce Scale */
.wml-ate-v8 .wml-ate-span {
    animation: wml-ate-bounce8 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes wml-ate-bounce8 {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(0.8);
    }

    75% {
        transform: scale(1.1);
    }
}

/* Variation 9: Color Cycle */
.wml-ate-v9 .wml-ate-span {
    animation: wml-ate-colorCycle9 4s linear infinite;
}

@keyframes wml-ate-colorCycle9 {
    0% {
        color: var(--wml-ate-v9-c1, #ff6b6b);
    }

    25% {
        color: var(--wml-ate-v9-c2, #4ecdc4);
    }

    50% {
        color: var(--wml-ate-v9-c3, #ffe66d);
    }

    75% {
        color: var(--wml-ate-v9-c4, #a8e6cf);
    }

    100% {
        color: var(--wml-ate-v9-c5, #ff6b6b);
    }
}

/* Variation 10: Blur Focus */
.wml-ate-v10 .wml-ate-span {
    animation: wml-ate-blur10 2s ease-in-out infinite;
}

@keyframes wml-ate-blur10 {

    0%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }

    50% {
        filter: blur(8px);
        opacity: 0.5;
    }
}

/* Variation 11: Slide Up */
.wml-ate-v11 {
    overflow: hidden;
    /* Standard line-height to fit ascenders/descenders */
    line-height: 1.4;
    display: inline-block;
    vertical-align: bottom;
    /* Align with text baseline */
    padding-bottom: 2px;
    /* Buffer for descenders */
    margin-bottom: -2px;
    /* Offset padding */
}

.wml-ate-v11 .wml-ate-span {
    display: block;
    animation: wml-ate-slideUp11 3s ease-in-out infinite;
}

@keyframes wml-ate-slideUp11 {

    0%,
    20% {
        transform: translateY(0%);
        /* Visible */
    }

    45%,
    55% {
        transform: translateY(-105%);
        /* Slide Out Top (slightly more than 100% to clear) */
    }

    80%,
    100% {
        transform: translateY(0%);
        /* Slide Back Down */
    }
}

/* Variation 12: Letter Spacing */
.wml-ate-v12 .wml-ate-span {
    animation: wml-ate-spacing12 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes wml-ate-spacing12 {

    0%,
    100% {
        letter-spacing: 0px;
    }

    50% {
        letter-spacing: 15px;
    }
}

/* Variation 13: Pulse Glow */
.wml-ate-v13 .wml-ate-span {
    animation: wml-ate-pulse13 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes wml-ate-pulse13 {

    0%,
    100% {
        text-shadow: 0 0 5px currentColor;
        transform: scale(1);
    }

    50% {
        text-shadow: 0 0 20px var(--wml-ate-v13-glow, #00ffff), 0 0 30px var(--wml-ate-v13-glow, #00ffff), 0 0 40px var(--wml-ate-v13-glow, #00ffff);
        transform: scale(1.1);
    }
}

/* Variation 14: Skew Wave */
.wml-ate-v14 .wml-ate-span {
    animation: wml-ate-skew14 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes wml-ate-skew14 {

    0%,
    100% {
        transform: skewX(0deg);
    }

    25% {
        transform: skewX(10deg);
    }

    75% {
        transform: skewX(-10deg);
    }
}

/* Variation 15: Rainbow Shadow */
.wml-ate-v15 .wml-ate-span {
    animation: wml-ate-rainbow15 3s linear infinite;
}

@keyframes wml-ate-rainbow15 {
    0% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c1, #ff0000), 4px 4px 0 var(--wml-ate-v15-c2, #ff7f00);
    }

    14% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c2, #ff7f00), 4px 4px 0 var(--wml-ate-v15-c3, #ffff00);
    }

    28% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c3, #ffff00), 4px 4px 0 var(--wml-ate-v15-c4, #00ff00);
    }

    42% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c4, #00ff00), 4px 4px 0 var(--wml-ate-v15-c5, #0000ff);
    }

    57% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c5, #0000ff), 4px 4px 0 var(--wml-ate-v15-c6, #4b0082);
    }

    71% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c6, #4b0082), 4px 4px 0 var(--wml-ate-v15-c7, #9400d3);
    }

    85% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c7, #9400d3), 4px 4px 0 var(--wml-ate-v15-c1, #ff0000);
    }

    100% {
        text-shadow: 2px 2px 0 var(--wml-ate-v15-c1, #ff0000), 4px 4px 0 var(--wml-ate-v15-c2, #ff7f00);
    }
}