@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); }
}

/* Scale Animations */
@keyframes scale-in {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scale-in-up {
    from { opacity: 0; transform: scale(0.3) translateY(4rem); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes scale-in-down {
    from { opacity: 0; transform: scale(0.3) translateY(-4rem); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Slide Animations */
@keyframes slide-in-top {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slide-in-bottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Special Effects */
@keyframes bounce-in {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes flip-in-x {
    from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
    to { opacity: 1; transform: perspective(400px) rotateX(0deg); }
}

@keyframes flip-in-y {
    from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
    to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

@keyframes rotate-in {
    from { opacity: 0; transform: rotate(-200deg); }
    to { opacity: 1; transform: rotate(0deg); }
}

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

/* Fade Animations */
.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;
}

/* Scale Animations */
.animate.scale-in {
    opacity: 0;
    transform: scale(0.3);
}

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

.animate.scale-in-up {
    opacity: 0;
    transform: scale(0.3) translateY(4rem);
}

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

.animate.scale-in-down {
    opacity: 0;
    transform: scale(0.3) translateY(-4rem);
}

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

/* Slide Animations */
.animate.slide-in-top {
    opacity: 1;
    transform: translateY(-100%);
}

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

.animate.slide-in-right {
    opacity: 1;
    transform: translateX(10%);
}

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

.animate.slide-in-bottom {
    opacity: 1;
    transform: translateY(100%);
}

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

.animate.slide-in-left {
    opacity: 1;
    transform: translateX(-10%);
}

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

/* Special Effects */
.animate.bounce-in {
    opacity: 0;
    transform: scale(0.3);
}

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

.animate.flip-in-x {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
}

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

.animate.flip-in-y {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
}

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

.animate.rotate-in {
    opacity: 0;
    transform: rotate(-200deg);
}

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