/* 07 · #sensor (milik S2). Semua pemilih diawali #sensor atau .sn__ */

#sensor {
  /* Lebar kartu narasi bleed (kolom 1–5) dan ruang visual di kanannya */
  --sn-narasi: calc((100vw - 2 * var(--gutter) - 11 * var(--gap)) * 5 / 12 + 4 * var(--gap));
  --sn-ruang-w: calc(100vw - 2 * var(--gutter) - var(--sn-narasi) - 3vw);
  --sn-ruang-h: calc(100vh - var(--nav-h) - 3vh - 7vh - 1.6em);
  --sn-atas: calc(var(--nav-h) + 3vh);
}

/* Isi .swap rata atas: tinggi tiap kalimat tetap tinggi aslinya (cek kepadatan) */
#sensor .swap > * { align-self: start; }
/* Kartu bleed mengikuti tinggi langkah aktif (headline 2–3 baris, angka besar hanya di s0) */
html:not(.is-static) #sensor .sn__narasi .swap { position: relative; }
html:not(.is-static) #sensor .sn__narasi .swap > :not(.on) { position: absolute; left: 0; right: 0; top: 0; }

/* Pembatas bab (transisi 6 → 7): penanda kecil di atas headline */
#sensor .sn__bab { margin: 0 0 calc(var(--u) * .5); font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.25); line-height: 1; letter-spacing: .01em; color: var(--c-accent); }

/* Angka besar s0 di kartu narasi */
#sensor .sn__luas { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * .45); }
#sensor .sn__angka { margin: calc(var(--u) * .2) 0 0; display: flex; align-items: baseline; white-space: nowrap; }
#sensor .sn__angka .angka { font-size: calc(var(--fs-angka) * .92); }
#sensor .sn__luas .label-data { margin-top: calc(var(--u) * .3); }

/* Peta Bangka */
/* Mosaik sebagai <img> ber-transform di bawah SVG vektor (JS); <image> SVG mesin disembunyikan */
#sensor .sn--cermin .peta-dasar__citra { display: none; }
#sensor .sn__citra { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }
#sensor .sn__citra img { width: 100%; height: 100%; max-width: none; transition: filter 1s var(--ease); }
#sensor .sn--cermin .peta-dasar__svg { z-index: 1; }
#sensor .sn__peta { transition: opacity .9s var(--ease); will-change: opacity; }
#sensor[data-state="1"] .sn__citra img { filter: brightness(.62) saturate(.85); }
#sensor .sn__peta .peta-dasar__svg { transition: filter 1s var(--ease); }
#sensor[data-state="1"] .sn__peta .peta-dasar__svg { filter: brightness(.62) saturate(.85); }
#sensor[data-state="2"] .sn__peta { opacity: 0; }
/* Tepi lunak mosaik ke warna latar; tebal bayangan diatur JS (piksel citra) */
#sensor .sn__tepi { position: absolute; inset: 0; pointer-events: none; }
#sensor .sn__kab path { fill: none; stroke: rgba(201, 209, 217, .55); stroke-width: 1; }
#sensor .sn__iup-poli { fill: var(--kat-iup-laut); fill-opacity: .14; stroke: var(--kat-iup-laut); stroke-width: 1.5; stroke-linejoin: round; }
#sensor .sn__iup { transition: opacity .8s var(--ease); }
#sensor[data-state="1"] .sn__iup { opacity: .3; }
#sensor .sn__kotak rect { fill: var(--accent); fill-opacity: .1; stroke: var(--accent); stroke-width: 1.6; opacity: 0; transition: opacity .6s var(--ease) .9s; }
#sensor[data-state="1"] .sn__kotak rect { opacity: 1; }
#sensor .sn__koba {
  position: absolute; left: 0; top: 0; z-index: 3;
  font-size: var(--fs-label); font-weight: 600; color: var(--accent); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
#sensor .sn__koba.on { transition-delay: 1.35s; }

/* Legenda dan atribusi peta (s0): baru tampil setelah G-01 memudar */
#sensor .sn__panel:not(.sn--peta) .sn__legenda, #sensor .sn__panel:not(.sn--peta) .sn__atribusi-peta { opacity: 0; }
#sensor[data-state="1"] .peta-dasar__penanda, #sensor[data-state="2"] .peta-dasar__penanda { opacity: 0; transition: opacity .4s; }
#sensor .sn__legenda { left: var(--gutter); bottom: 4.2vh; }
#sensor .sn__garis-iup { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--kat-iup-laut); margin-right: 2px; }
#sensor .sn__legenda.label-data--contoh::before { display: none; }
#sensor .sn__atribusi-peta { position: absolute; right: var(--gutter); bottom: 4.2vh; z-index: 4; }
#sensor.sn--tanpa-citra .sn__atribusi-peta, .sn--tanpa-citra .sn__atribusi-peta { display: none; }

/* G-01 penuh layar di atas peta; memudar setelah ditahan (kelas .sn--peta dari JS) */
#sensor .sn__foto { position: absolute; inset: 0; z-index: 6; border-radius: 0; opacity: 1; visibility: visible; transition: opacity 1.3s var(--ease), visibility 0s; }
#sensor .sn__foto img { height: 100%; }
#sensor .sn__foto .foto-ai__label { left: var(--gutter); bottom: 4.2vh; transition: opacity .25s var(--ease); }
/* Label «Ilustrasi» hilang lebih dulu; legenda (posisi sama) baru muncul setelahnya, jadi tidak pernah bertumpuk */
#sensor .sn--peta .sn__foto .foto-ai__label { opacity: 0; }
#sensor .sn--peta .sn__legenda.on, #sensor .sn--peta .sn__atribusi-peta.on { transition: opacity var(--t) var(--ease) .45s, transform var(--t) var(--ease) .45s; }
#sensor .sn--peta .sn__foto { opacity: 0; visibility: hidden; transition: opacity 1.3s var(--ease), visibility 0s 1.3s; }

