/* =========================================
   A DAY MADE JUST FOR YOU
   ANIMATION STYLES
========================================= */


/* 1. FADE IN
   Elemen muncul secara perlahan
*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* 2. SLIDE UP
   Elemen muncul dari bawah secara perlahan
*/

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 3. SLIDE DOWN
   Elemen muncul dari atas
*/

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 4. SCALE IN
   Elemen muncul dengan efek membesar
*/

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* 5. FLOATING
   Elemen bergerak naik dan turun secara perlahan
*/

@keyframes floating {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


/* 6. SOFT ROTATION
   Elemen bergerak sedikit ke kiri dan kanan
*/

@keyframes softRotation {
    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}


/* 7. SPARKLE
   Efek kilau yang muncul dan menghilang
*/

@keyframes sparkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* 8. PAGE TRANSITION
   Transisi saat konten halaman diganti
*/

.page-enter {
    animation: fadeIn 0.5s ease both;
}


/* 9. ANIMATION UTILITY CLASSES
   Class yang bisa digunakan pada elemen HTML
*/

.fade-in {
    animation: fadeIn 0.7s ease both;
}

.slide-up {
    animation: slideUp 0.7s ease both;
}

.slide-down {
    animation: slideDown 0.7s ease both;
}

.scale-in {
    animation: scaleIn 0.5s ease both;
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

.soft-rotation {
    animation: softRotation 4s ease-in-out infinite;
}

.sparkle {
    animation: sparkle 2s ease-in-out infinite;
}


/* 10. ANIMATION DELAYS
   Mengatur jeda waktu munculnya elemen
*/

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}


/* 11. REDUCED MOTION
   Mengurangi animasi bagi pengguna
   yang memilih gerakan lebih sedikit
*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

}

/* =========================================
   BIRTHDAY CALENDAR ANIMATION
========================================= */

@keyframes birthdayPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(167, 124, 131, 0.15);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(167, 124, 131, 0.12);
    }

}


/* Animasi lembut untuk kalender */

.birthday-calendar-card {
    animation: slideUp 0.8s ease both;
}


/* Animasi untuk ucapan */

.birthday-greeting {
    animation: fadeIn 1s ease both;
    animation-delay: 0.2s;
}