@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .circle-close-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50% !important;
        padding: 0 !important;
    }
}

.modal-enter { animation: modalEnter 0.3s ease-out forwards; }
.modal-exit { animation: modalExit 0.3s ease-in forwards; }
.fullscreen-slide-up { animation: slideUp 0.4s ease-out forwards; }
.fullscreen-slide-down { animation: slideDown 0.4s ease-in forwards; }

@keyframes modalEnter {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes modalExit {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes slideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar { display: none; }