/* ========================================================= */
/* FILE: animations.css                                      */
/* Kumpulan Efek Animasi & UI/UX (Pure CSS)                  */
/* ========================================================= */

/* 1. PAGE TRANSITION (Fade In Up) */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeSlideUp 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* 2. NEON GLOW HOVER (Tombol & Card) */
.hover-glow-indigo {
    transition: all 0.3s ease;
}
.hover-glow-indigo:hover {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.hover-glow-emerald {
    transition: all 0.3s ease;
}
.hover-glow-emerald:hover {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

/* 3. SKELETON PULSE (Anti-Lag Loader) */
@keyframes skeletonShimmer {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}
.animate-skeleton {
    animation: skeletonShimmer 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 4. SIKEP 3D FLOATING LOGO & BREATHING NEON */
@keyframes sikepFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.45)) drop-shadow(0 0 45px rgba(16, 185, 129, 0.25));
    }
    50% {
        transform: translateY(-8px) scale(1.03);
        filter: drop-shadow(0 0 35px rgba(99, 102, 241, 0.75)) drop-shadow(0 0 65px rgba(16, 185, 129, 0.4));
    }
}
.sikep-logo-animated {
    animation: sikepFloat 3s ease-in-out infinite;
}

/* 5. INDETERMINATE SHIMMER BAR */
@keyframes indeterminateProgress {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(30%);
    }
    100% {
        transform: translateX(100%);
    }
}
.animate-shimmer-bar {
    animation: indeterminateProgress 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 6. CINEMATIC APP & AUTH TRANSITIONS */
.auth-fade-out {
    opacity: 0 !important;
    transform: scale(0.97) !important;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    pointer-events: none !important;
}

.app-fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.app-fade-prep {
    opacity: 0 !important;
    transform: translateY(8px) !important;
}

/* Status Non-Blocking Sync Badge */
.sync-badge-pulse {
    animation: pulseSlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulseSlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.92); }
}



/* =========================================================
   TAHAP 3: SMART DOM DIFFING & HIGH-PERFORMANCE TABLE RENDERING
   ========================================================= */
@keyframes rowHighlightPulse {
  0% { background-color: rgba(99, 102, 241, 0.35); }
  100% { background-color: transparent; }
}

.row-highlight-new {
  animation: rowHighlightPulse 1.8s ease-out forwards;
}

tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: 0 48px;
}