/* ==========================================================================
   HERO-BURANGRANG.CSS — "LIVING BURANGRANG"
   KKN Tematik 2026 · Kelompok 07 · Universitas Nurtanio Bandung · Desa Cipada
   --------------------------------------------------------------------------
   Dimuat SETELAH css/responsive.css sehingga seluruh aturan hero lama
   (.hero-l1/.hero-l2/.hero-l3 dst.) tergantikan tanpa perlu menghapusnya.

   Isi berkas:
     01. Token warna lanskap
     02. Panggung & aturan lapisan
     03. Langit, atmosfer, cahaya puncak
     04. Awan
     05. Lapisan geografi (gunung & hutan) + sistem "dunia" 1600×900
     06. Kabut atmosferik
     07. Partikel ambien
     08. Tirai gelap & vignette
     09. Tipografi hero
     10. Tombol & micro-interaction
     11. Kartu elevasi + garis penghubung ke puncak
     12. Indikator gulir
     13. Transisi hero → seksi berikutnya
     14. Koreografi intro
     15. Responsif
     16. prefers-reduced-motion, kontras tinggi, cetak
   ========================================================================== */

/* ==========================================================================
   01. TOKEN WARNA LANSKAP
   Palet dikunci: satu warna hangat sebagai aksen, sisanya dingin & gelap.
   ========================================================================== */
.lb {
  --lb-ink:        #111417;   /* arang dalam    */
  --lb-forest:     #1D3027;   /* hutan gelap    */
  --lb-moss:       #35553E;   /* hijau gunung   */
  --lb-mist:       #526A73;   /* biru kabut     */
  --lb-gold:       #FFC107;   /* emas hangat    */
  --lb-orange:     #F4A261;   /* jingga senja   */
  --lb-white:      #F8FAFC;
  --lb-gray:       #CBD5E1;

  /* Titik puncak dalam sistem koordinat dunia 1600×900 */
  --lb-peak-x: 1010;
  --lb-peak-y: 286;

  /* Ukuran "dunia" lanskap. JS menimpanya dengan nilai px yang presisi;
     nilai di bawah adalah cadangan yang sudah benar tanpa JavaScript. */
  --lb-ww: max(100%, 170svh);
  --lb-wb: 0px;
  --lb-wl: calc(50% - var(--lb-ww) / 2);

  /* Amplitudo parallax kursor (dikalikan data-lb-depth tiap lapisan) */
  --lb-amp: 22;

  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--lb-ink);
  contain: paint;
}

/* ==========================================================================
   02. PANGGUNG & LAPISAN
   Aturan penting: JavaScript HANYA menyentuh `transform` pada .lb-layer.
   Seluruh animasi CSS berjalan pada anak (.lb-drift / .lb-world) agar tidak
   pernah saling menimpa.
   ========================================================================== */
.lb-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.lb-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.lb-drift,
.lb-world { transform: translate3d(0, 0, 0); }

/* ==========================================================================
   03. LANGIT · ATMOSFER · CAHAYA PUNCAK
   ========================================================================== */
