/* zoom แบบปกติ */
.zoom-in {
    opacity: 0;
    transform: scale(0.8);
    animation: zoomIn 1s ease-out forwards;
}

@keyframes zoomIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* แบบ pop up*/
.zoom-pop {
    opacity: 0;
    transform: scale(0.6);
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    70% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* zoom blur*/
.zoom-blur {
    opacity: 0;
    transform: scale(1.2);
    filter: blur(10px);
    animation: sharpIn 1.2s ease-out forwards;
}

@keyframes sharpIn {
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* zoom deep*/
.zoom-deep {
    opacity: 0;
    transform: scale(1.5);
    animation: deepIn 1.2s ease-out forwards;
}

@keyframes deepIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}