/* ======================================================
   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);
    }
}