/* Animations au scroll avec Intersection Observer */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Base keyframes si besoin */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Glitch, Flicker, & Breathe Multi-FX */
@keyframes dynamic-fx {
    /* 0% to 15%: Normal */
    0%, 15% {
        transform: translate(0) skew(0);
        text-shadow: none;
        opacity: 1;
    }

    /* 1. GLITCH EFFECT (~3s to 3.5s) */
    15.1% {
        transform: translate(-4px, 2px) skew(-10deg);
        text-shadow: 3px 0 var(--accent), -3px 0 #ccff00;
        opacity: 0.9;
    }
    15.5% {
        transform: translate(3px, -2px) skew(10deg);
        text-shadow: -3px 0 var(--accent), 3px 0 #fff;
        opacity: 1;
    }
    15.8% {
        transform: translate(-2px, 3px) skew(-5deg);
        text-shadow: 2px 0 var(--accent), -2px 0 #ccff00;
        opacity: 0.8;
    }
    16.1% {
        transform: translate(0) skew(0);
        text-shadow: none;
        opacity: 1;
    }
    16.5% { opacity: 0; }
    16.8% { opacity: 1; }
    17% {
        transform: translate(0) skew(0);
        text-shadow: none;
        opacity: 1;
    }

    /* 17% to 40%: Normal */
    17.1%, 40% {
        transform: translate(0) skew(0);
        text-shadow: none;
        opacity: 1;
    }

    /* 2. NEON FLICKER EFFECT (~8s to 8.6s) */
    40.1% { opacity: 0; }
    40.5% { opacity: 1; }
    40.8% { opacity: 0.2; }
    41.2% { opacity: 1; }
    41.5% { opacity: 0; }
    42.0% { opacity: 1; }
    42.5% { opacity: 0.5; }
    43.0% { opacity: 1; }

    /* 43% to 65%: Normal */
    43.1%, 65% {
        transform: translate(0) skew(0);
        text-shadow: none;
        opacity: 1;
    }

    /* 3. BREATHE / GLOW FADE (~13s to 16s) */
    65.1% {
        opacity: 1;
        text-shadow: 0 0 0 var(--accent);
    }
    70% {
        opacity: 0.3;
        text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
    }
    75% {
        opacity: 1;
        text-shadow: none;
    }

    /* 75% to 100%: Normal */
    75.1%, 100% {
        transform: translate(0) skew(0);
        text-shadow: none;
        opacity: 1;
    }
}

.glitch-text {
    position: relative;
    display: inline-block;
    animation: dynamic-fx 20s infinite;
}