/* Text Animations CSS - Toutes les animations de texte */

/* Animation de la colonne de gauche */
.left-text-line {
    transform-origin: right center;
    transform: translateX(120%) translateY(15px) rotateY(-25deg);
    transition: transform var(--left-text-animation-duration) cubic-bezier(0.19, 1, 0.22, 1),
                opacity var(--left-text-opacity-duration) ease-out;
    justify-content: flex-end;
}

.left-text-line.visible {
    opacity: 1;
    transform: translateX(0%) translateY(0px) rotateY(0deg);
}

/* Styles communs pour la colonne de droite */
.right-text-line {
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
}

/* Effet 1: WE DREAM - Nuage flou qui devient net */
.right-text-line.effect-dream { 
    opacity: 1; 
}

.right-text-line.effect-dream span.char-dream {
    opacity: 0;
    display: inline-block;
    filter: blur(8px);
    transform: scale(1.2);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.right-text-line.effect-dream.visible span.char-dream {
    animation: dreamCharAppear var(--dream-letter-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(var(--dream-letter-stagger) * var(--i));
    animation-fill-mode: forwards;
}

@keyframes dreamCharAppear {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: scale(1.2) translateY(-5px);
    }
    50% {
        opacity: 0.5;
        filter: blur(4px);
        transform: scale(1.1) translateY(-2px);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        -webkit-filter: blur(0px);
        transform: scale(1) translateY(0px) translateZ(0);
    }
}

/* Effet 2: WE DESIGN - Effet pinceau qui dessine */
.right-text-line.effect-design { 
    opacity: 1; 
}

.right-text-line.effect-design span.char-design {
    opacity: 0;
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.right-text-line.effect-design span.char-design::before {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--primary-color);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

.right-text-line.effect-design.visible span.char-design {
    animation: designCharReveal var(--design-letter-duration) cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation-delay: calc(var(--design-letter-stagger) * var(--i));
}

.right-text-line.effect-design.visible span.char-design::before {
    animation: designCharStroke var(--design-letter-duration) cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation-delay: calc(var(--design-letter-stagger) * var(--i));
}

@keyframes designCharReveal {
    0% {
        opacity: 0;
        transform: translateX(-20px) scaleY(0.5);
        filter: brightness(1.5);
    }
    50% {
        opacity: 0.3;
        transform: translateX(-10px) scaleY(0.8);
        filter: brightness(1.3);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scaleY(1);
        filter: brightness(1);
    }
}

@keyframes designCharStroke {
    0% {
        opacity: 1;
        transform: scaleX(0);
    }
    40% {
        opacity: 1;
        transform: scaleX(1.2);
    }
    60% {
        opacity: 0.8;
        transform: scaleX(1);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* Effet 3: WE DELIVER - Livraison sur tapis roulant */
.right-text-line.effect-deliver {
    opacity: 1;
    position: relative;
    overflow: hidden;
}

.right-text-line.effect-deliver span.char-deliver {
    opacity: 0;
    display: inline-block;
    transform: translateX(100vw) translateY(0) scale(1);
}

.right-text-line.effect-deliver.visible span.char-deliver {
    animation: deliverConveyorBelt var(--deliver-letter-duration) linear forwards;
    animation-delay: calc(var(--deliver-letter-stagger) * var(--i));
}

@keyframes deliverConveyorBelt {
    0% {
        transform: translateX(100vw) translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        transform: translateX(80vw) translateY(0) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateX(10px) translateY(0) scale(1);
        opacity: 1;
    }
    85% {
        transform: translateX(-5px) translateY(2px) scale(1);
        opacity: 1;
    }
    95% {
        transform: translateX(2px) translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
    }
}

/* Effet 4: WE REFINE (Typewriter sans curseur) */
.right-text-line.effect-typewriter {
    opacity: 0;
    position: relative;
}

.right-text-line.effect-typewriter.typing {
    opacity: 1;
}

/* Effet 5: WE FINALIZE - Puzzle + point qui glisse */
.right-text-line.effect-finalize {
    opacity: 1;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.right-text-line.effect-finalize span.char-finalize {
    opacity: 0;
    display: inline-block;
    transform: translate(calc(var(--random-x, 0) * 1px), calc(var(--random-y, 0) * 1px))
               scale(var(--random-s, 0.8))
               rotate(calc(var(--random-r, 0) * 1deg));
    filter: brightness(0.7);
    transition-property: opacity, transform, filter;
    transition-duration: var(--finalize-letter-duration);
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.right-text-line.effect-finalize.visible span.char-finalize {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: brightness(1);
    box-shadow: none;
}

.finalize-period {
    display: inline-block;
    opacity: 0;
    transform: translateX(40px) scale(0.6);
    transform-origin: center center;
}

.finalize-period.visible {
    animation: periodSlideIn var(--finalize-period-duration) cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes periodSlideIn {
    0% {
        opacity: 0;
        transform: translateX(40px) scale(0.6);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}