/* 
Version : 1.0
Last Update: 17-Sep-2025 17:33 (UTC +6.00)
*/

/* Common animation setup */
.animate {
    /* mark for animating with the "animate" class , but don't just hide normally ... hide only when the script is ready to start the animations */
    /* opacity: 1;
    transition: 0.3s; */
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-out;
}

.animate.ready {
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease-out;
}

/* Common class added by JS when in view */
.animate.show {
    opacity: 1;
    visibility: visible;
}

/* Fade in (just fades and moves slightly up) */
.fade-in {
    transform: translateY(20px);
    transition: all 0.5s ease-out;
}

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

/* Slide from left */
.slide-in-left {
    transform: translateX(-100px);
}

.slide-in-left.show {
    transform: translateX(0);
}

/* Slide from right */
.slide-in-right {
    transform: translateX(100px);
}

.slide-in-right.show {
    transform: translateX(0);
}

/* Slide from bottom */
.slide-in-bottom {
    transform: translateY(100px);
}

.slide-in-bottom.show {
    transform: translateY(0);
}

/* Scale-up effect: starts small and invisible */
.scale-up {
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
    visibility: hidden;
}

/* When element enters the screen */
.scale-up.show {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}



.intro {
    animation: animateIntro 2s ease-out forwards;
}

@keyframes animateIntro {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}