/* 08 · #bukaan (milik S2). Semua pemilih diawali #bukaan atau .bk__ */

/* Latar ambient di luar komposit tajam */
#bukaan .bk__latar {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; z-index: 0;
  filter: blur(34px) brightness(.32) saturate(.85); pointer-events: none;
}
#bukaan .bk__peta { z-index: 1; background: transparent; }
#bukaan.bk--tanpa-citra .bk__peta, #bukaan .bk--tanpa-citra .bk__peta { background: #0a0e13; }
/* Bayangan halus di tepi komposit agar terbaca sebagai citra, bukan latar */
#bukaan .bk__peta::after {
  content: ''; position: absolute; pointer-events: none;
  left: var(--komposit-x0, 0); right: var(--komposit-x1, 0); top: var(--komposit-y0, 0); bottom: var(--komposit-y1, 0);
  box-shadow: 0 0 0 1px rgba(230, 237, 243, .08), 0 30px 80px -30px rgba(0, 0, 0, .9);
}

/* Komposit sebagai <img> ber-transform di bawah SVG garis (JS); <image> SVG mesin disembunyikan.
   Geser 2019|2026: wadah klip (overflow hidden) dan isinya hanya digeser dengan transform. */
#bukaan .bk--cermin .peta-dasar__citra { display: none; }
#bukaan .bk__citra, #bukaan .bk__klip, #bukaan .bk__klip-isi { position: absolute; inset: 0; pointer-events: none; }
#bukaan .bk__klip { overflow: hidden; transform: translateX(-100%); will-change: transform; }
#bukaan .bk__klip-isi { will-change: transform; }
#bukaan .bk__img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
#bukaan .bk--cermin .peta-dasar__svg { z-index: 1; }

/* Poligon bukaan: garis amber, bidang tipis; muncul bergelombang di s1 */
#bukaan .bk__poli {
  fill: var(--accent); fill-opacity: .14; stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round;
  opacity: 0; transition: opacity .25s var(--ease);
}
#bukaan[data-state="1"] .bk__poli, #bukaan[data-state="2"] .bk__poli {
  opacity: 1; animation: bk-muncul 1s var(--ease) var(--d) both;
}
@keyframes bk-muncul {
  0% { opacity: 0; fill-opacity: .55; stroke-width: 2.6; }
  35% { opacity: 1; fill-opacity: .42; }
  100% { opacity: 1; fill-opacity: .14; stroke-width: 1.4; }
}
#bukaan .bk__cincin circle { fill: none; stroke: rgba(230, 237, 243, .92); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .25s; }
#bukaan[data-state="1"] .bk__cincin circle, #bukaan[data-state="2"] .bk__cincin circle { opacity: 1; animation: bk-cincin .9s var(--ease) var(--d) both; }
@keyframes bk-cincin { 0% { opacity: 0; } 100% { opacity: 1; } }

/* Peredup s2 */
#bukaan .bk__redup { position: absolute; inset: 0; z-index: 2; background: rgba(13, 17, 23, .72); opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
#bukaan[data-state="2"] .bk__redup { opacity: 1; }

/* Garis geser */
#bukaan .bk__geser { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .45s var(--ease); }
#bukaan[data-state="1"] .bk__geser, #bukaan[data-state="2"] .bk__geser, .is-static #bukaan .bk__geser { opacity: 0; }
#bukaan .bk__garis {
  position: absolute; left: 0; top: var(--y0, 0); height: var(--tinggi, 100%); width: 2px; margin-left: -1px;
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(13, 17, 23, .35), 0 0 18px rgba(0, 0, 0, .55);
  will-change: transform;
}
#bukaan .bk__pegangan {
  position: absolute; left: 0; top: calc(var(--y0, 0px) + var(--tinggi, 100%) / 2); margin-left: -22px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13, 17, 23, .82); border: 2px solid #fff; color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5); pointer-events: auto; cursor: ew-resize; touch-action: none;
  will-change: transform;
}
#bukaan .bk__pegangan svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#bukaan[data-state="1"] .bk__pegangan, #bukaan[data-state="2"] .bk__pegangan { pointer-events: none; }
#bukaan .bk--seret .bk__pegangan { border-color: var(--accent); }
#bukaan .bk__tahun {
  position: absolute; left: 0; top: calc(var(--y0, 0px) + calc(var(--u) * 1.2));
  font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.9); line-height: 1; letter-spacing: .01em;
  color: #fff; padding: .28em .55em .22em; border-radius: 8px; background: rgba(13, 17, 23, .78);
  border: 1px solid rgba(230, 237, 243, .22); white-space: nowrap; will-change: transform;
  transition: opacity .3s var(--ease);
}
#bukaan .bk--kiri-sempit .bk__tahun--kiri, #bukaan .bk--kanan-sempit .bk__tahun--kanan { opacity: 0; }

