/**
 * Scroll Heading Elementor - Styles
 * Animation de scroll révélant les lettres progressivement
 */

/* Wrapper principal */
.scroll-heading-wrapper {
    position: relative;
    overflow: visible;
}

/* Titre */
.scroll-heading-title {
    margin: 0;
    padding: 0;
    line-height: 1.3;
    display: block;
}

/* Conteneur du texte */
.scroll-heading-text {
    display: block;
}

/* Mots */
.scroll-heading-word {
    position: relative;
    display: inline;
    white-space: nowrap;
}

/* Espaces entre les mots */
.scroll-heading-space {
    display: inline;
    white-space: pre;
}

/* Caractères individuels - Utiliser display: inline pour éviter les espaces */
.scroll-heading-char {
    position: relative;
    display: inline; /* IMPORTANT: inline au lieu de inline-block */
    will-change: opacity;
    /* Améliorer le rendu du texte */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Position verticale */
    vertical-align: baseline;
    line-height: inherit;
}

/* Saut de ligne */
.scroll-heading-text br,
br.scroll-heading-break {
    display: block;
}

/* Première lettre de chaque mot */
.scroll-heading-char.first-char {
    /* Styles optionnels via les contrôles Elementor */
}

/* État initial avant animation - UNIQUEMENT OPACITÉ */
.scroll-heading-wrapper:not(.animated) .scroll-heading-char {
    opacity: var(--sh-initial-opacity, 0.2);
}

/* État après animation */
.scroll-heading-wrapper.animated .scroll-heading-char {
    opacity: 1;
}

/* Animation fluide - seulement opacité */
.scroll-heading-char {
    transition: opacity 0.3s ease;
}

/* Prévisualisation dans l'éditeur Elementor */
.elementor-editor-active .scroll-heading-wrapper .scroll-heading-char {
    opacity: 1 !important;
}

/* Support pour les modes sombres */
@media (prefers-color-scheme: dark) {
    .scroll-heading-wrapper:not(.animated) .scroll-heading-char {
        opacity: var(--sh-initial-opacity, 0.3);
    }
}

/* Accessibilité - réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
    .scroll-heading-char {
        transition: none !important;
        opacity: 1 !important;
    }
}