/**
 * Smoky Text Styles
 * Based on original request
 */

.wml-smoky-text {
    width: 100%;
    /* Ensure visible overflow so smoke isn't clipped */
    overflow: visible;
}

.wml-smoky-text-container {
    position: relative;
    width: 100%;
    text-align: center;
    /* Generous padding for smoke movement */
    padding: 100px 20px;
}

.wml-smoky-text-inner {
    margin: 0;
    white-space: nowrap;
    /* Default typography if not overridden by controls */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1;
}

/* Individual letters */
.wml-smoky-text-inner span {
    display: inline-block;
    /* Default state: Visible and sharp */
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) rotate(0deg) scale(1);
    /* Transition is MANAGED IN JS for snap-back, 
       but we can set a default here just in case, 
       though JS will overwrite it. */
}

/* The "Smoke" State */
.wml-smoky-text-inner span.active {
    opacity: 0;
    /* Using var for dynamic control or fallback to 20px */
    filter: blur(var(--wml-blur, 20px));
    /* Random movement variables set by JS */
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(2);
}

/* Mobile responsivity */
@media (max-width: 767px) {
    .wml-smoky-text-inner {
        white-space: normal;
    }
}