.gapp{
    width: 100%;
    height: 100vh;
}

/* =====================================
   SCROLL ANIMATION
===================================== */

.animated-div {
    opacity: 0;
    transition: none;
}

/* Left → Right */
.scroll-left-right {
    animation: leftRight 0.8s ease forwards;
}

@keyframes leftRight {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Right → Left */
.scroll-right-left {
    animation: rightLeft 0.8s ease forwards;
}

@keyframes rightLeft {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Top → Bottom */
.scroll-top-bottom {
    animation: topBottom 0.8s ease forwards;
}

@keyframes topBottom {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Bottom → Top */
.scroll-bottom-top {
    animation: bottomTop 0.8s ease forwards;
}

@keyframes bottomTop {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Fade In */
.scroll-fade {
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* Zoom */
.scroll-zoom {
    animation: zoomIn 0.8s ease forwards;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* Rotate */
.scroll-rotate {
    animation: rotateIn 0.8s ease forwards;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.8);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}