.wml-text-stroke {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.wml-text-stroke-svg {
    width: 100%;
    height: auto;
    max-width: 95vw;
}

.wml-text-stroke-inner {
    /* Font styles are handled by Bricks typography control or these defaults */
    font-family: 'Montserrat', sans-serif;
    font-size: 130px;
    font-weight: 900;
    text-anchor: middle;
    /* Centers text in SVG */

    /* Animation basics */
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke-width: var(--wml-stroke-width, 3px);

    /* Animation name and duration (duration set via inline style/bricks control) */
    animation-name: wmlStrokeLoop;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

/* Loop On Logic (Default if data-loop is true or missing, but we enforce via attr) */
.wml-text-stroke[data-loop="true"] .wml-text-stroke-inner {
    animation-iteration-count: infinite;
}

@keyframes wmlStrokeLoop {
    0% {
        stroke-dasharray: 0 50%;
        stroke-dashoffset: 20%;
        fill-opacity: 0;
        stroke-width: var(--wml-stroke-width, 3px);
    }

    25% {
        stroke-dasharray: 40% 10%;
        stroke-dashoffset: -20%;
        fill-opacity: 0;
    }

    50% {
        stroke-dasharray: 100% 0;
        stroke-dashoffset: -40%;
        fill-opacity: 0;
        stroke-width: var(--wml-stroke-width, 3px);
    }

    60% {
        stroke-dasharray: 100% 0;
        stroke-dashoffset: -40%;
        fill-opacity: 1;
        stroke-width: 0;
    }

    85% {
        fill-opacity: 1;
        stroke-width: 0;
    }

    100% {
        fill-opacity: 0;
        stroke-width: 0;
        stroke-dasharray: 100% 0;
    }
}

/* Loop Off Logic */
.wml-text-stroke[data-loop="false"] .wml-text-stroke-inner {
    animation-iteration-count: 1;
    animation-play-state: paused;
}

/* Stay Visible Logic */
.wml-text-stroke[data-loop="false"] .wml-text-stroke-inner.wml-animation-done {
    fill-opacity: 1 !important;
    stroke-width: 0 !important;
}

/* Trigger animation when in view */
.wml-text-stroke.wml-in-view .wml-text-stroke-inner {
    animation-play-state: running;
}

/* Bricks Builder Fix: Ensure visibility in editor */
.wml-text-stroke.wml-is-builder .wml-text-stroke-inner {
    fill-opacity: 1 !important;
    stroke-width: 0 !important;
    animation: none !important;
}