/* ============================================================
   performance.css — Optimasi Performa Animasi & Rendering
   Mengurangi lag dengan GPU compositing & transisi efisien
   ============================================================ */

/* ── 1. GPU COMPOSITING LAYER ──────────────────────────────
   Promote elemen yang sering beranimasi ke GPU layer terpisah
   sehingga tidak trigger layout/paint ulang di main thread   */

.glass-panel,
.stat-card,
.modal,
.modal-content,
.sidebar,
.top-bar,
.nav-item,
.btn {
    /* Memaksa browser membuat compositing layer baru */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ── 2. PERBAIKI transition: all → spesifik ────────────────
   'transition: all' memaksa browser cek SEMUA property.
   Ganti ke property yang benar-benar berubah saja.          */

.btn {
    transition: background-color 0.2s ease, color 0.2s ease,
                box-shadow 0.2s ease, transform 0.15s ease !important;
}

.nav-item,
.nav-link {
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease !important;
}

.glass-panel,
.stat-card,
.table-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* ── 3. KURANGI BEBAN backdrop-filter blur ─────────────────
   backdrop-filter: blur sangat mahal di CPU/GPU.
   Kurangi nilai blur dan batasi scope element.              */

:root {
    --glass-blur: 8px; /* Turunkan dari 16px → 8px */
}

/* Gunakan will-change pada elemen yang blur-nya aktif */
.glass-panel {
    will-change: transform;
}

.modal-overlay {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ── 4. OPTIMASI ANIMASI INFINITE LOOPS ───────────────────
   Animasi infinite (pulse, orbFloat) berjalan setiap frame.
   Gunakan animation-timing yang lebih efisien.             */

/* Matikan animasi orbs background yang boros GPU */
.orb,
[class*="orb-"] {
    animation-play-state: paused !important;
}

/* Percepat & sederhanakan pulse animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* Ganti orbFloat dengan versi lebih ringan (hanya opacity) */
@keyframes orbFloat {
    0%, 100% { opacity: 0.08; }
    50%       { opacity: 0.12; }
}

/* ── 5. OPTIMASI KEYFRAMES UTAMA ──────────────────────────
   Gunakan HANYA transform & opacity — tidak pernah trigger
   layout reflow (paling murah untuk GPU compositor).       */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes panelFadeOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(8px) scale(0.98); }
}

/* ── 6. PERCEPAT DURASI TRANSISI ──────────────────────────
   Durasi 0.3-0.4s terasa lambat di aplikasi web. Target 
   optimal adalah 0.15-0.2s untuk microinteractions.       */

:root {
    --transition-smooth: transform 0.18s ease, opacity 0.18s ease;
}

/* Override global untuk elemen interaktif utama */
.btn,
.nav-item,
input,
select,
textarea {
    transition-duration: 0.15s !important;
}

/* Animasi view/panel content sedikit lebih panjang agar halus */
.fade-in,
[class*="fade-in"] {
    animation-duration: 0.25s !important;
}

/* ── 7. CONTAIN — ISOLASI RENDER AREA ────────────────────
   'contain' memberitahu browser: perubahan di sini tidak
   mempengaruhi layout di luar elemen ini.                  */

.table-responsive,
.table-wrapper,
#table-container {
    contain: layout style;
}

.modal-content {
    contain: layout style paint;
}

/* ── 8. FONT RENDERING OPTIMIZATION ──────────────────────  */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* ── 9. HOVER EFEK — HANYA TRANSFORM, BUKAN BOX-SHADOW ──
   box-shadow pada hover trigger repaint. Gunakan 
   filter:drop-shadow atau cukup scale/translate.           */

.btn:hover {
    transform: translateY(-1px) translateZ(0) !important;
}

.btn:active {
    transform: translateY(0) scale(0.98) translateZ(0) !important;
    transition-duration: 0.08s !important;
}

.stat-card:hover,
.glass-panel:hover {
    transform: translateY(-2px) translateZ(0) !important;
}

/* ── 10. REDUCED MOTION — AKSESIBILITAS ──────────────────
   Hormati preferensi sistem pengguna yang minta
   animasi dikurangi (Motion Sickness / performance mode) */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 11. MAP RENDERING & LEAFLET GPU PROMOTION ──────────
   Promosikan layer-layer peta Leaflet ke GPU compositor
   untuk meningkatkan FPS dan kelancaran panning/zoom map. */

.leaflet-tile-container {
    will-change: filter, transform !important;
}

.leaflet-pane svg {
    will-change: transform !important;
}

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-zoom-animated,
.leaflet-interactive {
    will-change: transform !important;
}

.leaflet-container {
    contain: layout size;
}