body:not(.amp) .animate {
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    opacity: 0;
}
body:not(.amp) .animate.animate-loop {
    animation-iteration-count: infinite;
}
body:not(.amp) .animate.fadeIn {
    animation-duration: 0.75s;
    animation-name: fadeIn;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
body:not(.amp) .animate.zoomIn {
    animation-duration: 0.75s;
    animation-name: zoomIn;
}
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
body:not(.amp) .animate.slideInLeft {
    animation-duration: 0.75s;
    animation-name: slideInLeft;
}
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-5em);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
body:not(.amp) .animate.slideInRight {
    animation-duration: 0.75s;
    animation-name: slideInRight;
}
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(5em);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
body:not(.amp) .animate.slideInBottom {
    animation-duration: 0.75s;
    animation-name: slideInBottom;
}

body:not(.amp) .animate.slideInTop {
    animation-duration: 0.75s;
    animation-name: slideInTop;
}

@keyframes slideInBottom {
    0% {
        opacity: 0;
        transform: translateY(5em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInTop {
    0% {
        opacity: 0;
        transform: translateY(-5em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body:not(.amp) .animate.clipHorizontal {
    animation-duration: 0.75s;
    animation-name: clipHorizontal;
}
@keyframes clipHorizontal {
    0% {
        clip-path: polygon(
                0 50%,
                0 100%,
                0 100%,
                0 50%,
                100% 50%,
                100% 0,
                100% 0,
                100% 50%
        );
        opacity: 0;
    }
    to {
        clip-path: polygon(
                0 50%,
                0 100%,
                100% 100%,
                100% 50%,
                100% 50%,
                100% 0,
                0 0,
                0 50%
        );
        opacity: 1;
    }
}
body:not(.amp) .animate.clipVertical {
    animation-duration: 0.75s;
    animation-name: clipVertical;
}
@keyframes clipVertical {
    0% {
        clip-path: polygon(
                50% 0,
                100% 0,
                100% 0,
                50% 0,
                50% 100%,
                0 100%,
                0 100%,
                50% 100%
        );
        opacity: 0;
    }
    to {
        clip-path: polygon(
                50% 0,
                100% 0,
                100% 100%,
                50% 100%,
                50% 100%,
                0 100%,
                0 0,
                50% 0
        );
        opacity: 1;
    }
}

.animate {
    will-change: transform, opacity; /* Indicate that the transform and opacity will change */
}

/* Define the grow animation */

body:not(.amp) .animate.grow {
    animation: grow 0.6s ease-out forwards;
}

@keyframes grow {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

body:not(.amp) .animate.reverse-grow {
    animation: reverse-grow 0.6s ease-out forwards;
}

@keyframes reverse-grow {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}