/* Beranda "Rimba": lukisan yang hidup. Lihat js/scene.js */
.rimba-wrap{margin:0 auto 18px;max-width:600px}
.rimba{position:relative;width:100%;aspect-ratio:1200/1614;border-radius:20px 20px 20px 8px;overflow:hidden;
  background:#9cc9c0;box-shadow:0 2px 4px rgba(20,40,30,.12),0 18px 40px rgba(20,60,50,.22);isolation:isolate;
  -webkit-tap-highlight-color:transparent;user-select:none}
.rimba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html[data-theme=dark] .rimba-img,html[data-theme=dark] .patch{filter:brightness(.62) saturate(.9) hue-rotate(-8deg)}
html[data-theme=dark] .rimba::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(60% 40% at 47% 44%,rgba(255,232,170,.20),transparent 70%),linear-gradient(rgba(10,25,45,.28),rgba(8,20,24,.38))}

/* tambalan bernapas: potongan lukisan yang sama, tepinya dibaurkan */
.rimba-patches{position:absolute;inset:0;z-index:1;pointer-events:none}
.patch{position:absolute;background-repeat:no-repeat;will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);
  animation-duration:5.4s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate}
.a-napas{animation-name:r-napas}
.a-angguk{animation-name:r-angguk;animation-duration:4.2s}
.a-toleh{animation-name:r-toleh;animation-duration:6.4s}
.a-kepak{animation-name:r-kepak;animation-duration:2.6s}
.a-geser{animation-name:r-geser;animation-duration:9s}
.a-lompat{animation-name:r-lompat;animation-duration:7s;animation-direction:normal}
@keyframes r-napas{from{transform:scale(1)}to{transform:scale(1.028,1.04)}}
@keyframes r-angguk{from{transform:rotate(-1.1deg)}to{transform:rotate(1.4deg) scale(1.012)}}
@keyframes r-toleh{0%,35%{transform:rotate(0)}50%,80%{transform:rotate(2.6deg) scale(1.02)}100%{transform:rotate(-1.6deg)}}
@keyframes r-kepak{from{transform:scaleY(.985) rotate(-.7deg)}to{transform:scaleY(1.045) rotate(.9deg)}}
@keyframes r-geser{from{transform:translateX(-1.5%)}to{transform:translateX(2.5%)}}
@keyframes r-lompat{0%,86%,100%{transform:translateY(0) scale(1)}90%{transform:translateY(-22%) scale(1.06)}94%{transform:translateY(0) scale(1.02,.96)}}
.patch.aksi{animation:r-aksi .85s cubic-bezier(.3,1.6,.5,1) 1 !important}
@keyframes r-aksi{0%{transform:scale(1)}30%{transform:scale(1.09) rotate(-3deg)}60%{transform:scale(1.05) rotate(3deg)}100%{transform:scale(1)}}
.rimba.tidur .patch,.rimba.tidur .b-sayap{animation-play-state:paused}

.rimba-fx{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* burung kecil */
.rimba-burung{position:absolute;left:0;top:0;z-index:4;display:none;width:clamp(34px,9%,56px);filter:drop-shadow(0 3px 3px rgba(20,40,30,.25))}
.rimba-burung svg{width:100%;height:auto;display:block;overflow:visible}
.b-sayap{transform-origin:28px 20px;animation:b-kepak .34s ease-in-out infinite alternate}
.b-sayap.b2{animation-delay:-.08s}
@keyframes b-kepak{from{transform:scaleY(1) rotate(0)}to{transform:scaleY(-.55) rotate(6deg)}}
.b-ekor{transform-origin:16px 23px;animation:b-ekor .7s ease-in-out infinite alternate}
@keyframes b-ekor{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}

/* titik sentuh */
.rimba-spots{position:absolute;inset:0;z-index:5}
.spot{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);min-width:44px;border:0;padding:0;margin:0;background:none;border-radius:50%;cursor:pointer;color:inherit}
.spot i{position:absolute;inset:12%;border-radius:50%;border:2px solid rgba(255,255,255,0);transition:border-color .25s,background .25s,box-shadow .25s}
.spot:hover i,.spot:focus-visible i{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(34,117,110,.35)}
.spot:focus-visible{outline:none}
.rimba.petunjuk .spot i{border-color:rgba(255,255,255,.95);animation:s-denyut 1.3s ease-in-out infinite}
@keyframes s-denyut{0%,100%{transform:scale(.86);background:rgba(255,255,255,.05)}50%{transform:scale(1.04);background:rgba(255,255,255,.22)}}
.spot-badge{position:absolute;right:8%;top:8%;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#C9563A;color:#fff;
  font:700 12.5px/22px var(--sans,system-ui);text-align:center;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.3);animation:s-lonjak 1.8s ease-in-out infinite}
