/* Frontend styles for Scramble Text Format v2.1 */

.scramble-text {
    font-family: inherit;
    position: relative;
    display: inline;
    /* Ensure proper box decoration for multi-line */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* =========================================
   SCRAMBLE ANIMATION STATES
   Ensure consistent line-height during animation
   ========================================= */

.scramble-text.is-scrambling {
    /* Lock line-height to prevent vertical jumping */
    line-height: inherit;
}

.scramble-text.has-scrambled {
    /* Animation complete */
}

/* =========================================
   UNDERLINE EFFECT
   Uses text-decoration for proper multi-line support
   ========================================= */

.scramble-text[data-effect-underline="true"] {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.3s ease;
}

.scramble-text[data-effect-underline="true"]:hover {
    text-decoration-color: currentColor;
}

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

@media (prefers-reduced-motion: reduce) {
    .scramble-text[data-effect-underline="true"] {
        transition: none;
        text-decoration-color: currentColor;
    }
}

/* =========================================
   PRINT
   ========================================= */

@media print {
    .scramble-text[data-effect-underline="true"] {
        text-decoration-color: currentColor;
    }
}