.text-animate {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.text-animate.visible {
    opacity: 1;
}

.image-animate-left {
    position: relative;
    opacity: 0;
    left: -100%;
    transition: left 2s ease-in-out, opacity 2s ease-in-out;
}

.image-animate-left.visible {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

.section-animate-left {
    width: 100% margin-left: auto;
    margin-right: auto;
    opacity: 0;
    left: -100%;
    transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
    position: relative;
}

.section-animate-left.visible {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

.section-animate-right {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
    position: relative;
}

.section-animate-right.visible {
    transform: translateX(0%);
    opacity: 1;
}

.hero-area-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-in-out;
}

.hero-area-hidden {
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s ease-in-out, transform 0.8s ease-in-out;
}