/* Block Reveal Animation */
.image-reveal {
    overflow: hidden;
}

.image-reveal img {
    opacity: 0;
}

.image-reveal-animate {
    /* transition: opacity 0.5s ease-out, transform 0.5s ease-out; */
}

.image-reveal-animate img {
    opacity: 0;
    animation: text-visible 0.1s linear forwards;
    animation-delay: 0.5s;
}

.image-reveal-animate:after {
    content: '';
    top: -100%;
    left: 0;
    position: absolute;
    width: 2%;
    height: 100%;
    background: var(--primary-color);
    animation: effect-block 1s cubic-bezier(0.4, 1, 0.19, 1);
    /* animation: effect-block 2s linear; */
    /* animation-delay: 5s; */
}

@keyframes text-visible {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes effect-block {
    0% {
        left: 0;
        top: -100%;
        width: 2%;
    }
    20% {
        left: 0;
        top: 0;
        width: 2%;
    }
    50% {
        left: 0;
        top: 0;
        width: 100%;
    }
    100% {
        left: 100%;
        top: 0;
        width: 0%;
    }
}