/* 
  Asy-Syamil Animation Library 
  Inspired by AOS and Animate.css
*/

/* Base Class for Scroll Animation */
.reveal-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
    transition: all 0.8s ease-out;
}

.reveal-on-scroll.active {
    opacity: 1;
}

/* ----------------------------------------------
 * Fade Animations
 * ---------------------------------------------- */

/* Fade In */
.fade-in {
    opacity: 0;
}

.fade-in.active {
    opacity: 1;
}

/* Fade Up */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Down */
.fade-down {
    opacity: 0;
    transform: translateY(-30px);
}

.fade-down.active {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left */
.fade-left {
    opacity: 0;
    transform: translateX(30px);
}

.fade-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right */
.fade-right {
    opacity: 0;
    transform: translateX(-30px);
}

.fade-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------------
 * Zoom Animations
 * ---------------------------------------------- */

/* Zoom In */
.zoom-in {
    opacity: 0;
    transform: scale(0.9);
}

.zoom-in.active {
    opacity: 1;
    transform: scale(1);
}

/* Zoom Out */
.zoom-out {
    opacity: 0;
    transform: scale(1.1);
}

.zoom-out.active {
    opacity: 1;
    transform: scale(1);
}

/* ----------------------------------------------
 * Flip Animations
 * ---------------------------------------------- */

.flip-up {
    opacity: 0;
    transform: perspective(2500px) rotateX(100deg);
}

.flip-up.active {
    opacity: 1;
    transform: perspective(2500px) rotateX(0);
}

.flip-down {
    opacity: 0;
    transform: perspective(2500px) rotateX(-100deg);
}

.flip-down.active {
    opacity: 1;
    transform: perspective(2500px) rotateX(0);
}


/* ----------------------------------------------
 * Utility Classes (Delays & Durations)
 * ---------------------------------------------- */

/* Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-800 {
    transition-delay: 0.8s;
}

.delay-1000 {
    transition-delay: 1s;
}

/* Durations */
.duration-500 {
    transition-duration: 0.5s;
}

.duration-800 {
    transition-duration: 0.8s;
}

.duration-1000 {
    transition-duration: 1s;
}

.duration-1500 {
    transition-duration: 1.5s;
}


/* ----------------------------------------------
 * Keyframe Animations (Continuous)
 * ---------------------------------------------- */

/* Floating Effect (for icons/cards) */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Pulse Effect (for buttons/CTAs) */
@keyframes pulse-soft {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(140, 198, 63, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(140, 198, 63, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(140, 198, 63, 0);
    }
}

.animate-pulse {
    animation: pulse-soft 2s infinite;
}

/* Spin (for loaders/icons) */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Wigle (for attention) */
@keyframes wiggle {

    0%,
    7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-5deg);
    }

    20% {
        transform: rotateZ(3deg);
    }

    25% {
        transform: rotateZ(-5deg);
    }

    30% {
        transform: rotateZ(2deg);
    }

    35%,
    100% {
        transform: rotateZ(0);
    }
}

.animate-wiggle {
    animation: wiggle 2s linear infinite;
}