@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fade-in-top {
    from { opacity: 0; transform: translateY(-4rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-right {
    from { opacity: 0; transform: translateX(4rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-bottom {
    from { opacity: 0; transform: translateY(4rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-left {
    from { opacity: 0; transform: translateX(-4rem); }
    to { opacity: 1; transform: translateX(0); }
}

.animate {
    opacity: 0;
    will-change: opacity, transform;
}

.animate.fade-in {
    opacity: 0;
}

.animate.fade-in.viewed {
    animation: fade-in 0.75s ease-out forwards;
}

.animate.fade-in-top {
    opacity: 0;
    transform: translateY(-4rem);
}

.animate.fade-in-top.viewed {
    animation: fade-in-top 0.75s ease-out forwards;
}

.animate.fade-in-right {
    opacity: 0;
    transform: translateX(4rem);
}

.animate.fade-in-right.viewed {
    animation: fade-in-right 0.75s ease-out forwards;
}

.animate.fade-in-bottom {
    opacity: 0;
    transform: translateY(4rem);
}

.animate.fade-in-bottom.viewed {
    animation: fade-in-bottom 0.75s ease-out forwards;
}

.animate.fade-in-left {
    opacity: 0;
    transform: translateX(-4rem);
}

.animate.fade-in-left.viewed {
    animation: fade-in-left 0.75s ease-out forwards;
}