/* =====================================================================
   GULIR (3.93.0) — reveal saat scroll khusus PC. Pasangan: /assets/js/gulir.js
   Aktif hanya bila: mouse + layar >= 1024px + gerak tidak dikurangi, dan JS menambah html.g-on.
   Hanya translate/scale/opacity (ringan, diproses compositor). Tanpa blur, tanpa clip-path.
   Dimuat SEBELUM navy.css (navy.css harus tetap stylesheet terakhir).
   Rollback: hapus <link> gulir.css dan <script> gulir.js di tiap halaman.
   ===================================================================== */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.g-on {
    --g-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo: cepat di awal, mendarat sangat lembut */
    --g-jarak: 72px;
  }

  /* bagian halaman dipotong di sumbu X saja, supaya kartu yang menunggu di luar tepi tidak memunculkan scrollbar horizontal */
  html.g-on :where(main, section, .seksi, .cta, .video-band, footer) { overflow-x: clip; }

  /* keadaan awal: tersembunyi, belum bergerak (tidak memakai transform, jadi hover kartu tidak terganggu) */
  html.g-on .g-rv:not(.g-in) { opacity: 0; }
  html.g-on .g-rv.g-in { opacity: 1; }

  html.g-on .g-rv.g-go {
    will-change: translate, scale, opacity;
    animation: g-naik 1.15s var(--g-ease) var(--g-d, 0ms) backwards, g-pudar .75s ease-out var(--g-d, 0ms) backwards;
  }
  html.g-on .g-rv.g-go[data-g="kiri"] { animation-name: g-kiri, g-pudar; }
  html.g-on .g-rv.g-go[data-g="kanan"] { animation-name: g-kanan, g-pudar; }
  html.g-on .g-rv.g-instan { animation: none; }

  @keyframes g-naik  { from { translate: 0 48px; scale: 0.97; } to { translate: 0 0; scale: 1; } }
  @keyframes g-kiri  { from { translate: calc(var(--g-jarak) * -1) 0; scale: 0.97; } to { translate: 0 0; scale: 1; } }
  @keyframes g-kanan { from { translate: var(--g-jarak) 0; scale: 0.97; } to { translate: 0 0; scale: 1; } }
  @keyframes g-pudar { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- Mikro-UX judul seksi: segilima emas berputar masuk dengan pegas ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.g-on .seksi-kepala.g-in h2::before { animation: g-segilima 1s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--g-d, 0ms) + 220ms) backwards; }
  @keyframes g-segilima { from { scale: 0; rotate: -150deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
  /* judul: naik sedikit lebih jauh dari kartu supaya ada hierarki gerak */
  html.g-on .seksi-kepala.g-go { --g-jarak: 40px; }
}

@media print {
  .g-rv { opacity: 1 !important; animation: none !important; translate: none !important; }
}