.animate-on-scroll {
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;
    will-change: transform, opacity;
}

/* Left thi aave */
.fade-in-left {
    transform: translateX(-100%);
}

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

/* Right thi aave */
.fade-in-right {
    transform: translateX(100%);
}

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

.fade-in-up,
.fade-in-down {
    opacity: 0;
    transition: all 0.8s ease-out;
}

/* Niche thi ave */
.fade-in-up {
    transform: translateY(100px);
}

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

/* Upar thi ave */
.fade-in-down {
    transform: translateY(-100px);
}

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


/* Zoom In (off-screen + zoom) */
.zoom-in {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

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

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

/* Zoom Out (off-screen zoom) */
.zoom-out {
    transform: scale(2) translateY(-100vh);
}

    .zoom-out.show {
        opacity: 1;
        transform: scale(1) translateY(0);
    }


/* Rotate In */
.rotate-in {
    transform: rotate(-15deg);
}

    .rotate-in.show {
        opacity: 1;
        transform: rotate(0);
    }

/* Flip In */
.flip-in {
    transform: rotateY(180deg);
    transform-style: preserve-3d;
}

    .flip-in.show {
        opacity: 1;
        transform: rotateY(0);
    }

/*Slide Up*/
.slide-up {
    transform: translateY(100px);
}

    .slide-up.show {
        opacity: 1;
        transform: translateY(0);
    }

.slide-down {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s ease;
}

    .slide-down.show {
        opacity: 1;
        transform: translateY(0);
    }

.bounce-in {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease;
}

    .bounce-in.show {
        opacity: 1;
        animation: bounce 1s ease forwards;
    }

@keyframes bounce {
    0% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.95);
    }

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


/* Heart Beat (slowed) */
.heart-beat.show {
    opacity: 1;
    animation: heartbeat 2s ease-in-out infinite; /* Slowed */
}

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

    14% {
        transform: scale(1.2);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.2);
    }

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

/* Pulse Glow (slowed) */
.pulse-glow.show {
    opacity: 1;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255,0,0,0.6);
    }

    70% {
        box-shadow: 0 0 20px 15px rgba(255,0,0,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,0,0,0);
    }
}

/* Swing (slowed) */
.swing.show {
    opacity: 1;
    animation: swing 1.8s ease-in-out;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Shake (slowed) */
.shake.show {
    opacity: 1;
    animation: shake 1.5s ease-in-out;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-5px);
    }

    80% {
        transform: translateX(5px);
    }
}
/* 1. Subtle Slide In */
.slide-in {
    animation: slideIn 2s ease-out infinite;
    opacity: 0;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    50% {
        opacity: 1;
        transform: translateX(0);
    }

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