/*=================================
    Text Effects CSS pour WeAreBrand Style
==================================*/

/* ===== SPLIT TEXT BASE ===== */
.char, .char-3d {
    display: inline-block;
    transform-origin: center bottom;
    will-change: transform, opacity;
}

.word {
    display: inline-block;
    white-space: nowrap;
}

/* ===== WORD REVEAL ===== */
.word-reveal {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.word-reveal span {
    display: inline-block;
    will-change: transform;
}

/* ===== TEXT GRADIENT BACKGROUND ===== */
.hero-title,
.sec-title {
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        rgba(255,255,255,0.9) 25%,
        #ffffff 50%,
        rgba(255,255,255,0.9) 75%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* ===== GLITCH LAYERS ===== */
.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.glitch-1 {
    color: #ff00ff;
    text-shadow: 2px 0 #ff00ff;
}

.glitch-2 {
    color: #00ffff;
    text-shadow: -2px 0 #00ffff;
}

/* ===== TYPING CURSOR ===== */
.typing-cursor::after {
    content: '|';
    display: inline-block;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

/* ===== TEXT SHINE OVERLAY ===== */
.text-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.6), 
        transparent
    );
    pointer-events: none;
    z-index: 2;
}

/* ===== RIPPLE EFFECT ===== */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transform: scale(0);
}

/* ===== TEXT STROKE ===== */
.hero-big_text {
    -webkit-text-stroke: 2px rgba(255,255,255,0.1);
    text-stroke: 2px rgba(255,255,255,0.1);
    paint-order: stroke fill;
}

/* ===== MAGNETIC TEXT EFFECT ===== */
.sec-title .char,
.box-title .char {
    position: relative;
    will-change: transform;
    transition: transform 0.3s ease;
}

/* ===== BLUR EFFECT ===== */
.blur-in {
    filter: blur(0);
    transition: filter 1.2s ease;
}

/* ===== LETTER SPACING ===== */
.sub-title.style1 {
    letter-spacing: 0.05em;
    transition: letter-spacing 1.5s ease;
}

/* ===== SPLIT LINE CONTAINER ===== */
[data-split-lines] div {
    overflow: hidden;
}

[data-split-lines] div > div {
    display: inline-block;
}

/* ===== TEXT SHADOW EFFECTS ===== */
.hero-title {
    text-shadow: 
        0 0 20px rgba(255, 255, 255, 0.1),
        0 0 40px rgba(255, 255, 255, 0.05);
}

.sec-title {
    text-shadow: 
        0 0 15px rgba(255, 255, 255, 0.08);
}

/* ===== HOVER TEXT EFFECTS ===== */
.box-title a {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.box-title a::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.box-title a:hover::before {
    transform: translateY(0);
}

.box-title a:hover {
    transform: translateY(100%);
}

/* ===== LOADING ANIMATION ===== */
.text-loading {
    opacity: 0;
    animation: textFadeIn 1s ease forwards;
}

@keyframes textFadeIn {
    to {
        opacity: 1;
    }
}

/* ===== CHARACTER ANIMATION DELAYS ===== */
.char:nth-child(1) { animation-delay: 0.05s; }
.char:nth-child(2) { animation-delay: 0.1s; }
.char:nth-child(3) { animation-delay: 0.15s; }
.char:nth-child(4) { animation-delay: 0.2s; }
.char:nth-child(5) { animation-delay: 0.25s; }
.char:nth-child(6) { animation-delay: 0.3s; }
.char:nth-child(7) { animation-delay: 0.35s; }
.char:nth-child(8) { animation-delay: 0.4s; }
.char:nth-child(9) { animation-delay: 0.45s; }
.char:nth-child(10) { animation-delay: 0.5s; }

/* ===== TEXT SELECTION ===== */
.hero-title::selection,
.sec-title::selection {
    background: rgba(255, 255, 255, 0.3);
    -webkit-text-fill-color: white;
}

/* ===== PERSPECTIVE TEXT ===== */
.word {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.char-3d {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* ===== SMOOTH TEXT RENDERING ===== */
.hero-title,
.sec-title,
.box-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== RESPONSIVE TEXT EFFECTS ===== */
@media (max-width: 991px) {
    .hero-title,
    .sec-title {
        text-shadow: 
            0 0 15px rgba(255, 255, 255, 0.08);
    }
    
    /* Simplifier les effets sur tablette */
    .char-3d {
        transform-style: flat;
    }
}

@media (max-width: 767px) {
    .hero-big_text {
        -webkit-text-stroke: 1px rgba(255,255,255,0.1);
        text-stroke: 1px rgba(255,255,255,0.1);
    }
    
    /* Désactiver les effets complexes sur mobile */
    .text-shine,
    .glitch-layer {
        display: none;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    .char,
    .char-3d,
    .word-reveal span {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    .typing-cursor::after {
        animation: none;
        opacity: 1;
    }
    
    @keyframes gradientShift {
        0%, 100% {
            background-position: 0% center;
        }
    }
}

/* ===== Z-INDEX MANAGEMENT ===== */
.text-shine {
    z-index: 2;
}

.glitch-layer {
    z-index: 1;
}

/* ===== CLIP PATH ANIMATIONS ===== */
.text-clip {
    clip-path: inset(0 100% 0 0);
    animation: clipReveal 1s ease forwards;
}

@keyframes clipReveal {
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ===== WAVE ANIMATION ===== */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

.wave-char {
    animation: wave 1s ease-in-out infinite;
}

/* ===== GLOW EFFECT ===== */
.text-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 
            0 0 10px rgba(255, 255, 255, 0.2),
            0 0 20px rgba(255, 255, 255, 0.1);
    }
    to {
        text-shadow: 
            0 0 20px rgba(255, 255, 255, 0.4),
            0 0 40px rgba(255, 255, 255, 0.2),
            0 0 60px rgba(255, 255, 255, 0.1);
    }
}

/* ===== FALLBACK STYLES ===== */
.no-js .char,
.no-js .word-reveal,
.no-js .text-split-done {
    opacity: 1 !important;
    transform: none !important;
}