/* ======================================================
   NIGHTANGELS - ANIMATIONS.CSS
   Animations globales partagées
====================================================== */
/* ======================================================
   FADE SYSTEM
====================================================== */
.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}
.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}
/* ======================================================
   CURSOR BLINK
====================================================== */
@keyframes blink{
    0%{
        opacity:1;
    }
    50%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
/* ======================================================
   LORE FADE
====================================================== */
@keyframes loreFade{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ======================================================
   BOOK FLOAT
====================================================== */
@keyframes bookFloat{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-6px);
    }
    100%{
        transform:translateY(0px);
    }
}
/* ======================================================
   MESSAGE APPEAR
====================================================== */
@keyframes messageAppear{
    from{
        opacity:0;
        transform:translateX(-15px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}
/* ======================================================
   MESSAGE PULSE
====================================================== */
@keyframes messagePulse{
    0%{
        box-shadow:
        0 0 12px rgba(255,0,0,0.12);
    }
    50%{
        box-shadow:
        0 0 24px rgba(255,0,0,0.24);
    }
    100%{
        box-shadow:
        0 0 12px rgba(255,0,0,0.12);
    }
}
/* ======================================================
   FLOAT SYSTEM
====================================================== */
@keyframes floatSlow{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0px);
    }
}
@keyframes floatMedium{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-16px);
    }
    100%{
        transform:translateY(0px);
    }
}
@keyframes floatFast{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-22px);
    }
    100%{
        transform:translateY(0px);
    }
}
/* ======================================================
   GLOW SYSTEM
====================================================== */
@keyframes glowPulse{
    0%{
        box-shadow:
        0 0 12px var(--theme-glow);
    }
    50%{
        box-shadow:
        0 0 28px var(--theme-glow);
    }
    100%{
        box-shadow:
        0 0 12px var(--theme-glow);
    }
}
@keyframes runeGlow{
    0%{
        filter:
        drop-shadow(0 0 8px var(--accent-color));
    }
    50%{
        filter:
        drop-shadow(0 0 22px var(--accent-color));
    }
    100%{
        filter:
        drop-shadow(0 0 8px var(--accent-color));
    }
}
/* ======================================================
   PARTICLE SYSTEM
====================================================== */
@keyframes particleRise{
    from{
        transform:
        translateY(120vh)
        translateX(0);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    to{
        transform:
        translateY(-20vh)
        translateX(80px);
        opacity:0;
    }
}
/* ======================================================
   SHADOW BREATH
====================================================== */
@keyframes shadowBreath{
    0%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.08);
    }
    100%{
        filter:brightness(1);
    }
}
/* ======================================================
   FADE SCALE
====================================================== */
.fade-scale{
    opacity:0;
    transform:scale(.94);
    transition:
    opacity 1.1s ease,
    transform 1.1s ease;
}
.fade-scale.visible{
    opacity:1;
    transform:scale(1);
}
/* ======================================================
   SOFT GLOW APPEAR
====================================================== */
.glow-appear{
    opacity:0;
    filter:blur(14px);
    transition:
    opacity 1.6s ease,
    filter 1.6s ease;
}
.glow-appear.visible{
    opacity:1;
    filter:blur(0);
}
/* ======================================================
   HERO REVEAL
====================================================== */
.hero-reveal{
    animation:heroReveal 1.8s ease;
}
@keyframes heroReveal{
    from{
        opacity:0;
        transform:scale(1.03);
        filter:
        blur(12px)
        brightness(.5);
    }
    to{
        opacity:1;
        transform:scale(1);
        filter:
        blur(0)
        brightness(1);
    }
}
/* ======================================================
   IMAGE REVEAL
====================================================== */
.image-reveal{

    overflow:hidden;
}
.image-reveal img{
    animation:imageReveal 2.4s ease;
}
@keyframes imageReveal{
    from{
        opacity:0;
        transform:scale(1.12);
        filter:blur(14px);
    }
    to{
        opacity:1;
        transform:scale(1);
        filter:blur(0);
    }
}
/* ======================================================
   MESSAGE PULSE
====================================================== */
@keyframes messagePulse{
    0%{
        box-shadow:
        0 0 12px var(--theme-glow);
    }
    50%{
        box-shadow:
        0 0 24px var(--theme-glow);
    }
    100%{
        box-shadow:
        0 0 12px var(--theme-glow);
    }
}