/* css/animations.css */

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

/* Fades in and slides up from below */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fades in and slides down from above */
@keyframes fadeInSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fades in with a subtle scaling effect */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation for modal content entry */
@keyframes modalEntry {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ==========================================================================
   Animation Application
   ========================================================================== */

/* Apply entrance animations to major layout components */
.header-section {
    opacity: 0;
    animation: fadeInSlideDown 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
}

h2, #jenisCount, #jaringanCountContainer {
    opacity: 0;
    animation: fadeInSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.table-container {
    opacity: 0;
    animation: fadeInScale 0.6s ease-out 0.4s forwards;
}

/* Staggered animation for table rows to appear one by one */
table tbody tr {
    opacity: 0;
    animation: fadeInSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}