@keyframes s-lonjak{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* gelembung ucapan: tulisan tangan di kertas catatan lapangan */
.rimba-bubble{position:absolute;z-index:7;box-sizing:border-box;padding:12px 30px 12px 14px;border-radius:16px 16px 16px 5px;
  background:#FFFDF4;color:#1E2A22;border:1.5px solid #3c4a3f;box-shadow:3px 4px 0 rgba(30,42,34,.22),0 10px 24px rgba(20,40,30,.25);
  font:500 19px/1.28 'Caveat','Segoe Print',cursive;--ekor:40px}
.rimba-bubble[hidden]{display:none}
.rimba-bubble::after{content:"";position:absolute;left:var(--ekor);bottom:-9px;width:15px;height:15px;margin-left:-8px;background:#FFFDF4;
  border-right:1.5px solid #3c4a3f;border-bottom:1.5px solid #3c4a3f;transform:rotate(45deg)}
.rimba-bubble.bawah::after{bottom:auto;top:-9px;transform:rotate(225deg)}
.rimba-bubble.muncul{animation:bb-in .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes bb-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
.rimba-bubble b{font-weight:700;color:#17524E}
.rimba-bubble a{color:#17524E;text-decoration:underline;text-underline-offset:2px;font-weight:700}
.rimba-bubble em{font-style:normal;font-family:var(--sans,system-ui);font-size:11.5px;font-weight:700;color:#7a4a12;background:#F3E3BE;border-radius:9px;padding:1px 7px;white-space:nowrap}
.rimba-bubble small{font-family:var(--sans,system-ui);font-size:12px;color:#55604f}
.bb-list{margin:6px 0 4px;padding-left:18px}
.bb-list li{margin:3px 0}
.bb-more{display:inline-block;margin-top:2px}
.bb-joke{display:inline-block;margin-top:4px}
.bb-btn{margin-top:8px;min-height:36px;padding:4px 14px;border-radius:18px;border:1.5px solid #17524E;background:#DDF0EA;color:#17524E;font:700 13px var(--sans,system-ui);cursor:pointer}
.bb-x{position:absolute;right:2px;top:0;width:34px;height:34px;border:0;background:none;font:400 22px/1 var(--sans,system-ui);color:#55604f;cursor:pointer}

/* bilah bawah */
.rimba-bar{position:absolute;left:10px;bottom:10px;z-index:6;display:flex;gap:8px;flex-wrap:wrap}
.rimba-chip{min-height:36px;padding:5px 12px;border-radius:18px;border:0;background:rgba(20,36,30,.62);color:#fff;font:600 12.5px var(--sans,system-ui);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
.rimba-chip[aria-pressed=true]{background:#17524E}
.rimba-credit{position:absolute;right:10px;bottom:8px;z-index:6;font:500 15px 'Caveat',cursive;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:.9;pointer-events:none}
@media (max-width:420px){.rimba-chip span{display:none}.rimba-bubble{font-size:18px}}
@media (min-width:1100px){.rimba-wrap{max-width:560px}}
@media (prefers-reduced-motion:reduce){.patch,.b-sayap,.b-ekor,.spot-badge,.rimba.petunjuk .spot i{animation:none !important}}
@media (min-width:1100px){
  .rimba-wrap{float:left;width:44%;max-width:500px;margin:0 0 18px 0;padding-right:32px;box-sizing:content-box}
  #app::after{content:"";display:block;clear:both}
}