/* ──────────────────────────────────────────────────────────────
   BlurText — apparition nette depuis un flou, segment par segment.
   Équivalent vanilla (HTML/CSS/JS) du composant react-bits <BlurText/>.
   Activé via l'attribut data-blur-text sur un élément texte.
   ────────────────────────────────────────────────────────────── */
.blur-text .blur-seg {
    display: inline-block;
    filter: blur(10px);
    opacity: 0;
    transform: translateY(-24px);
    transition: filter 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
    will-change: filter, opacity, transform;
}

/* direction = bottom : les segments montent depuis le bas */
.blur-text.from-bottom .blur-seg {
    transform: translateY(24px);
}

/* état final (quand la section entre dans le viewport) */
.blur-text.is-visible .blur-seg {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
}

/* accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
    .blur-text .blur-seg {
        transition: none;
        filter: none;
        opacity: 1;
        transform: none;
    }
}