/* ============================
   SPLIT TEXT ANIMATION CSS
   Styles pour l'animation de texte split
   ============================ */

/* Caractères individuels */
.sc {
    display: inline-block;
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Perspective pour les effets 3D sur le hero */
.hero-content h1 {
    perspective: 1000px;
}

.hero-content h1 .sc {
    transform-origin: center bottom;
}

/* Style spécifique pour le about-title */
.about-title .sc {
    transform-origin: center center;
}

/* Assurer que le highlight garde son style */
.hero-highlight .sc {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animation de fallback si pas de JS */
@media (prefers-reduced-motion: reduce) {
    .sc {
        opacity: 1 !important;
        transform: none !important;
    }
}