/* =========================================================================
   Matrix Digital — animations.css
   Keyframes signature + classes d'animation + états reveal (GSAP). (P1)
   ========================================================================= */

/* ---------------------------------------------------------------- *
   1. Keyframes (bible §3)
 * ---------------------------------------------------------------- */
@keyframes matrixParticles {
    0%   { opacity: 0; transform: translateY(0); }
    10%  { opacity: .8; }
    90%  { opacity: .3; }
    100% { opacity: 0; transform: translateY(-100vh); }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(200,80,192,.3); }
    50%      { box-shadow: 0 0 50px rgba(200,80,192,.6); }
}
@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes revealUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes borderGlow {
    0%, 100% { border-color: rgba(123,47,190,.3); }
    50%      { border-color: rgba(200,80,192,.7); }
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes typewriter {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------- *
   2. Classes d'animation utilitaires
 * ---------------------------------------------------------------- */
.mx-anim-float    { animation: floatUp 4s ease-in-out infinite; }
.mx-anim-pulse    { animation: pulseGlow 3s ease-in-out infinite; }
.mx-anim-border   { animation: borderGlow 3s ease-in-out infinite; }
.mx-anim-reveal   { animation: revealUp 0.7s ease both; }
.mx-anim-slide    { animation: slideInRight 0.7s ease both; }

/* Dégradé animé (titres / fonds) */
.mx-anim-gradient {
    background-size: 200% 200%;
    animation: gradientShift 6s ease infinite;
}

/* Curseur clignotant (typewriter) */
.mx-type-cursor {
    display: inline-block;
    width: 2px;
    margin-left: 2px;
    background: var(--mx-pink);
    animation: blink 1s step-end infinite;
    align-self: stretch;
}

/* ---------------------------------------------------------------- *
   3. États reveal pour GSAP / IntersectionObserver
   (état initial caché ; .is-visible révèle — voir animations.js / main.js)
 * ---------------------------------------------------------------- */
.mx-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    will-change: opacity, transform;
}
.mx-reveal.is-visible { opacity: 1; transform: none; }

.mx-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--t-slow), transform var(--t-slow);
}
.mx-reveal-left.is-visible { opacity: 1; transform: none; }

/* Délais d'apparition séquentiels (stagger) */
.mx-delay-1 { transition-delay: .08s; }
.mx-delay-2 { transition-delay: .16s; }
.mx-delay-3 { transition-delay: .24s; }
.mx-delay-4 { transition-delay: .32s; }
.mx-delay-5 { transition-delay: .40s; }

/* ---------------------------------------------------------------- *
   4. Respect des préférences d'accessibilité
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .mx-reveal,
    .mx-reveal-left { opacity: 1 !important; transform: none !important; }
}