/*
==========================================================
 Project      : ModArt Renov Framework
----------------------------------------------------------
 File         : animations.css
 Description  : Global animations and transitions
----------------------------------------------------------
 Version      : 1.0.0
 Author       : Ayhan TACAR & Atlas
 Website      : https://modartrenov.fr
 Created      : 2026
 Last Update  : 2026-07-23
 License      : Proprietary
 Copyright    : © 2026 ModArt Renov. All Rights Reserved.
==========================================================
*/

/* ======================================================
   FADE IN
====================================================== */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ======================================================
   FADE UP
====================================================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ======================================================
   FADE DOWN
====================================================== */

@keyframes fadeDown{

    from{
        opacity:0;
        transform:translateY(-40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ======================================================
   FADE LEFT
====================================================== */

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:translateX(40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* ======================================================
   FADE RIGHT
====================================================== */

@keyframes fadeRight{

    from{
        opacity:0;
        transform:translateX(-40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* ======================================================
   SCALE IN
====================================================== */

@keyframes scaleIn{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/* ======================================================
   FLOAT
====================================================== */

@keyframes floating{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

/* ======================================================
   PULSE
====================================================== */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

/* ======================================================
   SCROLL REVEAL
====================================================== */

[data-animate]{

    opacity:1;
    transform:none;
    transition:
        opacity .7s ease,
        transform .7s ease;

}

.js [data-animate]{

    opacity:1;
    transform:none;
    will-change:auto;

}

.js [data-animate].visible{

    opacity:1;
    transform:none;

}