.lb-sky {
  background:
    linear-gradient(180deg,
      #070A0C  0%,
      #0C1115 16%,
      #121B21 32%,
      #1B272E 48%,
      #26343A 62%,
      #33434A 74%,
      #46565A 86%,
      #5B6A6A 100%);
}
[data-theme="dark"] .lb-sky {
  background:
    linear-gradient(180deg,
      #04060 0%, #05080A 0%, #090E12 22%, #0E171D 44%,
      #142027 62%, #1A2830 80%, #202D31 100%);
}

/* Gradasi atmosfer: kehangatan yang mengumpul di garis cakrawala */
.lb-atmos {
  background:
    radial-gradient(130% 70% at 63% 34%,
      rgba(244, 162, 97, 0.30)  0%,
      rgba(244, 162, 97, 0.13) 30%,
      rgba(82, 106, 115, 0.14) 54%,
      transparent 78%),
    linear-gradient(180deg, transparent 30%, rgba(82, 106, 115, 0.22) 66%, rgba(82, 106, 115, 0.40) 100%);
}

/* Cahaya matahari tepat di balik puncak — inti kecil, halo lebar.
   Posisi mengikuti puncak Burangrang (63% lebar dunia). */
.lb-glow {
  background:
    radial-gradient(circle at 63% 29%, rgba(255, 241, 214, 0.55) 0%, rgba(255, 241, 214, 0) 5.5%),
    radial-gradient(circle at 63% 30%, rgba(255, 205, 130, 0.44) 0%, rgba(255, 205, 130, 0) 17%),
    radial-gradient(ellipse 40% 30% at 63% 31%, rgba(255, 193, 7, 0.30) 0%, rgba(255, 193, 7, 0) 68%),
    radial-gradient(ellipse 78% 52% at 63% 33%, rgba(244, 162, 97, 0.28) 0%, rgba(244, 162, 97, 0) 72%);
  mix-blend-mode: screen;
  animation: lb-glow-breathe 14s ease-in-out infinite;
}
@keyframes lb-glow-breathe {
  0%, 100% { opacity: .82; }
  50%      { opacity: 1; }
}

/* Berkas cahaya volumetrik — tiga pita lebar, sangat samar */
.lb-shafts { overflow: hidden; mix-blend-mode: screen; opacity: .5; }
.lb-shaft {
  position: absolute;
  top: -30%;
  left: 63%;
  width: 16%;
  height: 110%;
  /* Tanpa filter: blur(). Kelembutannya datang dari gradien dua arah, yang
     tidak perlu digambar ulang setiap kali lapisan bergeser. */
  background:
    linear-gradient(180deg, rgba(255, 226, 178, 0.20), rgba(255, 226, 178, 0) 82%),
    radial-gradient(60% 100% at 50% 0%, rgba(255, 226, 178, 0.16), transparent 72%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
  transform-origin: 50% 0;
}
.lb-shaft--a { transform: rotate(-19deg) translateX(-140%); animation: lb-shaft 22s ease-in-out infinite; }
.lb-shaft--b { transform: rotate(-6deg)  translateX(-40%);  animation: lb-shaft 27s ease-in-out infinite 4s; opacity: .8; }
.lb-shaft--c { transform: rotate(11deg)  translateX(70%);   animation: lb-shaft 31s ease-in-out infinite 9s; opacity: .65; }
@keyframes lb-shaft {
  0%, 100% { opacity: .30; }
  50%      { opacity: .85; }
}

/* Bintang — hanya di mode gelap, dibuat oleh JS */
.lb-stars { opacity: 0; transition: opacity 1.2s var(--ease-soft, ease); }
[data-theme="dark"] .lb-stars { opacity: 1; }
.lb-star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: .7;
  animation: lb-twinkle var(--tw, 3.4s) ease-in-out infinite var(--td, 0s);
}
@keyframes lb-twinkle {
  0%, 100% { opacity: .18; }
  50%      { opacity: .9; }
}

/* ==========================================================================
   04. AWAN — pita lembut tanpa tepi keras, bergerak 90–150 detik
   ========================================================================== */
.lb-clouds { overflow: hidden; }
.lb-clouds .lb-drift {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: no-repeat;
}
.lb-clouds--far .lb-drift {
  top: 12%;
  height: 42%;
  opacity: .22;
  background-image:
    radial-gradient(ellipse 13% 44% at  6% 52%, rgba(226, 238, 244, .55), transparent 70%),
    radial-gradient(ellipse 10% 34% at 17% 38%, rgba(226, 238, 244, .42), transparent 72%),
    radial-gradient(ellipse 16% 40% at 31% 60%, rgba(226, 238, 244, .38), transparent 74%),
    radial-gradient(ellipse 11% 30% at 46% 34%, rgba(226, 238, 244, .45), transparent 72%),
    radial-gradient(ellipse 14% 46% at 58% 56%, rgba(226, 238, 244, .34), transparent 74%),
    radial-gradient(ellipse 12% 36% at 72% 40%, rgba(226, 238, 244, .40), transparent 72%),
    radial-gradient(ellipse 15% 42% at 87% 58%, rgba(226, 238, 244, .32), transparent 74%);
  animation: lb-drift-l 150s linear infinite;
}
.lb-clouds--mid .lb-drift {
  top: 22%;
  height: 40%;
  opacity: .30;
  background-image:
    radial-gradient(ellipse 18% 38% at 10% 56%, rgba(233, 243, 247, .50), transparent 72%),
    radial-gradient(ellipse 13% 28% at 24% 40%, rgba(233, 243, 247, .38), transparent 74%),
    radial-gradient(ellipse 20% 44% at 40% 62%, rgba(255, 226, 190, .30), transparent 74%),
    radial-gradient(ellipse 15% 32% at 57% 44%, rgba(233, 243, 247, .42), transparent 72%),
    radial-gradient(ellipse 19% 40% at 74% 60%, rgba(255, 226, 190, .26), transparent 74%),
    radial-gradient(ellipse 14% 30% at 90% 42%, rgba(233, 243, 247, .38), transparent 72%);
  animation: lb-drift-l 94s linear infinite;
}
@keyframes lb-drift-l {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes lb-drift-r {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ==========================================================================
   05. LAPISAN GEOGRAFI — sistem "dunia" 1600×900
   Semua siluet memakai satu viewBox sehingga tumpang tindihnya selalu tepat.
   Lebar dunia (--lb-ww) & jarak dari dasar (--lb-wb) dihitung ulang oleh JS
   agar puncak Burangrang selalu jatuh pada ±33% tinggi layar.
   ========================================================================== */
.lb-geo {
  left: var(--lb-wl);
  right: auto;
  top: auto;
  bottom: var(--lb-wb);
  width: var(--lb-ww);
  height: auto;
}
.lb-world {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lb-range-far  { opacity: .95; }
.lb-range-mid  { opacity: 1; }
.lb-burangrang { opacity: 1; }

/* Garis punggung puncak berdenyut sangat pelan seperti cahaya yang bergeser */
.lb-crestline { animation: lb-crest 11s ease-in-out infinite; }
@keyframes lb-crest {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* Hutan — siluet SVG eksternal, ditempatkan di dalam dunia yang sama */
/* Dasar lembah: blok gelap di bawah garis lanskap, tepi atasnya luruh
   ke dalam siluet hutan sehingga tidak ada sambungan yang terlihat. */
.lb-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--lb-floor, 0px);
  background: linear-gradient(180deg, rgba(5, 8, 10, 0) 0%, #05080A 26%, #05080A 100%);
  pointer-events: none;
}

.lb-forest--far   { opacity: .45; }
.lb-forest--mid   { opacity: .8; }
.lb-forest--front { opacity: 1; }

/* ==========================================================================
   06. KABUT — dua lapis, arah berlawanan, sangat lambat
   Tanpa filter: blur (mahal). Kelembutan datang dari gradien radial itu
   sendiri sehingga tidak ada tepi yang keras.
   ========================================================================== */
.lb-haze {
  background: linear-gradient(180deg,
    transparent 44%,
    rgba(120, 148, 158, 0.05) 58%,
    rgba(120, 148, 158, 0.10) 70%,
    rgba(120, 148, 158, 0.12) 80%,
    rgba(120, 148, 158, 0.03) 100%);
  mix-blend-mode: screen;
}
.lb-fog { overflow: hidden; }
.lb-fog .lb-drift {
  position: absolute;
  left: 0;
  width: 200%;
  background-repeat: no-repeat;
}
.lb-fog--high .lb-drift {
  bottom: 24%;
  height: 26%;
  opacity: .2;
  background-image:
    radial-gradient(ellipse 16% 60% at  4% 62%, rgba(214, 231, 238, .58), transparent 72%),
    radial-gradient(ellipse 21% 74% at 19% 50%, rgba(214, 231, 238, .44), transparent 74%),
    radial-gradient(ellipse 17% 62% at 34% 66%, rgba(214, 231, 238, .52), transparent 72%),
    radial-gradient(ellipse 23% 70% at 51% 52%, rgba(214, 231, 238, .38), transparent 76%),
    radial-gradient(ellipse 18% 66% at 67% 64%, rgba(214, 231, 238, .48), transparent 73%),
    radial-gradient(ellipse 20% 72% at 84% 50%, rgba(214, 231, 238, .40), transparent 75%);
  animation: lb-drift-l 128s linear infinite, lb-swell 26s ease-in-out infinite;
}
.lb-fog--low .lb-drift {
  bottom: 6%;
  height: 22%;
  opacity: .26;
  background-image:
    radial-gradient(ellipse 22% 80% at  8% 64%, rgba(226, 238, 243, .62), transparent 74%),
    radial-gradient(ellipse 18% 66% at 26% 52%, rgba(226, 238, 243, .48), transparent 72%),
    radial-gradient(ellipse 25% 78% at 44% 66%, rgba(226, 238, 243, .54), transparent 76%),
    radial-gradient(ellipse 19% 68% at 63% 54%, rgba(226, 238, 243, .44), transparent 73%),
    radial-gradient(ellipse 24% 76% at 81% 66%, rgba(226, 238, 243, .50), transparent 75%),
    radial-gradient(ellipse 17% 62% at 95% 54%, rgba(226, 238, 243, .40), transparent 72%);
  animation: lb-drift-r 176s linear infinite, lb-swell 34s ease-in-out infinite 6s;
}
@keyframes lb-swell {
  0%, 100% { opacity: .3; }
  50%      { opacity: .58; }
}

/* ==========================================================================
   07. PARTIKEL AMBIEN — sedikit saja, hanya untuk menandai udara bergerak
   ========================================================================== */
.lb-particles { overflow: hidden; }
.lb-particle {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 200, .85) 0%, rgba(244, 162, 97, .35) 45%, transparent 72%);
  opacity: 0;
  animation: lb-float var(--dur) linear infinite var(--delay);
}
.lb-particle--leaf {
  border-radius: 46% 4% 46% 4%;
  background: linear-gradient(140deg, rgba(126, 158, 128, .75), rgba(53, 85, 62, .5));
}
@keyframes lb-float {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
  12%  { opacity: var(--op, .55); }
  88%  { opacity: var(--op, .55); }
  100% { opacity: 0;   transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); }
}

/* ==========================================================================
   08. TIRAI GELAP & VIGNETTE — menjaga kontras teks
   ========================================================================== */
.lb-veil {
  background:
    linear-gradient(100deg, rgba(13, 17, 20, 0.72) 0%, rgba(13, 17, 20, 0.40) 30%, rgba(13, 17, 20, 0.08) 56%, transparent 76%),
    linear-gradient(180deg, rgba(13, 17, 20, 0.45) 0%, rgba(13, 17, 20, 0.02) 26%, rgba(13, 17, 20, 0.14) 54%, rgba(13, 17, 20, 0.62) 84%, rgba(13, 17, 20, 0.86) 100%);
}
.lb-vignette {
  background: radial-gradient(120% 100% at 48% 38%, transparent 44%, rgba(6, 9, 11, 0.62) 100%);
}

/* ==========================================================================
   09. TIPOGRAFI HERO
   ========================================================================== */
.lb-body {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw, 1320px);
  margin-inline: auto;
  padding: calc(var(--nav-h, 72px) + 64px) var(--gutter, 40px) clamp(96px, 15vh, 168px);
}

.lb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 13px;
  margin: 0 0 clamp(18px, 3vh, 30px);
  max-width: 100%;
  border-radius: 999px;
  background: rgba(20, 26, 30, 0.42);
  border: 1px solid rgba(248, 250, 252, 0.14);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: clamp(9px, 0.85vw, 10.5px);
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.6;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.8);
}
.lb-eyebrow-short { display: none; }
.lb-eyebrow .dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lb-orange);
  box-shadow: 0 0 0 0 rgba(244, 162, 97, .55);
  animation: lb-pulse 2.6s ease-out infinite;
}
@keyframes lb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 162, 97, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(244, 162, 97, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 162, 97, 0); }
}

