/* ==========================================================================
   bentang.co.id v3 — 40-motion
   Tiga lapis: masuk (hero), gulir (reveal), sentuh (transisi di komponen).
   Hanya transform / opacity / clip-path. Nol scroll event listener.
   Desktop: rise 20 px + unmask. Mobile: rise-m 12 px, tanpa clip-path,
   durasi 320/480 ms (DESIGN.md § Motion).
   ========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise-m {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes unmask {
  from { clip-path: inset(0 0 102% 0); }
  /* Akhir animasi memperluas kotak klip melewati border box: ascender dan
     descender huruf tidak terpotong (line-height 1.12 lebih pendek dari
     tinggi tinta huruf). */
  to   { clip-path: inset(-0.12em -0.04em); }
}

/* Keyframe, durasi, dan stagger dipilih per lebar layar. */
:root {
  --kf-rise: rise;
  --kf-unmask: unmask;
  --st-1: 160ms;
  --st-2: 220ms;
  --st-3: 340ms;
}

@media (max-width: 900px) {
  :root {
    --kf-rise: rise-m;
    --kf-unmask: rise-m; /* clip-path tidak dipakai di mobile */
    --d-fast: 320ms;
    --d-enter: 480ms;
    --d-slow: 480ms;
    --st-1: 80ms;
    --st-2: 140ms;
    --st-3: 220ms;
  }
}

/* --------------------------------------------------- 1. saat halaman muat --- */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 {
    animation: var(--kf-unmask) var(--d-enter) var(--ease-out) both;
  }
  .hero .sub {
    animation: var(--kf-rise) var(--d-enter) var(--ease-out) var(--st-1) both;
  }
  .hero-actions {
    animation: var(--kf-rise) var(--d-enter) var(--ease-out) var(--st-2) both;
  }
}

/* Dialog alur lima langkah: dipicu klik, bukan gulir. Urutannya mengikat
   (DESIGN.md, 2 Nov 2026): scrim 240 ms lebih dulu, dialog 340 ms menyusul,
   isi berurutan 0/40/80 ms. */
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Isi dialog masuk berurutan: judul, paragraf, lalu label + Keluaran. */
@keyframes dialog-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Pindah langkah: isi lama keluar 120 ms ke kiri, isi baru masuk 260 ms dari
   sisi datangnya (berikut = kanan, sebelumnya = kiri). Nomor dan judul ikut
   bergeser bersama isi karena berada di dalam wadah yang sama. */
@keyframes step-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-16px); }
}

@keyframes step-next {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes step-prev {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dialog-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.98); }
}

@keyframes scrim-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .flow-dialog[open] { animation: dialog-in 340ms var(--ease-out) both; }
  .flow-dialog[open]::backdrop { animation: scrim-in 240ms var(--ease-out) both; }

  .flow-dialog[open]:not(.is-closing) .flow-dialog-content > .flow-meta,
  .flow-dialog[open]:not(.is-closing) .flow-dialog-content > h3 {
    animation: dialog-item-in 240ms var(--ease-out) 0ms both;
  }
  .flow-dialog[open]:not(.is-closing) .flow-dialog-content > .flow-body {
    animation: dialog-item-in 240ms var(--ease-out) 40ms both;
  }
  .flow-dialog[open]:not(.is-closing) .flow-dialog-content > .flow-out {
    animation: dialog-item-in 240ms var(--ease-out) 80ms both;
  }

  .flow-dialog-content.is-out { animation: step-out 120ms var(--ease-inout) both; }
  .flow-dialog-content.is-next { animation: step-next 260ms var(--ease-out) both; }
  .flow-dialog-content.is-prev { animation: step-prev 260ms var(--ease-out) both; }

  /* Menutup 220 ms; scrim menyusul 160 ms setelah jeda 60 ms. */
  .flow-dialog.is-closing { animation: dialog-out 220ms var(--ease-inout) both; }
  .flow-dialog.is-closing::backdrop { animation: scrim-out 160ms var(--ease-inout) 60ms both; }
}

/* --------------------------------------------- 2. saat elemen masuk layar --- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rule-bleed {
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 26%;
    }

    .section-head h2,
    .card,
    .steps li,
    .table tbody tr,
    .statement h2,
    .statement .sub,
    .facts-line,
    .posts a,
    .page-head h1,
    .page-head .sub,
    .page-block h2,
    .table-kv tr,
    .placeholder,
    .page-cta h2,
    .page-cta .sub {
      animation: var(--kf-rise) linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 32%;
    }

    /* Geser awal reveal per item: kelompok terasa mengalir, bukan muncul serempak.
       Batas DESIGN.md § Motion: maksimum 5 item per grup. */
    .card:nth-child(2), .steps li:nth-child(2) { animation-range: entry 7% cover 34%; }
    .card:nth-child(3), .steps li:nth-child(3) { animation-range: entry 10% cover 36%; }
    .steps li:nth-child(4) { animation-range: entry 13% cover 38%; }
    .steps li:nth-child(5) { animation-range: entry 16% cover 40%; }
  }
}

/* ------------- 3. cadangan: browser tanpa scroll-driven animation ---------- */
/* .motion-fallback hanya dipasang oleh site.js bila @supports gagal, sehingga
   tanpa JS tidak ada satu pun elemen yang tersembunyi. */
@media (prefers-reduced-motion: no-preference) {
  .motion-fallback :is(.section-head h2, .card, .steps li,
    .table tbody tr, .statement h2, .statement .sub, .facts-line, .posts a, .page-head h1,
    .page-head .sub, .page-block h2, .table-kv tr, .placeholder, .page-cta h2, .page-cta .sub) {
    opacity: 0;
    transform: translateY(var(--motion-shift, 36px));
    transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  }
}

.motion-fallback :is(.section-head h2, .card, .steps li,
  .table tbody tr, .statement h2, .statement .sub, .facts-line, .posts a, .page-head h1,
  .page-head .sub, .page-block h2, .table-kv tr, .placeholder, .page-cta h2, .page-cta .sub).is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .motion-fallback { --motion-shift: 12px; }
}

/* ------------------------------------------------------------- 4. tekan --- */
.btn:active,
.card a:active {
  transform: translateY(1px);
  transition: transform 120ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}