/* 03 · #lapisan (milik S1). Semua pemilih diawali #lapisan atau .lp__ ; warna hanya dari token base.css */

#lapisan .lp__panel { justify-content: center; }
#lapisan .lp__tumpuk {
  --lp-h: calc(var(--u) * 3.5);
  --lp-gap: calc(var(--u) * .85);
  --lp-pita: calc(var(--u) * 2.7);
  --lp-kait: calc(var(--u) * .9);
  position: relative; width: min(100%, calc(var(--u) * 40));
  display: flex; flex-direction: column; gap: var(--lp-gap);
}
#lapisan .lp__fungsi { position: relative; }
#lapisan .lp__daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--lp-gap); }

/* Lapisan: lempeng datar; muncul dari bawah ke atas mengikuti gulir (.is-on dari JS) */
#lapisan .lp__lapis {
  position: relative; z-index: 1; height: var(--lp-h); box-sizing: border-box;
  display: grid; align-items: center; padding: 0 calc(var(--u) * 1.3);
  border-radius: 8px; background: var(--c-card); border: 1px solid var(--c-line-2);
  color: var(--c-fg); font-size: calc(var(--fs-label) * 1.15); font-weight: 600; line-height: 1.2;
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), height .6s var(--ease), margin .6s var(--ease), border-width .3s, padding .6s var(--ease);
}
#lapisan .lp__lapis.is-on { opacity: 1; transform: none; }
#lapisan .lp__nama { grid-area: 1 / 1; white-space: nowrap; }
#lapisan .lp__nama small { font-size: 1em; font-weight: 500; color: var(--c-fg-2); }
/* Fondasi: bilah yang sama dengan #arti s2 (bidang amber tipis) */
#lapisan .lp__lapis--fondasi { border-color: var(--c-accent-fill); background: color-mix(in srgb, var(--accent) 13%, var(--c-card)); }
/* Batas hanya-baca: garis putus di lapisan integrasi */
#lapisan .lp__lapis--integrasi { border-style: dashed; }

/* Control Tower hanya ada di s1 (Command Center terbelah dua) */
#lapisan .lp__lapis--ct { height: 0; margin-top: calc(-1 * var(--lp-gap)); border-width: 0; overflow: hidden; }
#lapisan[data-state="1"] .lp__lapis--ct { height: var(--lp-h); margin-top: 0; border-width: 1px; opacity: 1; transform: none; overflow: visible; }

/* s1: pita «Konteks spasial» di kanan menyentuh keempat lapisan fungsi */
#lapisan .lp__fungsi .lp__lapis::after {
  content: ''; position: absolute; left: 100%; top: 50%; width: var(--lp-kait); border-top: 1.5px solid var(--c-accent-fill);
  opacity: 0; transition: opacity .4s var(--ease);
}
#lapisan[data-state="1"] .lp__fungsi .lp__lapis { margin-right: calc(var(--lp-pita) + var(--lp-kait)); }
#lapisan[data-state="1"] .lp__fungsi .lp__lapis::after { opacity: 1; transition-delay: .55s; }
#lapisan .lp__pita {
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--lp-pita); margin: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--c-accent-fill); background: color-mix(in srgb, var(--accent) 22%, var(--c-card));
  opacity: 0; transform: scaleY(0); transform-origin: bottom center;
  transition: opacity .4s var(--ease), transform .7s var(--ease);
}
#lapisan .lp__pita span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: var(--fs-label); font-weight: 700; color: var(--c-accent); }
#lapisan[data-state="1"] .lp__pita { opacity: 1; transform: none; transition-delay: .3s; }
/* Dua lapisan pengambilan data meredup di s1 (bukan lapisan fungsi) */
#lapisan[data-state="1"] .lp__dasar .lp__lapis.is-on { opacity: .38; }

/* Partikel data: hanya bergerak ke atas, tidak ada yang kembali ke sistem sumber */
#lapisan .lp__partikel { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#lapisan .lp__partikel i {
  position: absolute; left: var(--x); top: 100%; width: 3px; height: calc(var(--u) * 1.4); margin-left: -1.5px;
  border-radius: 2px; background: linear-gradient(to top, transparent, var(--accent) 70%); opacity: 0;
}
/* Kepala partikel di atas: arah naik terbaca juga di gambar diam */
#lapisan .lp__partikel i::before { content: ''; position: absolute; left: -1.5px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
html:not(.is-static) #lapisan.is-active .lp__partikel i { animation: lp-naik var(--d) linear var(--t) infinite; }
@keyframes lp-naik {
  0% { top: 100%; opacity: 0; }
  10% { opacity: .95; }
  85% { opacity: .95; }
  100% { top: 0%; opacity: 0; }
}

/* Mode statis: keadaan akhir; label lama Command Center tampil kecil di bawah label baru */
.is-static #lapisan .lp__partikel { display: none; }
.is-static #lapisan .lp__lapis--fondasi .lp__nama--lama { display: none; }
.is-static #lapisan .lp__lapis--saji { height: auto; padding-top: .55em; padding-bottom: .55em; row-gap: .15em; }
.is-static #lapisan .lp__lapis--saji .lp__nama { grid-area: auto; }
.is-static #lapisan .lp__lapis--saji .lp__nama--lama { grid-row: 2; font-size: var(--fs-kecil); font-weight: 500; color: var(--c-muted); }

@media (max-width: 860px) {
  #lapisan .lp__tumpuk { --lp-h: 48px; --lp-pita: 34px; --lp-kait: 8px; width: 100%; }
  #lapisan .lp__nama { white-space: normal; }
}