/* =========================
   LIFT
========================= */

.anim-lift:hover{
    transform: translateY(-10px);
}

/* --- Animation Base States --- */

/* Element starting from the left, moving right */
.animate-left {
    opacity: 0;
    transform: translateX(-100px); /* Pushed left off-screen */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

/* Element starting from the right, moving left */
.animate-right {
    opacity: 0;
    transform: translateX(100px); /* Pushed right off-screen */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease;
}

/* --- Active Loaded States --- */
.animate-left.is-visible,
.animate-right.is-visible {
    opacity: 1;
    transform: translateX(0); /* Returns to original position */
}

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

.anim-scale:hover{
    transform: scale(1.05);
}


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

.anim-rotate:hover{
    transform: rotate(3deg);
}


/* =========================
   3D TILT
========================= */

.anim-tilt:hover{
    transform: perspective(1000px)
               rotateX(10deg)
               rotateY(10deg);
}


/* =========================
   GLOW
========================= */

.anim-glow:hover{
    box-shadow:
        0 0 10px #4CAF50,
        0 0 20px #4CAF50;
}


/* =========================
   DARK EFFECT
========================= */

.anim-dark:hover{
    background: #111;
    color: white;
}


/* =========================
   GRADIENT EFFECT
========================= */

.anim-gradient:hover{
    background: linear-gradient(135deg,#4CAF50,#2196F3);
    color: white;
}


/* =========================
   SHAKE
========================= */

.anim-shake:hover{
    animation: shake 0.4s;
}

@keyframes shake{
    0%{ transform: translateX(0); }
    25%{ transform: translateX(-5px); }
    50%{ transform: translateX(5px); }
    75%{ transform: translateX(-5px); }
    100%{ transform: translateX(0); }
}


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

.anim-bounce:hover{
    animation: bounce 0.6s;
}

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

    30%{
        transform: translateY(-15px);
    }

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


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

.anim-pulse:hover{
    animation: pulse 1s infinite;
}

@keyframes pulse{
    0%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.05);
    }

    100%{
        transform: scale(1);
    }
}


/* =========================
   FLOATING
========================= */

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

@keyframes floating{
    0%{
        transform: translateY(0);
    }

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

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

/* =========================
   FLOATING
========================= */

.anim-float-X{
    animation: floatingX 3s ease-in-out infinite;
}

@keyframes floatingX{
    0%{
        transform: translateX(0);
    }

    50%{
        transform: translateX(+10px);
    }

    100%{
        transform: translateX(0);
    }
}

/* =========================
   FLIP
========================= */

.anim-flip:hover{
    transform: rotateY(180deg);
}


/* =========================
   SLIDE SHINE
========================= */

.anim-slide{
    position: relative;
    overflow: hidden;
}

.anim-slide::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    transition: 0.5s;
}

.anim-slide:hover::before{
    left: 100%;
}