/**
 * PERF OVERRIDE — dimuat SETELAH custom-enhancements.css
 * Simpan di: public/assets/css/perf-override.css
 *
 * Tujuan: mematikan efek yang membuat scroll berat, tanpa perlu
 * mengedit custom-enhancements.css (yang panjang) satu per satu.
 */

/* ------------------------------------------------------------
   1. backdrop-filter dimatikan di SEMUA elemen.
   Ini penyebab utama lag. Efek blur "kaca" harus dihitung ulang
   browser di setiap frame scroll untuk semua yang ada di belakang
   elemen. Yang terdaftar di CSS kamu:
   - .header                (custom-enhancements.css)  <- fixed, selalu tampil
   - .stats-item            (custom-enhancements.css)
   - .achievement-card      (custom-enhancements.css)
   - .badge-date            (custom-enhancements.css)  <- satu per kartu berita
   - .portfolio .badge      (custom-enhancements.css)
   - .hp-kepala-caption     (home.blade.php)
   - .stats .stats-item     (dynamic-styles, versi lama)
   ------------------------------------------------------------ */
*,
*::before,
*::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Karena blur hilang, naikkan opasitas supaya teks tetap terbaca
   dan tampilan tetap mirip. */
.home-page .hp-kepala-caption {
    background: rgba(22, 19, 15, 0.78) !important;
}

.stats-item,
.stats .stats-item {
    background: rgba(255, 255, 255, 0.14);
}

.achievement-card {
    background: rgba(255, 255, 255, 0.16);
}

/* ------------------------------------------------------------
   2. Animasi infinite yang menggambar ulang (repaint) tiap frame.
   box-shadow tidak bisa dianimasikan oleh GPU, jadi setiap titik
   timeline menggambar ulang area sekitarnya terus-menerus.
   ------------------------------------------------------------ */
.timeline-dot {
    animation: none !important;
}

/* ------------------------------------------------------------
   3. Header: transisi hanya pada properti yang memang berubah.
   (custom-enhancements.css memakai `transition: all` di sini)
   ------------------------------------------------------------ */
.header {
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* ------------------------------------------------------------
   4. HERO di HP / tablet (iOS Safari/WebKit paling terdampak).
   - filter: drop-shadow(0 30px 35px) pada foto besar dihitung ulang
     browser saat area itu tergulir; di WebKit ini termasuk yang
     paling mahal. Dimatikan di layar <= 991px (desktop tetap).
   - .hp-hero-noise: pola titik (radial-gradient 24px) yang menutupi
     seluruh hero, hanya dekorasi tipis. Disembunyikan di HP.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .home-page .hp-kepala-img {
        -webkit-filter: none !important;
        filter: none !important;
    }

    .home-page .hp-hero-noise {
        display: none !important;
    }
}