@keyframes zoomIn {
    0% {
        transform: scale(1);
        opacity: 1;
        transform-origin: center center;
    }
    100% {
        transform: scale(1000);
        opacity: 1;
        transform-origin: center center;
    }
}

@keyframes fadeOut {
    0% {
        transform: scale(1);
        opacity: 1;
        transform-origin: center center;
    }
    100% {
        transform: scale(1);
        opacity: 0;
        transform-origin: center center;
    }
}

.animate-zoom-in {
    animation: zoomIn 1s ease-in forwards;
    transform-origin: center center;
    will-change: transform;
}
.animate-fade-out {
    animation: fadeOut 1s ease-out forwards;
}