/** animations **/

[class*="textanim"] {
    display: flex;
    column-gap: .25em;
    row-gap: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    transition: all .8s .1s cubic-bezier(.04,.79,.04,1)
}
.textalign-center {
    justify-content: center;
}
.textalign-right {
    justify-content: flex-end;
}
/* Basic setup for hidden overflow and transitions */
[class*="textanim-"] * {
    opacity: 0;
    overflow: hidden;
    transform-origin: center;
    transition: all .8s .1s cubic-bezier(.04,.79,.04,1);
    
}
[class*="textanim-"]:not([class*="split"]) span * {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25em;
    }
[class*="split"] > span{
    display: inline-flex;
    flex-wrap: wrap;
}
[class*="split"] *{
display: inline-flex;
align-items: center;
    }


/* Animation 1: Fade in and slide up */
[class*="textanim-slide-up"] * {
    transform: translateY(40px);
}

[class*="textanim-slide-up"][class*="visible"] * {
    opacity: 1;
    transform: translateY(0);
}

/* Animation 2: Fade in and slide down */
[class*="textanim-slide-down"] * {
    transform: translateY(-40px);
}

[class*="textanim-slide-down"][class*="visible"] * {
    opacity: 1;
    transform: translateY(0);
}

/* Animation 3: Fade in and slide left */
[class*="textanim-slide-left"] * {
    transform: translateX(40px);
}

[class*="textanim-slide-left"][class*="visible"] * {
    opacity: 1;
    transform: translateX(0);
}

/* Animation 4: Fade in and slide right */
[class*="textanim-slide-right"] * {
    transform: translateX(-40px);
}

[class*="textanim-slide-right"][class*="visible"] * {
    opacity: 1;
    transform: translateX(0);
}

/* Animation 5: Fade in with blur */
[class*="textanim-blur-in"] * {
    transform: translateY(0);
    filter: blur(10px);
}

[class*="textanim-blur-in"][class*="visible"] * {
    opacity: 1;
    filter: blur(0);
}

/* Animation 6: Fade in with scale up */
[class*="textanim-scale-up"] * {
    transform: scale(0.8);
}

[class*="textanim-scale-up"][class*="visible"] * {
    opacity: 1;
    transform: scale(1);
}

/* Animation 7: Fade in with scale down */
[class*="textanim-scale-down"] * {
    transform: scale(1.2);
}

[class*="textanim-scale-down"][class*="visible"] * {
    opacity: 1;
    transform: scale(1);
}

/* Animation 8: Fade in with rotate */
[class*="textanim-rotate"] * {
    transform: rotate(-15deg);
}

[class*="textanim-rotate"][class*="visible"] * {
    opacity: 1;
    transform: rotate(0deg);
}

/* Animation 9: Fade in with clipping (overflow hidden effect) */
[class*="textanim-clip"] * {
    position: relative;
    display: inline-block;
    transform: translateY(40px);
    clip-path: inset(0 50%);
}

[class*="textanim-clip"][class*="visible"] * {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0);
}

/* Animation 10: Fade in from center with blur */
[class*="textanim-center-blur"] * {
    transform: scale(0.8);
    filter: blur(10px);
}

