/*
 * FPRB Jambidan — animasi & interaksi situs publik (dimuat setelah fprb.css).
 *
 * Aturan main:
 *   - Keadaan diam = keadaan akhir. Semua gerak ada di dalam
 *     @media (prefers-reduced-motion: no-preference), jadi pengguna yang
 *     meminta gerak dikurangi melihat halaman utuh tanpa animasi.
 *   - Hanya opacity / translate / scale / rotate / transform yang dianimasikan.
 *   - Tidak ada kedipan cepat; denyut terlama 2 detik per siklus.
 */

/* ---------------------------------------------------------------------
   Komponen pendukung animasi
   --------------------------------------------------------------------- */
html, body { overflow-x: clip; }

.progres-gulir { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1040; background: var(--rambu); box-shadow: 0 0 12px rgba(var(--rambu-rgb), .8); transform-origin: left; transform: scaleX(0); pointer-events: none; }

.ke-atas {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 1020; width: 48px; height: 48px; border: 0; border-radius: 50%;
    background: var(--rambu); color: var(--di-rambu); font-size: 1.25rem; display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(var(--rambu-rgb), .35); opacity: 0; visibility: hidden; translate: 0 14px;
    transition: opacity .25s, translate .25s, visibility .25s, background-color .15s;
}
.ke-atas.tampil { opacity: 1; visibility: visible; translate: 0 0; }
.ke-atas:hover { background: var(--rambu-tua); }

.kepala-situs .navbar { transition: box-shadow .3s, border-color .3s, background-color .3s; }
.kepala-situs.tergulir .navbar { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); border-color: var(--garis-kuat); background-color: rgba(24, 24, 24, .9); }

.titik-hidup { position: relative; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--rambu); margin-right: .55rem; vertical-align: .05em; flex: none; }
.titik-hidup::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--rambu); }

.penanda { position: relative; }
.penanda--denyut::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2.5px solid var(--w, currentColor); pointer-events: none; opacity: 0; }

