/*
=====================================================
MIR RABBY OFFICIAL
Version 2026 Edition

Animation System
Human Rights • Social Service • Public Affairs
=====================================================
*/


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

.fade-in{

    animation:fadeIn .8s ease forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


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

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.fade-down{

    animation:fadeDown .8s ease forwards;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================
   SLIDE LEFT
========================================= */

.slide-left{

    animation:slideLeft .8s ease forwards;

}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* =========================================
   SLIDE RIGHT
========================================= */

.slide-right{

    animation:slideRight .8s ease forwards;

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


/* =========================================
   ZOOM IN
========================================= */

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


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

.float{

    animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}


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

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


/* =========================================
   ROTATE
========================================= */

.rotate{

    animation:rotate360 10s linear infinite;

}

@keyframes rotate360{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* =========================================
   BOUNCE
========================================= */

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-15px);

    }

    60%{

        transform:translateY(-8px);

    }

}


/* =========================================
   LOADER SPIN
========================================= */

.loader-spin{

    animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/* =========================================
   HOVER EFFECT
========================================= */

.hover-lift{

    transition:var(--transition-normal);

}

.hover-lift:hover{

    transform:translateY(-8px);

}


.hover-scale{

    transition:var(--transition-normal);

}

.hover-scale:hover{

    transform:scale(1.05);

}


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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}