/**
 * TEXT REVEAL ENHANCED STYLES
 * Estilos de soporte para animaciones de texto impactantes
 */

/* === PREPARACIÓN DE ELEMENTOS === */

/* Hardware acceleration para mejor performance */
[data-line-reveal="true"],
[data-line-reveal="true"] .line,
[data-line-reveal="true"] .word {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Prevenir layout shift durante SplitText */
[data-line-reveal="true"] .line {
    display: block;
    position: relative;
}

[data-line-reveal="true"] .word {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    will-change: transform, opacity;
}

/* === EFECTOS VISUALES ADICIONALES === */

/* Sombra text para elementos CTA (será animada por GSAP) */
.section_cta [data-line-reveal="true"] {
    transition: text-shadow 0.3s ease;
}

/* Mejora de calidad de fuente durante animaciones */
[data-line-reveal="true"] {
    text-rendering: optimizeLegibility;
}

/* === RESPONSIVE OPTIMIZATIONS === */

@media (max-width: 767px) {
    /* Reducir hardware acceleration en mobile para mejor performance */
    [data-line-reveal="true"] .word {
        transform: none;
        will-change: auto;
    }

    /* Simplificar efectos en mobile */
    [data-line-reveal="true"] {
        text-shadow: none !important;
    }
}

/* === ACCESSIBILITY === */

/* Respetar preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    [data-line-reveal="true"],
    [data-line-reveal="true"] *,
    [data-line-reveal="true"] .line,
    [data-line-reveal="true"] .word {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        text-shadow: none !important;
    }
}

/* === DEBUG STYLES (DESARROLLO) === */

/* Solo en localhost - visualizar elementos con data-line-reveal */
body.debug-mode [data-line-reveal="true"] {
    position: relative;
}

body.debug-mode [data-line-reveal="true"]:before {
    content: "📝 Text Reveal";
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    color: #3B82F6;
    opacity: 0.5;
    pointer-events: none;
}

/* === COMPATIBILIDAD CROSS-BROWSER === */

/* Safari optimizations */
@supports (-webkit-appearance: none) {
    [data-line-reveal="true"] .word {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
    }
}

/* Firefox optimizations */
@supports (-moz-appearance: none) {
    [data-line-reveal="true"] {
        will-change: transform;
    }
}