.lb-title {
  margin: 0;
  /* Cadangan sengaja ikut condensed: bila Bebas Neue gagal dimuat, judul
     tetap muat satu baris dan tidak merusak komposisi. */
  font-family: 'Bebas Neue', 'Oswald', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  font-size: clamp(3.4rem, 11.5vw, 9.8rem);
  line-height: 0.88;
  letter-spacing: 0.008em;
  text-transform: uppercase;
  color: var(--lb-white);
}
.lb-title .lb-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;   /* ruang untuk descender saat di-clip */
}
.lb-title .lb-line-in {
  display: block;
  text-shadow: 0 10px 46px rgba(8, 11, 13, 0.55);
}
.lb-title .kaki {
  color: var(--lb-orange);
  text-shadow: 0 10px 54px rgba(244, 162, 97, 0.24);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lb-title .kaki {
    color: transparent;
    background: linear-gradient(96deg, #FFD79A 0%, #F4A261 42%, #FFC107 74%, #E08B45 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.lb-sub {
  margin: clamp(14px, 2.4vh, 24px) 0 0;
  font-family: var(--font-sub, 'Oswald', sans-serif);
  font-size: clamp(0.82rem, 1.35vw, 1.05rem);
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.82);
}
.lb-sub span { color: var(--lb-orange); margin-inline: 0.35em; }

.lb-lede {
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  max-width: 50ch;
  font-family: var(--font-body, 'Poppins', sans-serif);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(203, 213, 225, 0.9);
}

/* ==========================================================================
   10. TOMBOL & MICRO-INTERACTION
   ========================================================================== */
.lb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 42px);
}
.lb .lb-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow: hidden;
  transition: transform 380ms var(--ease-out, cubic-bezier(.22,1,.36,1)),
              box-shadow 380ms var(--ease-out, cubic-bezier(.22,1,.36,1)),
              background-color 300ms ease,
              border-color 300ms ease;
}
.lb .lb-cta i { transition: transform 420ms var(--ease-out, cubic-bezier(.22,1,.36,1)); }
.lb .lb-cta:hover { transform: translateY(-2px); }
.lb .lb-cta:hover i { transform: translateX(3px) rotate(-8deg); }
.lb .lb-cta:active { transform: translateY(0); }