.centang { fill: none; stroke: var(--rambu); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.hero-kartu { transition: transform .5s var(--lentur), border-color .25s; }
.kartu-tulisan img, .arak-butir img { transition: scale .6s var(--lentur); }
.kartu-tulisan { transition: border-color .2s, translate .25s var(--lentur), box-shadow .3s; }
.kartu, .kpi-butir, .program > div, .ajakan, .langkah-butir, .arak-butir { transition: border-color .25s, translate .25s var(--lentur), box-shadow .3s; }
.pil, .tab-pilih button { transition: background-color .18s, border-color .18s, color .18s, translate .18s; }
.daftar-tanda, .program i, .merek-tanda { transition: scale .3s cubic-bezier(.3, 1.6, .5, 1), rotate .3s; }
.kepala-situs .nav-link { transition: background-color .18s, color .18s; }
.btn { transition: translate .18s, scale .18s, box-shadow .25s, background-color .15s, border-color .15s, color .15s; }
.btn .bi-arrow-right, a .bi-arrow-right { display: inline-block; transition: translate .2s; }
.tanggal-kotak { transition: translate .2s, box-shadow .2s; }
.jatuhkan { transition: border-color .2s, background-color .2s, scale .2s; }
.layer-butir { transition: opacity .25s; }
.daftar > li { transition: background-color .2s; }

/* Tanpa gerak, arak-arakan menjadi deretan yang bisa digulir sendiri */
.arak { overflow-x: auto; scrollbar-width: thin; }
.arak [data-salinan] { display: none; }

/* ---------------------------------------------------------------------
   Animasi — hanya bila pengguna tidak meminta gerak dikurangi
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    @keyframes naik { from { opacity: 0; translate: 0 18px; } }
    @keyframes muncul { from { opacity: 0; scale: .94; translate: -50% 28px; } }
    @keyframes pantul-masuk { from { opacity: 0; scale: .8; } }
    @keyframes turun { from { opacity: 0; translate: 0 -8px; } }
    @keyframes geser-kanan { from { opacity: 0; translate: -24px 0; } }
    @keyframes denyut { from { scale: .75; opacity: .9; } to { scale: 2.1; opacity: 0; } }

    /* Perpindahan antarhalaman (browser yang mendukung View Transitions lintas dokumen) */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: vt-keluar .18s ease-in both; }
    ::view-transition-new(root) { animation: vt-masuk .32s ease-out both; }
    .kepala-situs { view-transition-name: kepala-situs; }
    @keyframes vt-keluar { to { opacity: 0; } }
    @keyframes vt-masuk { from { opacity: 0; translate: 0 12px; } }

    /* Bilah kemajuan gulir digerakkan posisi gulir itu sendiri (JS hanya cadangan) */
    @supports ((animation-timeline: scroll()) and (animation-range: entry)) {
        .progres-gulir { animation: isi-bilah linear both; animation-timeline: scroll(root block); }
        @keyframes isi-bilah { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    }

    /* Navigasi turun dari atas saat halaman dimuat */
    .kepala-situs .navbar { animation: turun-nav .7s var(--lentur) backwards; }
    @keyframes turun-nav { from { opacity: 0; translate: 0 -24px; } }

    /* Judul kata demi kata: naik dari balik kabur */
    .kata { display: inline-block; animation: kata-naik .9s var(--lentur) backwards; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
    @keyframes kata-naik { from { opacity: 0; translate: 0 .6em; filter: blur(10px); } }

    /* Kepala halaman dalam: isi muncul berurutan */
    .kepala-halaman .wadah > * { animation: naik .6s var(--lentur) backwards; }
    .kepala-halaman .wadah > :nth-child(2) { animation-delay: .1s; }
    .kepala-halaman .wadah > :nth-child(3) { animation-delay: .2s; }
    .kepala-halaman .wadah > :nth-child(4) { animation-delay: .3s; }

    /* Hero: satu rangkaian pembuka — lencana, judul, pengantar, tombol, lalu kartu mengipas keluar */
    .hero-lencana { animation: naik .6s var(--lentur) backwards; }
    .hero-slogan { animation: naik .6s .1s var(--lentur) backwards; }
    .hero-pengantar { animation: naik .7s .55s var(--lentur) backwards; }
    .hero-aksi .btn { animation: pantul-masuk .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
    .hero-aksi .btn:nth-child(1) { animation-delay: .7s; }
    .hero-aksi .btn:nth-child(2) { animation-delay: .82s; }
    .hero-darurat { animation: naik .6s 1.5s var(--lentur) backwards; }
    .hero-peta { animation: muncul 1s .75s var(--lentur) backwards; }
    .hero-kartu { animation: kipas 1.1s var(--lentur) backwards, ambang 7s ease-in-out infinite; }
    .hero-kartu--2, .hero-kartu--4 { animation-delay: 1s, 2.2s; }
    .hero-kartu--1, .hero-kartu--5 { animation-delay: 1.15s, 3.4s; }
    .hero-kartu--4, .hero-kartu--1 { animation-direction: normal, reverse; }
    @keyframes kipas { from { left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
    @keyframes ambang { 50% { translate: 0 -10px; } }
    .hero-kartu:hover { border-color: rgba(var(--rambu-rgb), .8); }

    /* Arak-arakan foto berjalan; berhenti saat disentuh kursor atau fokus papan ketik */
    .arak { overflow: hidden; }
    .arak [data-salinan] { display: block; }
    .arak-jalur { animation: arak 70s linear infinite; }
    .arak:hover .arak-jalur, .arak:focus-within .arak-jalur { animation-play-state: paused; }
    @keyframes arak { to { translate: calc(-50% - .5rem) 0; } }
    .arak-butir:hover img { scale: 1.07; }
    .arak-butir:hover { translate: 0 -4px; }

    /* Sematan dasbor: penanda memuat berputar */
    .sematan-putar { animation: putar .9s linear infinite; }
    @keyframes putar { to { rotate: 360deg; } }

    /* Pita bahaya berjalan */
    .pita-bahaya { background-size: 39.6px 100%; animation: pita-jalan 1.6s linear infinite; }
    @keyframes pita-jalan { to { background-position: 39.6px 0; } }

    /* Titik "langsung" berdenyut */
    .titik-hidup::after { animation: denyut 2s ease-out infinite; }

    /* Nomor langkah formulir memantul saat langkahnya terlihat */
    .langkah-butir[data-aos] .langkah-kepala::before { transition: scale .5s cubic-bezier(.3, 1.7, .5, 1) .3s; }
    .langkah-butir[data-aos]:not(.aos-animate) .langkah-kepala::before { scale: 0; }

    /* Peta: penanda jatuh berurutan, cincin denyut kejadian terbaru, bidang layer memudar masuk */
    .penanda { animation: penanda-jatuh .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
    @keyframes penanda-jatuh { from { opacity: 0; translate: 0 -22px; scale: .35; } }
    .penanda--denyut::after { animation: denyut 2.2s ease-out infinite; }
    .leaflet-overlay-pane svg path { animation: lapis-muncul .8s ease-out backwards; }
    @keyframes lapis-muncul { from { opacity: 0; } }
    .leaflet-popup-content-wrapper { animation: popup-masuk .28s cubic-bezier(.3, 1.4, .5, 1) backwards; transform-origin: bottom center; }
    @keyframes popup-masuk { from { opacity: 0; scale: .9; } }
    .legenda { animation: naik .5s .5s var(--lentur) backwards; }
    .panel-layer { animation: geser-kanan .5s .15s var(--lentur) backwards; }
    .panel-layer[open] .panel-badan { animation: turun .3s ease-out; }
    .peta-info { animation: naik .3s ease-out; }

    /* Hasil analisis & pergantian tab */
    [role="tabpanel"]:not([hidden]) { animation: turun .28s ease-out; }
    #hasil .hasil-spanduk { animation: pantul-masuk .5s cubic-bezier(.3, 1.4, .5, 1) backwards; }
    #hasil .objek, #hasil > .kartu, #hasil > p { animation: naik .5s var(--lentur) backwards; }
    #hasil .objek:nth-of-type(1) { animation-delay: .12s; }
    #hasil .objek:nth-of-type(2) { animation-delay: .2s; }
    #hasil .objek:nth-of-type(3) { animation-delay: .28s; }
    #hasil .objek:nth-of-type(n + 4) { animation-delay: .36s; }
    #hasil > .kartu { animation-delay: .42s; }
    .temuan { animation: geser-kanan .45s .35s ease-out backwards; }

    /* Centang "laporan terkirim" tergambar */
    .centang circle { stroke-dasharray: 183; stroke-dashoffset: 183; animation: gores .7s ease-out forwards; }
    .centang path { stroke-dasharray: 42; stroke-dashoffset: 42; animation: gores .45s .6s ease-out forwards; }
    @keyframes gores { to { stroke-dashoffset: 0; } }
    .kode-tiket { animation: pantul-masuk .6s .9s cubic-bezier(.3, 1.5, .5, 1) backwards; }

    /* Interaksi kecil */
    .btn:hover { translate: 0 -2px; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
    .btn-primary:hover { box-shadow: 0 10px 34px rgba(var(--rambu-rgb), .4); }
    .btn-kuning:hover { box-shadow: 0 10px 34px rgba(245, 183, 0, .35); }
    .btn:active { translate: 0 0; scale: .97; box-shadow: none; }
    .btn:hover .bi-arrow-right, a:hover > .bi-arrow-right { translate: 5px 0; }
    .kartu-tulisan:hover img { scale: 1.06; }
    .kartu-tulisan:hover { translate: 0 -4px; box-shadow: 0 24px 50px -18px #000; }
    .kpi-butir:hover, .program > div:hover { translate: 0 -4px; border-color: rgba(var(--rambu-rgb), .55); box-shadow: 0 24px 50px -22px #000; }
    .pil:hover, .tab-pilih button:hover { translate: 0 -2px; }
    .daftar > li:hover { background-color: rgba(255, 255, 255, .03); }
    .daftar > li:hover .daftar-tanda, .program > div:hover i { scale: 1.15; rotate: -6deg; }
    .merek:hover .merek-tanda { rotate: -12deg; scale: 1.08; }
    .kosong i { animation: melayang 3.2s ease-in-out infinite; }
    @keyframes melayang { 50% { translate: 0 -7px; } }
    .daftar > li:hover .tanggal-kotak { translate: 0 -3px; box-shadow: 0 8px 20px rgba(var(--rambu-rgb), .25); }
    .jatuhkan.aktif { scale: 1.015; }
    .form-control, .form-select { transition: border-color .15s, box-shadow .15s, background-color .15s; }

    /* Tulisan raksasa di kaki situs naik saat tergulir masuk */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        .kaki-raksasa { animation: raksasa-naik linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
        @keyframes raksasa-naik { from { translate: 0 45%; opacity: 0; } }
    }
}

/* AOS: jarak gerak diperpendek agar tetap tenang dan tidak melebarkan halaman */
[data-aos="fade-up"] { transform: translate3d(0, 28px, 0); }
[data-aos="fade-left"] { transform: translate3d(28px, 0, 0); }
[data-aos="fade-right"] { transform: translate3d(-28px, 0, 0); }
[data-aos="zoom-in"] { transform: scale(.92); }