[class*="textanim-center-blur"][class*="visible"] * {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* NEW: Fade in with 3D rotation */
[class*="textanim-rotate-3d"] * {
    transform: rotateY(90deg);
}

[class*="textanim-rotate-3d"][class*="visible"] * {
    opacity: 1;
    transform: rotateY(0);
}

/* NEW: Fade in with jump */
[class*="textanim-jump"] * {
    transform: translateY(90px);
}

[class*="textanim-jump"][class*="visible"] * {
    opacity: 1;
    transform: translateY(0);
}

/* NEW: Fade in with stretch */
[class*="textanim-stretch"] * {
    transform: scaleX(0.3);
}

[class*="textanim-stretch"][class*="visible"] * {
    opacity: 1;
    transform: scaleX(1);
}

/* NEW: Fade in with color shift */
[class*="textanim-color-shift"] * {
    color: red;
}

[class*="textanim-color-shift"][class*="visible"] * {
    opacity: 1;
    color: #000000; /* Changer la couleur de rouge à noir */
}

/* NEW: Fade in with diagonal slide */
[class*="textanim-diagonal"] * {
    transform: translate(-20px, 20px);
}

[class*="textanim-diagonal"][class*="visible"] * {
    opacity: 1;
    transform: translate(0, 0);
}
/* NEW: Fade in with diagonal slide - Haut-Gauche */
[class*="textanim-diagonal-top-left"] * {
    transform: translate(-20px, -20px);
}

[class*="textanim-diagonal-top-left"][class*="visible"] * {
    opacity: 1;
    transform: translate(0, 0);
}

/* NEW: Fade in with diagonal slide - Haut-Droite */
[class*="textanim-diagonal-top-right"] * {
    transform: translate(20px, -20px);
}

[class*="textanim-diagonal-top-right"][class*="visible"] * {
    opacity: 1;
    transform: translate(0, 0);
}

/* NEW: Fade in with diagonal slide - Bas-Gauche */
[class*="textanim-diagonal-bottom-left"] * {
    transform: translate(-20px, 20px);
}

[class*="textanim-diagonal-bottom-left"][class*="visible"] * {
    opacity: 1;
    transform: translate(0, 0);
}

/* NEW: Fade in with diagonal slide - Bas-Droite */
[class*="textanim-diagonal-bottom-right"] * {
    transform: translate(20px, 20px);
}

[class*="textanim-diagonal-bottom-right"][class*="visible"] * {
    opacity: 1;
    transform: translate(0, 0);
}
/* NEW: Fade in with skew */
[class*="textanim-skew"] * {
    transform: skewX(-20deg);
}

[class*="textanim-skew"][class*="visible"] * {
    opacity: 1;
    transform: skewX(0);
}

/* NEW: Fade in with zoom */
[class*="textanim-zoom"] * {
    transform: scale(0.5);
}

[class*="textanim-zoom"][class*="visible"] * {
    opacity: 1;
    transform: scale(1);
}

/* NEW: Fade in with flip */
[class*="textanim-flip"] * {
    transform: rotateX(90deg);
}

[class*="textanim-flip"][class*="visible"] * {
    opacity: 1;
    transform: rotateX(0);
}

/* NEW: Fade in with shake */
[class*="textanim-shake"] * {
    transform: translateX(-10px);
}

[class*="textanim-shake"][class*="visible"] * {
    opacity: 1;
    animation: shakeEffect 0.7s ease forwards;
}

@keyframes shakeEffect {
    0%, 100% {
        transform: translateX(0);
    }
    25%, 75% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
}

/* NEW: Fade in with blur and scale */
[class*="textanim-blur-scale"] * {
    transform: scale(0.8);
    filter: blur(10px);
}

[class*="textanim-blur-scale"][class*="visible"] * {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* NEW: Fade in with slide and rotate */
[class*="textanim-slide-rotate"] * {
    transform: translateX(-40px) rotate(-10deg);
}

[class*="textanim-slide-rotate"][class*="visible"] * {
    opacity: 1;
    transform: translateX(0) rotate(0);
}
/* NEW: Fade in with tilt */
[class*="textanim-tilt"] * {
    transform: rotate(-10deg) scale(0.9);
}

[class*="textanim-tilt"][class*="visible"] * {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* NEW: Fade in with compress */
[class*="textanim-compress"] * {
    transform: scaleY(0.5);
}

[class*="textanim-compress"][class*="visible"] * {
    opacity: 1;
    transform: scaleY(1);
}

/* NEW: Fade in with swing */
[class*="textanim-swing"] * {
    transform: rotate(15deg);
}

[class*="textanim-swing"][class*="visible"] * {
    opacity: 1;
    animation: swingEffect 0.7s ease-in-out forwards;
}

@keyframes swingEffect {
    0% {
        transform: rotate(15deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* NEW: Fade in with unfold */
[class*="textanim-unfold"] * {
    transform: scaleY(0);
    transform-origin: top;
}

[class*="textanim-unfold"][class*="visible"] * {
    opacity: 1;
    transform: scaleY(1);
}

/* NEW: Fade in with roll */
[class*="textanim-roll"] * {
    transform: translateX(-70%) rotate(-30deg);
}

[class*="textanim-roll"][class*="visible"] * {
    opacity: 1;
    transform: translateX(0) rotate(0);
}

/* NEW: Fade in with fold */
[class*="textanim-fold"] * {
    transform: scaleX(0);
    transform-origin: left;
}

[class*="textanim-fold"][class*="visible"] * {
    opacity: 1;
    transform: scaleX(1);
}
@media all and (max-width:768px) {
    html body *:not(header):has([class*="textanim"]) {
            contain: paint;
        }
}