/* s1: potongan tangkapan Wayback (kotak sumber 602,96 → 1990,1420 dari 3200×2000) */
#sensor .sn__wb {
  position: absolute; z-index: 3; margin: 0; left: var(--sn-x, 45%); top: var(--sn-y, var(--sn-atas));
  width: var(--sn-s, min(var(--sn-ruang-w), calc(var(--sn-ruang-h) * 1388 / 1324)));
}
#sensor .sn__wb.on { transition-delay: .25s; }
#sensor .sn__wb-bingkai { aspect-ratio: 1388 / 1324; }
#sensor .sn__wb-bingkai img { position: absolute; max-width: none; width: 230.548%; height: auto; left: -43.372%; top: -7.251%; }
#sensor .sn__wb-atribusi { margin-top: 8px; text-align: right; }
#sensor .sn__sorot {
  position: absolute; left: 66.4%; top: 18.1%; width: 11.6%; height: 4%; border-radius: 6px;
  border: 2px solid var(--accent); opacity: 0;
}
#sensor .sn__lencana {
  position: absolute; right: 2.6%; top: 24.6%; z-index: 2;
  font-size: var(--fs-label); background: rgba(13, 17, 23, .9); box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}
#sensor .sn__lencana svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
#sensor[data-state="1"] .sn__sorot { opacity: 1; animation: sn-denyut 1.5s var(--ease) 1s 1 both; }
#sensor[data-state="1"] .sn__lencana { animation: sn-denyut 1.5s var(--ease) 1s 1 both; }
@keyframes sn-denyut {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .75); }
  70% { box-shadow: 0 0 0 16px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

/* s2: dua komposit berdampingan lalu menumpuk */
#sensor .sn__pasang {
  /* Kotak sama persis dengan komposit di #bukaan agar garis geser bersambung */
  position: absolute; z-index: 3; left: var(--sn-x, 45%); top: var(--sn-y, var(--sn-atas));
  width: var(--sn-s, min(var(--sn-ruang-w), var(--sn-ruang-h))); aspect-ratio: 1;
  transform: none;
}
#sensor .sn__ubin {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 8px;
  border: 1px solid rgba(230, 237, 243, .14); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .85); background: #0a0e13; opacity: 0;
}
#sensor .sn__ubin img { width: 100%; height: 100%; object-fit: cover; }
#sensor .sn__ubin--b { clip-path: inset(0 0 0 50%); }
#sensor[data-state="2"] .sn__ubin { opacity: 1; }
#sensor[data-state="2"] .sn__ubin--a { animation: sn-a 2.6s var(--ease) both; }
#sensor[data-state="2"] .sn__ubin--b { animation: sn-b 2.6s var(--ease) both; }
@keyframes sn-a {
  0% { opacity: 0; left: 0; top: 26%; width: 48%; height: 48%; transform: translateX(10%); }
  26% { opacity: 1; left: 0; top: 26%; width: 48%; height: 48%; transform: none; }
  58% { opacity: 1; left: 0; top: 26%; width: 48%; height: 48%; transform: none; }
  100% { opacity: 1; left: 0; top: 0; width: 100%; height: 100%; transform: none; }
}
@keyframes sn-b {
  0% { opacity: 0; left: 52%; top: 26%; width: 48%; height: 48%; transform: translateX(16%); clip-path: inset(0 0 0 0); }
  32% { opacity: 1; left: 52%; top: 26%; width: 48%; height: 48%; transform: none; clip-path: inset(0 0 0 0); }
  58% { opacity: 1; left: 52%; top: 26%; width: 48%; height: 48%; transform: none; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; left: 0; top: 0; width: 100%; height: 100%; transform: none; clip-path: inset(0 0 0 50%); }
}
#sensor .sn__tanggal {
  position: absolute; left: calc(var(--u) * .8); top: calc(var(--u) * .8);
  font-size: var(--fs-label); font-weight: 600; color: #e6edf3; white-space: nowrap;
  padding: .3em .7em; border-radius: 999px; background: rgba(13, 17, 23, .8); border: 1px solid rgba(230, 237, 243, .2);
}
#sensor .sn__tanggal--kanan { left: auto; right: calc(var(--u) * .8); }
#sensor .sn__geser { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
#sensor .sn__geser b {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13, 17, 23, .82); border: 2px solid #fff; color: #fff;
}
#sensor .sn__geser svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sensor[data-state="2"] .sn__geser { opacity: 1; transition: opacity .5s var(--ease) 2.45s; }
#sensor .sn__pasang-atribusi { position: absolute; right: calc(var(--u) * .7); bottom: calc(var(--u) * .5); }

/* Mode statis: keadaan akhir s2 saja di panel (peta s0 dan tangkapan s1 tidak menumpuk di atasnya) */
.is-static #sensor .sn__wb, .is-static #sensor .sn__koba, .is-static #sensor .sn__legenda, .is-static #sensor .sn__atribusi-peta { display: none; }
.is-static #sensor .sn__ubin { animation: none !important; opacity: 1; }
.is-static #sensor .sn__geser { opacity: 1; }

@media (max-width: 860px) {
  #sensor .sn__pasang { position: relative; right: auto; top: auto; width: auto; margin: 16px; }
}

/* Lapisan kompositor sendiri untuk peralihan pudar */
#sensor .sn__foto, #sensor .sn__wb { will-change: opacity; }