.wb-anim--curtain {
    animation-name: wbCurtain;
}

.wb-anim--fromLeft {
    animation-name: wbFromLeft;
}

.wb-anim--fromRight {
    animation-name: wbFromRight;
}

.wb-anim--fromTop {
    animation-name: wbFromTop;
}

.wb-anim--fromBottom {
    animation-name: wbFromBottom;
}

@keyframes wbCurtain {
    from {
        opacity: 1;
        -webkit-clip-path: inset(0 50% 0 50%);
        clip-path: inset(0 50% 0 50%);
    }

    to {
        opacity: 1;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wbFromLeft {
    from {
        opacity: 1;
        transform: translateX(-100vw);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wbFromRight {
    from {
        opacity: 1;
        transform: translateX(100vw);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wbFromTop {
    from {
        opacity: 1;
        transform: translateY(-100vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wbFromBottom {
    from {
        opacity: 1;
        transform: translateY(100vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-wb-anim="curtain"] {
        -webkit-clip-path: none !important;
        clip-path: none !important;
    }
}