/* Tombol utama — emas hangat, kilau lembut saat hover */
.lb .btn--gold.lb-cta {
  background: linear-gradient(120deg, #F9C79A 0%, #F4A261 55%, #E08B45 100%);
  color: #17110A;
  box-shadow: 0 10px 30px -12px rgba(244, 162, 97, 0.5);
}
.lb .btn--gold.lb-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 720ms var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.lb .btn--gold.lb-cta:hover { box-shadow: 0 16px 40px -12px rgba(244, 162, 97, 0.62); }
.lb .btn--gold.lb-cta:hover::after { transform: translateX(120%); }

/* Tombol sekunder — kaca gelap */
.lb .lb-cta--ghost {
  background: rgba(22, 28, 32, 0.55);
  border-color: rgba(248, 250, 252, 0.2);
  color: var(--lb-white);
}
.lb .lb-cta--ghost:hover {
  background: rgba(248, 250, 252, 0.13);
  border-color: rgba(248, 250, 252, 0.34);
}
.lb .lb-cta:focus-visible {
  outline: 2px solid var(--lb-gold);
  outline-offset: 3px;
}

/* ==========================================================================
   11. KARTU ELEVASI + GARIS PENGHUBUNG KE PUNCAK
   Kartu adalah panel kaca melayang; garis tipis menariknya ke puncak asli
   sehingga angka 2.056 mdpl punya rujukan visual, bukan sekadar hiasan.
   ========================================================================== */
.lb-facts {
  position: absolute;
  right: var(--gutter, 40px);
  bottom: clamp(96px, 15vh, 168px);
  z-index: 5;
  display: grid;
  gap: 3px;
  min-width: 212px;
  padding: 16px 20px 15px;
  border-radius: 16px;
  border: 1px solid rgba(248, 250, 252, 0.16);
  background: rgba(17, 20, 23, 0.34);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.09);
  color: var(--lb-white);
  transition: transform 520ms var(--ease-out, cubic-bezier(.22,1,.36,1)),
              border-color 400ms ease;
}
.lb-facts::before {
  content: "";
  position: absolute;
  top: 14px; left: 0;
  width: 2px; height: 22px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--lb-gold), var(--lb-orange));
}
.lb-facts:hover {
  transform: translateY(-3px);
  border-color: rgba(248, 250, 252, 0.28);
}
.lb-facts-lbl {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.62);
}
.lb-facts-val {
  font-family: var(--font-display, 'Bebas Neue', sans-serif);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.lb-facts-val small {
  font-family: var(--font-sub, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lb-orange);
  margin-left: 6px;
  vertical-align: 2px;
}
.lb-facts-sub {
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(248, 250, 252, 0.12);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 10.5px;
  line-height: 1.7;
  color: rgba(203, 213, 225, 0.6);
}

/* Garis penghubung — digambar ulang oleh JS mengikuti posisi puncak nyata */
.lb-tether {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
}
.lb-tether-line {
  stroke: rgba(244, 162, 97, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  animation: lb-dash 3.6s linear infinite;
}
@keyframes lb-dash { to { stroke-dashoffset: -32; } }

.lb-peak-tag {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
}
.lb-peak-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lb-gold);
  box-shadow: 0 0 12px 2px rgba(255, 193, 7, 0.5);
}
.lb-peak-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 193, 7, 0.45);
  border-radius: 50%;
  animation: lb-ring 3s ease-out infinite;
}
@keyframes lb-ring {
  0%   { transform: scale(.7); opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.lb-peak-label {
  display: grid;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(11, 14, 16, 0.42);
  border: 1px solid rgba(248, 250, 252, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.74);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}
.lb-peak-label b {
  font-family: var(--font-sub, 'Oswald', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--lb-orange);
}

/* Keduanya hanya tampil setelah intro selesai, dan pudar begitu digulir */
.lb.is-tethered .lb-tether,
.lb.is-tethered .lb-peak-tag { opacity: 1; }
.lb.is-scrolled .lb-tether,
.lb.is-scrolled .lb-peak-tag { opacity: 0; }

/* ==========================================================================
   12. INDIKATOR GULIR
   ========================================================================== */
.lb-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 6;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.86);
  text-shadow: 0 2px 16px rgba(0,0,0,.9);
  transition: color 320ms ease, gap 420ms var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.lb-cue:hover { color: var(--lb-orange); gap: 13px; }
.lb-cue:focus-visible { outline: 2px solid var(--lb-gold); outline-offset: 6px; border-radius: 6px; }
.lb-cue-rail {
  position: relative;
  width: 1px;
  height: 46px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.28);
}
.lb-cue-rail::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 42%;
  background: linear-gradient(180deg, transparent, var(--lb-orange));
  animation: lb-cue-run 3.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes lb-cue-run {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(240%); }
  100% { transform: translateY(240%); }
}
.lb-cue-arrow {
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: lb-cue-nudge 3.4s ease-in-out infinite;
}
@keyframes lb-cue-nudge {
  0%, 62%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
  76%           { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}

/* ==========================================================================
   13. TRANSISI HERO → DESA
   Kabut yang menebal di kaki layar lalu larut ke warna seksi berikutnya,
   sehingga perpindahan terasa seperti turun gunung ke permukiman.
   ========================================================================== */
.lb-outro {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(130px, 22vh, 260px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(17, 20, 23, 0) 0%,
    rgba(17, 20, 23, 0.28) 34%,
    rgba(20, 26, 29, 0.72) 60%,
    rgba(112, 132, 140, 0.55) 84%,
    rgba(198, 210, 214, 0.85) 94%,
    var(--bg, #FBFCFB) 100%);
}
[data-theme="dark"] .lb-outro {
  background: linear-gradient(180deg,
    rgba(8, 11, 13, 0) 0%,
    rgba(8, 11, 13, 0.4) 42%,
    rgba(8, 11, 13, 0.85) 78%,
    var(--bg, #121415) 100%);
}

/* ==========================================================================
   14. KOREOGRAFI INTRO
   Urutan mengikuti brief: langit 0.3 → gunung jauh 0.5 → Burangrang 0.8 →
   cahaya 1.1 → kabut 1.4 → badge 1.7 → judul 2.0 / 2.3 → deskripsi 2.6 →
   CTA 2.9 → kartu elevasi 3.2.
   Tanpa JavaScript, hero langsung tampil penuh (lihat .no-js di bawah).
   ========================================================================== */
.lb-js .lb[data-intro="pending"] .lb-sky,
.lb-js .lb[data-intro="pending"] .lb-atmos,
.lb-js .lb[data-intro="pending"] .lb-glow,
.lb-js .lb[data-intro="pending"] .lb-shafts,
.lb-js .lb[data-intro="pending"] .lb-clouds,
.lb-js .lb[data-intro="pending"] .lb-haze,
.lb-js .lb[data-intro="pending"] .lb-fog,
.lb-js .lb[data-intro="pending"] .lb-particles { opacity: 0; }

.lb-js .lb[data-intro="pending"] .lb-world { opacity: 0; transform: translate3d(0, 7%, 0); }
.lb-js .lb[data-intro="pending"] .lb-eyebrow,
.lb-js .lb[data-intro="pending"] .lb-sub,
.lb-js .lb[data-intro="pending"] .lb-lede,
.lb-js .lb[data-intro="pending"] .lb-actions,
.lb-js .lb[data-intro="pending"] .lb-facts,
.lb-js .lb[data-intro="pending"] .lb-cue,
.lb-js .lb[data-intro="pending"] .breadcrumb-nav { opacity: 0; transform: translate3d(0, 16px, 0); }
.lb-js .lb[data-intro="pending"] .lb-line-in { transform: translate3d(0, 106%, 0); }

/* Nyalakan panggung */
.lb-js .lb.is-lit .lb-sky,
.lb-js .lb.is-lit .lb-atmos,
.lb-js .lb.is-lit .lb-glow,
.lb-js .lb.is-lit .lb-shafts,
.lb-js .lb.is-lit .lb-clouds,
.lb-js .lb.is-lit .lb-haze,
.lb-js .lb.is-lit .lb-fog,
.lb-js .lb.is-lit .lb-particles,
.lb-js .lb.is-lit .lb-world,
.lb-js .lb.is-lit .lb-eyebrow,
.lb-js .lb.is-lit .lb-sub,
.lb-js .lb.is-lit .lb-lede,
.lb-js .lb.is-lit .lb-actions,
.lb-js .lb.is-lit .lb-facts,
.lb-js .lb.is-lit .lb-cue,
.lb-js .lb.is-lit .breadcrumb-nav,
.lb-js .lb.is-lit .lb-line-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity   var(--lb-t, 1s) var(--ease-soft, cubic-bezier(.4,0,.2,1)) var(--lb-d, 0s),
    transform var(--lb-t, 1s) var(--ease-out, cubic-bezier(.22,1,.36,1)) var(--lb-d, 0s);
}
/* .lb-glow & .lb-fog punya animasi keyframe sendiri; opacity finalnya
   diserahkan kembali ke animasi setelah transisi masuk selesai. */
.lb-js .lb.is-lit .lb-shafts { opacity: .5; }
.lb-js .lb.is-lit .lb-sky        { --lb-d: 0.30s; --lb-t: 1.1s; }
.lb-js .lb.is-lit .lb-atmos      { --lb-d: 0.40s; --lb-t: 1.2s; }
.lb-js .lb.is-lit .lb-range-far  { --lb-d: 0.50s; --lb-t: 1.4s; }
.lb-js .lb.is-lit .lb-range-mid  { --lb-d: 0.62s; --lb-t: 1.4s; }
.lb-js .lb.is-lit .lb-burangrang { --lb-d: 0.80s; --lb-t: 1.6s; }
.lb-js .lb.is-lit .lb-glow       { --lb-d: 1.10s; --lb-t: 1.8s; }
.lb-js .lb.is-lit .lb-shafts     { --lb-d: 1.20s; --lb-t: 1.8s; }
.lb-js .lb.is-lit .lb-clouds     { --lb-d: 1.00s; --lb-t: 1.6s; }
.lb-js .lb.is-lit .lb-haze       { --lb-d: 1.30s; --lb-t: 1.4s; }
.lb-js .lb.is-lit .lb-fog        { --lb-d: 1.40s; --lb-t: 1.8s; }
.lb-js .lb.is-lit .lb-forest--far   { --lb-d: 1.00s; --lb-t: 1.4s; }
.lb-js .lb.is-lit .lb-forest--mid   { --lb-d: 1.12s; --lb-t: 1.4s; }
.lb-js .lb.is-lit .lb-forest--front { --lb-d: 1.24s; --lb-t: 1.4s; }
.lb-js .lb.is-lit .lb-particles  { --lb-d: 1.80s; --lb-t: 2s; }
.lb-js .lb.is-lit .lb-eyebrow    { --lb-d: 1.70s; --lb-t: 0.8s; }
.lb-js .lb.is-lit .lb-line:nth-child(1) .lb-line-in { --lb-d: 2.00s; --lb-t: 1.1s; }
.lb-js .lb.is-lit .lb-line:nth-child(2) .lb-line-in { --lb-d: 2.30s; --lb-t: 1.1s; }
.lb-js .lb.is-lit .lb-sub        { --lb-d: 2.50s; --lb-t: 0.8s; }
.lb-js .lb.is-lit .lb-lede       { --lb-d: 2.60s; --lb-t: 0.9s; }
.lb-js .lb.is-lit .lb-actions    { --lb-d: 2.90s; --lb-t: 0.9s; }
.lb-js .lb.is-lit .lb-facts      { --lb-d: 3.20s; --lb-t: 1s; }
.lb-js .lb.is-lit .lb-cue        { --lb-d: 3.50s; --lb-t: 1s; }

/* JARING PENGAMAN
   Bila js/hero-burangrang.js gagal dimuat, `is-lit` tidak pernah terpasang
   dan hero akan tinggal gelap selamanya. Animasi berikut memaksa seluruh
   isinya tampil setelah 5,5 detik — tanpa mengganggu intro normal, karena
   keadaan akhirnya persis sama. */
@keyframes lb-failsafe { to { opacity: 1; transform: translate3d(0, 0, 0); } }
.lb-js .lb[data-intro="pending"] .lb-sky,
.lb-js .lb[data-intro="pending"] .lb-atmos,
.lb-js .lb[data-intro="pending"] .lb-glow,
.lb-js .lb[data-intro="pending"] .lb-shafts,
.lb-js .lb[data-intro="pending"] .lb-clouds,
.lb-js .lb[data-intro="pending"] .lb-haze,
.lb-js .lb[data-intro="pending"] .lb-fog,
.lb-js .lb[data-intro="pending"] .lb-world,
.lb-js .lb[data-intro="pending"] .lb-eyebrow,
.lb-js .lb[data-intro="pending"] .lb-sub,
.lb-js .lb[data-intro="pending"] .lb-lede,
.lb-js .lb[data-intro="pending"] .lb-actions,
.lb-js .lb[data-intro="pending"] .lb-facts,
.lb-js .lb[data-intro="pending"] .lb-cue,
.lb-js .lb[data-intro="pending"] .breadcrumb-nav,
.lb-js .lb[data-intro="pending"] .lb-line-in {
  animation: lb-failsafe 900ms ease 4.6s forwards;
}


/* ==========================================================================
   14b. VARIAN HALAMAN DALAM — .lb--page
   Lanskap yang sama, dipangkas jadi kop halaman: lebih pendek, judul lebih
   kecil, tanpa kartu elevasi dan indikator gulir, dan introonya dipercepat
   supaya pengunjung yang sedang menjelajah tidak menunggu.
   ========================================================================== */
.lb--page {
  min-height: clamp(420px, 62svh, 620px);
  align-items: flex-end;
}
.lb--page .lb-body {
  padding-block: calc(var(--nav-h, 72px) + 52px) clamp(44px, 8vh, 78px);
}
.lb--page .lb-title {
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  line-height: 0.94;
}
.lb--page .lb-lede {
  max-width: 62ch;
  margin-top: clamp(12px, 2vh, 20px);
}
.lb--page .lb-outro { height: clamp(80px, 12vh, 150px); }
.lb--page .lb-fog--low .lb-drift { opacity: .2; }
.lb--page .lb-particles { display: none; }

/* Remah navigasi di atas lanskap gelap */
.lb--page .breadcrumb-nav {
  margin-top: clamp(16px, 2.6vh, 26px);
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(203, 213, 225, 0.6);
}
.lb--page .breadcrumb-nav a { color: rgba(248, 250, 252, 0.82); text-decoration: none; }
.lb--page .breadcrumb-nav a:hover { color: var(--lb-orange); }
.lb--page .breadcrumb-nav .bi { margin-inline: 6px; opacity: .5; }

/* Intro dipadatkan: 3,5 detik terlalu lama untuk halaman dalam */
.lb-js .lb--page.is-lit .lb-sky        { --lb-d: 0.10s; --lb-t: 0.7s; }
.lb-js .lb--page.is-lit .lb-atmos      { --lb-d: 0.14s; --lb-t: 0.8s; }
.lb-js .lb--page.is-lit .lb-range-far  { --lb-d: 0.18s; --lb-t: 0.9s; }
.lb-js .lb--page.is-lit .lb-range-mid  { --lb-d: 0.24s; --lb-t: 0.9s; }
.lb-js .lb--page.is-lit .lb-burangrang { --lb-d: 0.30s; --lb-t: 1s; }
.lb-js .lb--page.is-lit .lb-glow       { --lb-d: 0.42s; --lb-t: 1.1s; }
.lb-js .lb--page.is-lit .lb-shafts     { --lb-d: 0.46s; --lb-t: 1.1s; }
.lb-js .lb--page.is-lit .lb-clouds     { --lb-d: 0.36s; --lb-t: 1s; }
.lb-js .lb--page.is-lit .lb-haze       { --lb-d: 0.48s; --lb-t: 0.9s; }
.lb-js .lb--page.is-lit .lb-fog        { --lb-d: 0.52s; --lb-t: 1.1s; }
.lb-js .lb--page.is-lit .lb-forest--far   { --lb-d: 0.36s; --lb-t: 0.9s; }
.lb-js .lb--page.is-lit .lb-forest--mid   { --lb-d: 0.42s; --lb-t: 0.9s; }
.lb-js .lb--page.is-lit .lb-forest--front { --lb-d: 0.48s; --lb-t: 0.9s; }
.lb-js .lb--page.is-lit .lb-eyebrow    { --lb-d: 0.60s; --lb-t: 0.6s; }
.lb-js .lb--page.is-lit .lb-line:nth-child(1) .lb-line-in { --lb-d: 0.70s; --lb-t: 0.8s; }
.lb-js .lb--page.is-lit .lb-line:nth-child(2) .lb-line-in { --lb-d: 0.82s; --lb-t: 0.8s; }
.lb-js .lb--page.is-lit .lb-lede       { --lb-d: 0.92s; --lb-t: 0.7s; }
.lb-js .lb--page.is-lit .breadcrumb-nav { --lb-d: 1.04s; --lb-t: 0.7s; }

@media (max-width: 900px) {
  .lb--page { min-height: clamp(360px, 52svh, 520px); display: flex; }
  .lb--page .lb-title { font-size: clamp(2.1rem, 9vw, 3.4rem); }
}

/* ==========================================================================
   15. RESPONSIF
   Tablet  : lapisan & parallax dikurangi.
   Ponsel  : gunung tetap dominan, kartu elevasi turun ke aliran normal,
             interaksi kursor dimatikan sepenuhnya oleh JS.
   ========================================================================== */
@media (max-width: 1200px) {
  .lb { --lb-amp: 16; }
  .lb-shaft--c { display: none; }
}

@media (max-width: 900px) {
  .lb {
    --lb-amp: 0;
    display: block;
  }
  .lb-body { padding-bottom: clamp(28px, 5vh, 44px); }
  .lb-title { font-size: clamp(3rem, 13.5vw, 5.2rem); }
  .lb-lede { max-width: 46ch; }

  /* Kartu elevasi masuk ke aliran normal agar tidak menutupi headline */
  .lb-facts {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 26px var(--gutter, 24px) 0;
    max-width: 320px;
  }
  .lb-tether, .lb-peak-tag { display: none; }
  .lb-cue { position: relative; left: auto; bottom: auto; transform: none; margin: 34px auto 30px; }
  .lb-outro { height: 120px; }
  .lb-shafts { opacity: .34; }
  .lb-fog--high .lb-drift { opacity: .24; }
  .lb-fog--low .lb-drift { opacity: .3; }
  .lb-clouds--far { display: none; }
}

@media (max-width: 560px) {
  .lb-body { padding-inline: var(--gutter, 20px); }
  .lb-title { font-size: clamp(2.7rem, 14vw, 4rem); }
  .lb-sub { letter-spacing: 0.24em; font-size: 0.76rem; }
  .lb-lede { font-size: 0.92rem; line-height: 1.75; }
  .lb-actions { flex-direction: column; align-items: stretch; }
  .lb .lb-cta { justify-content: center; }
  .lb-facts { max-width: none; }
  .lb-eyebrow { font-size: 8.5px; letter-spacing: 0.1em; padding: 6px 13px 6px 10px; }
  .lb-eyebrow-full { display: none; }
  .lb-eyebrow-short { display: inline; }
  .lb-veil {
    background:
      linear-gradient(180deg, rgba(17,20,23,.74) 0%, rgba(17,20,23,.34) 26%, rgba(17,20,23,.62) 66%, rgba(17,20,23,.88) 100%);
  }
}

/* Ponsel lanskap — hero jangan memakan seluruh layar */
@media (max-height: 520px) and (orientation: landscape) {
  .lb { min-height: auto; }
  .lb-body { padding-top: calc(var(--nav-h, 72px) + 22px); padding-bottom: 30px; }
  .lb-title { font-size: clamp(2.2rem, 8vw, 3.4rem); }
  .lb-lede { display: none; }
}

/* ==========================================================================
   16. AKSESIBILITAS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lb *,
  .lb *::before,
  .lb *::after {
    animation: none !important;
    transition: none !important;
  }
  .lb-js .lb[data-intro="pending"] .lb-sky,
  .lb-js .lb[data-intro="pending"] .lb-atmos,
  .lb-js .lb[data-intro="pending"] .lb-glow,
  .lb-js .lb[data-intro="pending"] .lb-shafts,
  .lb-js .lb[data-intro="pending"] .lb-clouds,
  .lb-js .lb[data-intro="pending"] .lb-haze,
  .lb-js .lb[data-intro="pending"] .lb-fog,
  .lb-js .lb[data-intro="pending"] .lb-world,
  .lb-js .lb[data-intro="pending"] .lb-eyebrow,
  .lb-js .lb[data-intro="pending"] .lb-sub,
  .lb-js .lb[data-intro="pending"] .lb-lede,
  .lb-js .lb[data-intro="pending"] .lb-actions,
  .lb-js .lb[data-intro="pending"] .lb-facts,
  .lb-js .lb[data-intro="pending"] .lb-cue,
  .lb-js .lb[data-intro="pending"] .breadcrumb-nav,
  .lb-js .lb[data-intro="pending"] .lb-line-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .lb-particles { display: none; }
}

@media (prefers-contrast: more) {
  .lb-veil {
    background: linear-gradient(105deg, rgba(17,20,23,.94) 0%, rgba(17,20,23,.74) 42%, rgba(17,20,23,.4) 74%, rgba(17,20,23,.3) 100%);
  }
  .lb-lede { color: #F8FAFC; }
  .lb-facts { background: rgba(17, 20, 23, 0.78); }
}

@media print {
  .lb { min-height: auto; background: #fff; }
  .lb-stage, .lb-outro, .lb-cue, .lb-tether, .lb-peak-tag { display: none !important; }
  .lb-title, .lb-sub, .lb-lede, .lb-eyebrow { color: #000 !important; }
  .lb-title .kaki { -webkit-text-fill-color: #000; color: #000 !important; }
}