/* ==========================================================================
   Animasi pembukaan NGGOWO JONEGORO
   Konsep: gunungan (kayon) wayang kulit — pembuka setiap pergelaran wayang —
   tergambar, lalu terbelah dua dan membuka layar seperti gapura candi bentar.
   Warna mengikuti situs: hijau tua #1f4136 + emas #d4a65a + krem #f6f1e1.
   ========================================================================== */
.nj-intro{display:none}
html.nj-intro-on{overflow:hidden}
html.nj-intro-on .nj-intro{display:block}

.nj-intro{
  --nj-gold:#d9b36a; --nj-cream:#f6f1e1; --nj-deep:#0f2c23;
  --nj-gh:min(46vh,400px);
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  color:var(--nj-cream);font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  animation:nj-root-done .01s linear 4.6s forwards;
}
@keyframes nj-root-done{to{visibility:hidden}}
@keyframes nj-fade-out{to{opacity:0}}

/* dua daun layar */
.nj-panel{position:absolute;top:0;bottom:0;width:50.3%;background-color:#14352b;will-change:transform}
.nj-panel-l{left:0;
  background-image:radial-gradient(circle 95vmax at 100% 46%,#235240 0%,#173d31 42%,var(--nj-deep) 100%);
  animation:nj-out-l 1.1s cubic-bezier(.76,0,.24,1) 3.3s forwards}
.nj-panel-r{right:0;
  background-image:radial-gradient(circle 95vmax at 0% 46%,#235240 0%,#173d31 42%,var(--nj-deep) 100%);
  animation:nj-out-r 1.1s cubic-bezier(.76,0,.24,1) 3.3s forwards}
@keyframes nj-out-l{to{transform:translateX(-101%)}}
@keyframes nj-out-r{to{transform:translateX(101%)}}

/* motif kawung, sangat halus, menyatu di kedua daun */
.nj-panel::before{
  content:"";position:absolute;inset:0;opacity:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 100 100' fill='none' stroke='%23d9b36a' stroke-opacity='.12' stroke-width='1'%3E%3Cellipse cx='50' cy='25' rx='14' ry='25'/%3E%3Cellipse cx='50' cy='75' rx='14' ry='25'/%3E%3Cellipse cx='25' cy='50' rx='25' ry='14'/%3E%3Cellipse cx='75' cy='50' rx='25' ry='14'/%3E%3Ccircle cx='50' cy='50' r='2.4' fill='%23d9b36a' fill-opacity='.2' stroke='none'/%3E%3C/svg%3E");
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(circle 70vmax at 50% 46%,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
          mask-image:radial-gradient(circle 70vmax at 50% 46%,#000 0%,rgba(0,0,0,.35) 70%,transparent 100%);
  animation:nj-fade-in 1.4s ease .1s forwards}
.nj-panel-l::before{background-position:0 0}
.nj-panel-r::before{background-position:calc(-49.7vw) 0}
@keyframes nj-fade-in{to{opacity:1}}

/* panggung tengah */
.nj-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.6vh,36px);padding:0 24px}
.nj-gun{position:relative;display:flex;height:var(--nj-gh);isolation:isolate}
.nj-gun::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:230%;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;
  background:radial-gradient(closest-side,rgba(217,179,106,.24),rgba(217,179,106,.07) 55%,transparent 72%);
  animation:nj-glow 2.4s ease 1s forwards,nj-fade-out .6s ease 3.1s forwards}
@keyframes nj-glow{to{opacity:1}}
.nj-half{height:100%;width:auto;aspect-ratio:1/3;display:block;overflow:visible;will-change:transform,opacity}
.nj-half-l{animation:nj-split-l 1.1s cubic-bezier(.76,0,.24,1) 3.3s forwards}
.nj-half-r{animation:nj-split-r 1.1s cubic-bezier(.76,0,.24,1) 3.3s forwards}
@keyframes nj-split-l{65%{opacity:1}to{transform:translateX(-52vw);opacity:0}}
@keyframes nj-split-r{65%{opacity:1}to{transform:translateX(52vw);opacity:0}}

.nj-half path{fill:none;stroke:var(--nj-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nj-half .nj-p-thin{stroke-width:1;opacity:.6}
.nj-half .nj-p{stroke-dasharray:1;stroke-dashoffset:1;animation:nj-draw var(--t,1s) cubic-bezier(.5,0,.2,1) var(--d,0s) forwards}
.nj-half .nj-fill{stroke:none;fill:var(--nj-gold);fill-opacity:0;animation:nj-fill 1.4s ease 1.5s forwards}
@keyframes nj-draw{to{stroke-dashoffset:0}}
@keyframes nj-fill{to{fill-opacity:.07}}

/* teks */
.nj-text{text-align:center;animation:nj-fade-out .45s ease 3.0s forwards}
.nj-text p{margin:0}
.nj-hello{
  font:italic 600 clamp(30px,5.2vw,54px)/1.1 Lora,Georgia,"Times New Roman",serif;letter-spacing:-.01em;
  opacity:0;transform:translateY(10px);filter:blur(6px);animation:nj-rise 1s cubic-bezier(.2,.7,.2,1) 1.7s forwards}
@keyframes nj-rise{to{opacity:1;transform:none;filter:none}}
.nj-orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 12px;opacity:0;animation:nj-fade-in 1s ease 2.1s forwards}
.nj-orn::before,.nj-orn::after{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--nj-gold))}
.nj-orn::after{transform:scaleX(-1)}
.nj-orn i{width:6px;height:6px;background:var(--nj-gold);transform:rotate(45deg)}
.nj-brand{
  font:500 clamp(11px,1.5vw,14px)/1 Poppins,system-ui,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--nj-gold);
  padding-left:.34em;opacity:0;animation:nj-fade-in 1s ease 2.2s forwards}