/* s1: penghitung di ruang kosong kiri bawah, di bawah kartu narasi */
#bukaan .bk__hitung {
  position: absolute; z-index: 4; left: var(--gutter); bottom: 6vh;
  display: flex; flex-direction: column; gap: calc(var(--u) * .5);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.5) calc(var(--u) * 1.1);
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 12px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#bukaan .bk__baris { margin: 0; display: flex; align-items: baseline; gap: .1em; white-space: nowrap; }
#bukaan .bk__n { font-size: calc(var(--fs-angka) * .95); }

/* s2: 15 dari 15 + enam pasang bukti, di atas komposit yang meredup */
#bukaan .bk__sampel {
  /* Dipusatkan di atas komposit: left/right/top/bottom = tepi komposit, ukuran mengikuti isi */
  position: absolute; z-index: 4;
  left: var(--komposit-x0, 42%); right: var(--komposit-x1, var(--gutter)); top: var(--komposit-y0, 10vh); bottom: var(--komposit-y1, 5vh);
  width: fit-content; height: fit-content; margin: auto;
  --bk-ubin: calc(var(--u) * 7.4);
  display: flex; flex-direction: column; gap: calc(var(--u) * .9);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.5);
  background: rgba(22, 27, 34, .9); border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--c-shadow);
}
#bukaan .bk__skor { margin: 0; display: flex; align-items: baseline; gap: .35em; }
#bukaan .bk__lima { font-size: calc(var(--fs-angka) * .85); }
#bukaan .bk__dari { font-family: var(--display); font-weight: 700; font-size: calc(var(--fs-angka) * .5); line-height: .9; color: var(--c-fg); }
#bukaan .bk__deret { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: calc(var(--u) * 1) calc(var(--u) * 1.2); justify-content: start; }
#bukaan .bk__deret li { display: flex; gap: 4px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
#bukaan .bk__deret img { width: var(--bk-ubin); height: calc(var(--bk-ubin) * .955); object-fit: cover; border-radius: 4px; background: #0a0e13; }
#bukaan .bk__deret li:nth-child(1) { transition-delay: .35s; }
#bukaan .bk__deret li:nth-child(2) { transition-delay: .45s; }
#bukaan .bk__deret li:nth-child(3) { transition-delay: .55s; }
#bukaan .bk__deret li:nth-child(4) { transition-delay: .65s; }
#bukaan .bk__deret li:nth-child(5) { transition-delay: .75s; }
#bukaan .bk__deret li:nth-child(6) { transition-delay: .85s; }
#bukaan[data-state="2"] .bk__deret li, .is-static #bukaan .bk__deret li { opacity: 1; transform: none; }
#bukaan .bk__sampel .label-data { align-self: flex-start; }

/* Atribusi citra pojok kanan bawah komposit */
#bukaan .bk__atribusi { position: absolute; z-index: 5; right: calc(var(--komposit-x1, var(--gutter)) + var(--u) * .7); bottom: calc(var(--komposit-y1, 4vh) + var(--u) * .5); }
#bukaan.bk--tanpa-citra .bk__atribusi { display: none; }

/* Mode statis: keadaan akhir (2026 penuh, poligon, bukti) */
.is-static #bukaan .bk__poli, .is-static #bukaan .bk__cincin circle { opacity: 1; animation: none; }

@media (max-width: 860px) {
  #bukaan .bk__hitung, #bukaan .bk__sampel { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 16px; width: auto; }
  #bukaan .bk__deret { grid-template-columns: repeat(2, auto); }
}

/* Latar buram dan peredup dikomposit sekali */
#bukaan .bk__latar, #bukaan .bk__redup { will-change: opacity; }