/*
 * File: style.css
 * Deskripsi: Style kustom untuk aplikasi Jurnal 7 Kebiasaan.
 * Digunakan bersama dengan Tailwind CSS.
*/

/* Memberikan sedikit perbesaran pada checkbox agar lebih mudah diklik */
.habit-checkbox {
    transform: scale(1.2);
}

/* --- Animasi untuk Notifikasi Pop-up --- */

/* Animasi saat notifikasi muncul */
.notification {
    animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Animasi saat notifikasi menghilang */
.notification.hide {
    animation: popOut 0.3s ease-in forwards;
}

/* Keyframes untuk animasi 'popIn' */
@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Keyframes untuk animasi 'popOut' */
@keyframes popOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

/* Atribut untuk menyembunyikan elemen sementara (jika menggunakan Vue.js) */
[v-cloak] {
    display: none;
}

/* Anda bisa menambahkan style kustom lainnya di sini */