.nj-aksara{display:none;margin-top:14px;font:400 clamp(18px,2.4vw,24px)/1.5 "Noto Sans Javanese",serif;color:#e9d3a0;opacity:0}
.nj-aksara.is-ready{display:block;animation:nj-fade-in 1s ease 2.5s forwards}

/* tombol lewati */
.nj-skip{
  position:absolute;right:max(20px,3vw);bottom:max(18px,3.4vh);padding:8px 16px;border-radius:999px;
  border:1px solid rgba(246,241,225,.32);background:rgba(15,44,35,.35);color:var(--nj-cream);
  font:500 12px/1 Poppins,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;
  opacity:0;animation:nj-fade-in .6s ease 1s forwards,nj-fade-out .3s ease 3.0s forwards;transition:background .2s,border-color .2s}
.nj-skip:hover{background:rgba(217,179,106,.18);border-color:rgba(217,179,106,.7)}
.nj-skip:focus-visible{outline:2px solid var(--nj-gold);outline-offset:3px}

/* dilewati pengguna */
.nj-intro.is-skipping{animation:nj-fade-out .4s ease forwards,nj-root-done .01s linear .4s forwards}

@media (max-width:600px){
  .nj-intro{--nj-gh:min(40vh,340px)}
  .nj-brand{letter-spacing:.28em;padding-left:.28em}
}
@media (max-height:520px) and (orientation:landscape){
  .nj-intro{--nj-gh:min(52vh,240px)}
  .nj-stage{flex-direction:row;gap:36px}
}

/* gerak dikurangi: tanpa menggambar/membelah, hanya tampil sebentar lalu memudar */
@media (prefers-reduced-motion:reduce){
  .nj-intro{animation:nj-fade-out .6s ease 1.8s forwards,nj-root-done .01s linear 2.4s forwards}
  .nj-intro *,.nj-intro *::before{animation:none!important}
  .nj-panel::before,.nj-gun::before,.nj-orn,.nj-brand,.nj-aksara.is-ready{opacity:1}
  .nj-panel{transform:none}
  .nj-hello{opacity:1;transform:none;filter:none}
  .nj-half .nj-p{stroke-dashoffset:0}
  .nj-half .nj-fill{fill-opacity:.07}
  .nj-skip{opacity:1}
}