/* Motion layer — ringan, aman, hormat prefers-reduced-motion.
   Aktif hanya bila <html class="motion"> (di-set inline saat motion diizinkan). */

@keyframes moFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes moUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

html.motion { scroll-behavior: smooth; }

/* Fade-in halaman saat load (auto-play, tak butuh JS untuk reveal). */
html.motion body { animation: moFade .5s ease both; }

/* Scroll-reveal: elemen ditandai .reveal oleh motion.js (hanya yang di bawah fold). */
html.motion .reveal { opacity: 0; }
html.motion .reveal.in { animation: moUp .6s cubic-bezier(.2,.65,.3,1) both; }

/* ====== Animasi mikro ringan (CSS-only, transform/opacity → GPU) ====== */

/* Transisi warna link halus */
html.motion a { transition: color .15s ease; }

/* Dasar transisi kartu */
html.motion .card, html.motion .pc, html.motion .ncard, html.motion .kpi,
html.motion .jbg-bf-card, html.motion .jbg-bu-card,
html.motion .tk-row, html.motion .pop-item, html.motion .rel a, html.motion .nh-it {
    transition: transform .22s cubic-bezier(.2,.6,.2,1), box-shadow .22s ease;
}

/* Hover-lift kartu (tanpa menggeser layout — pakai translate) */
html.motion .card:hover, html.motion .pc:hover, html.motion .ncard:hover,
html.motion .kpi:hover, html.motion .jbg-bf-card:hover, html.motion .jbg-bu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(13, 59, 138, .18);
}

/* Hover-lift halus untuk item daftar/berita */
html.motion .tk-row:hover, html.motion .pop-item:hover,
html.motion .rel a:hover, html.motion .nh-it:hover {
    transform: translateY(-2px);
}

/* Zoom gambar dalam kartu saat hover (di-clip oleh kartu) */
html.motion .pc { overflow: hidden; }
html.motion .pc-img { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
html.motion .pc:hover .pc-img { transform: scale(1.06); }

html.motion .jbg-bu-card { overflow: hidden; }
html.motion .jbg-bu-img { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
html.motion .jbg-bu-card:hover .jbg-bu-img { transform: scale(1.06); }

/* Feedback tekan tombol */
html.motion .btn, html.motion button, html.motion .lnk {
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}
html.motion .btn:active, html.motion button:active, html.motion .lnk:active { transform: scale(.96); }

/* ====== Hormati preferensi pengguna: matikan semua motion ====== */
@media (prefers-reduced-motion: reduce) {
    html.motion *, html.motion *::before, html.motion *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    html.motion .reveal { opacity: 1 !important; transform: none !important; }
}