/* Gaya khusus Jawa Gebyok Pendopo. Semua gerak sekali lalu berhenti. Keadaan diam (tanpa animasi) = posisi akhir,
   jadi saat "kurangi gerakan" (bersama.css mematikan semua animasi) semua langsung tampil di tempatnya. */
/* Gebyok: sampul berupa pintu gebyok tertutup (SVG), teks di papan tengah */
body[data-gaya="gebyok"] .cover{background:transparent}
body[data-gaya="gebyok"] .cover::before{content:"";position:absolute;inset:56px 24px 34px;background:var(--t-kartu);border:1.5px solid var(--t-accent);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.gebyok-pintu{position:absolute;inset:0;z-index:6;display:none;perspective:900px;pointer-events:none}
body[data-tema="jawa"][data-gaya="gebyok"] .gebyok-pintu{display:flex}
body[data-tema="jawa"][data-gaya="gebyok"] .gebyok-pintu.habis{display:none}
.dg{width:50%;height:100%;position:relative}
.dg svg{display:block;width:100%;height:100%}
.dg.kiri{transform-origin:0 50%}
.dg.kanan{transform-origin:100% 50%}
.gebyok-pintu.buka .dg.kiri{animation:pintuKiri 1.7s cubic-bezier(.5,0,.3,1) .35s both}
.gebyok-pintu.buka .dg.kanan{animation:pintuKanan 1.7s cubic-bezier(.5,0,.3,1) .35s both}
@keyframes pintuKiri{from{transform:none;opacity:1}to{transform:rotateY(84deg);opacity:.5}}
@keyframes pintuKanan{from{transform:none;opacity:1}to{transform:rotateY(-84deg);opacity:.5}}

/* Daun pintu watercolor: dimuat setelah "Buka Undangan", memudar masuk di atas SVG. Tepi pertemuan tetap di tengah. */
.dg-svg{position:absolute;inset:0}
.dg-wc{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .25s ease;user-select:none;-webkit-user-drag:none}
.dg.kiri .dg-wc{object-position:100% 50%}
.dg.kanan .dg-wc{object-position:0 50%}
.dg-wc.siap{opacity:1}

/* ---------- Adegan pendopo watercolor ---------- */
.adegan .wc{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.gb-pendopo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .5s ease}
.gb-pendopo.siap{opacity:1}
/* Lantai tegel berperspektif (gambar seamless diulang), pudar ke arah dalam pendopo */
.gb-lantai{position:absolute;left:-60%;right:-60%;bottom:-8px;height:340px;transform-origin:50% 100%;transform:perspective(500px) rotateX(50deg);
  background-image:var(--gb-tegel,none);background-size:92px 92px;background-position:50% 100%;opacity:0;transition:opacity .6s ease;
  -webkit-mask-image:linear-gradient(to top,#000 35%,transparent 95%);mask-image:linear-gradient(to top,#000 35%,transparent 95%)}
.gb-lantai.siap{opacity:.92}
.gb-vignet{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,var(--gb-vig,.4)) 100%)}
/* Lampu robyong tergantung di tengah atas, pendar hangat menyala sekali */
.gb-robyong{position:absolute;top:-6px;left:50%;width:148px;margin-left:-74px;transform-origin:50% 0}
.gb-robyong .wc,.gb-km .wc{width:100%;height:auto}
.gb-pendar{position:absolute;left:50%;top:-70px;width:360px;height:360px;margin-left:-180px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.85;
  background:radial-gradient(circle at 50% 50%,rgba(255,232,170,.62) 0,rgba(255,206,120,.28) 28%,rgba(255,200,112,0) 62%)}
/* Kembar mayang di kiri dan kanan, berdiri di lantai */
.gb-km{position:absolute;bottom:34px;width:92px;transform-origin:50% 100%}
.gb-km.kiri{left:6px}
.gb-km.kanan{right:6px}
.gb-km.kanan .wc{transform:scaleX(-1)}

.adegan.main .gb-robyong{animation:gbTurun 1.2s cubic-bezier(.3,.7,.3,1) .5s both}
.adegan.main .gb-pendar{animation:gbNyala 2s ease 1.3s both}
.adegan.main .gb-km{animation:gbKm .9s cubic-bezier(.25,.7,.3,1) 1s both}
.adegan.main .gb-km.kanan{animation-delay:1.15s}
@keyframes gbTurun{0%{opacity:0;transform:translateY(-36px) rotate(0deg)}60%{opacity:1;transform:translateY(2px) rotate(1.5deg)}80%{transform:translateY(0) rotate(-.8deg)}100%{opacity:1;transform:none}}
@keyframes gbNyala{0%{opacity:0}35%{opacity:1}55%{opacity:.6}100%{opacity:.85}}
@keyframes gbKm{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Nama di atas papan wash (teks HTML, warna dari token varian) ---------- */
body[data-gaya="gebyok"] .hero{padding-top:214px}
.gb-papan{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;width:min(100%,318px);padding:20px 14px 16px}
.gb-latar{position:absolute;top:-16px;bottom:-16px;left:-26px;right:-26px;z-index:-1;pointer-events:none}
/* Lapisan cadangan: menjamin kontras walau gambar papan belum atau gagal dimuat */
.gb-latar::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,var(--gb-papan-bg,rgba(20,17,15,.84)) 0,var(--gb-papan-bg,rgba(20,17,15,.84)) 66%,rgba(0,0,0,0) 100%)}
.gb-papan-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;opacity:0;transition:opacity .4s ease}
.gb-papan-bg.siap{opacity:1}
/* Kilau emas satu kali: terang di papan gelap, emas tua (multiply) di papan terang */
.gb-papan[data-papan="terang"] .kilau-nama{background:linear-gradient(90deg,rgba(201,150,60,0),rgba(201,150,60,.55),rgba(201,150,60,0));mix-blend-mode:multiply}
.panggung.siap .gb-latar{opacity:0}
body[data-gaya="gebyok"] .panggung.main .gb-latar{animation:gbPapan .8s cubic-bezier(.3,.7,.3,1) both}
body[data-gaya="gebyok"] .panggung.main .hero-lbl{animation:fadeIn .6s ease .35s both}
body[data-gaya="gebyok"] .panggung.main .nama-wrap{animation:gbNaik .9s cubic-bezier(.25,.7,.3,1) .45s both}
body[data-gaya="gebyok"] .panggung.main .kilau-nama{animation:kilauNama 1.3s ease 1.45s both}
@keyframes gbPapan{from{opacity:0;transform:scaleX(.6)}to{opacity:1;transform:none}}
@keyframes gbNaik{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Gebyok: bingkai ukiran pada kartu isi */
body[data-gaya="gebyok"] .inv .ib{border:14px solid transparent;border-radius:4px;background-clip:padding-box;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cdefs%3E%3Cg id='c'%3E%3Cpath d='M8 30C14 30 20 25 20 19C20 13 25 8 31 8M14 24C16 19 21 17 25 19M24 14C19 16 17 21 19 25' fill='none' stroke='%23C9A45C' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='13' cy='13' r='3.4' fill='%23C9A45C'/%3E%3Ccircle cx='13' cy='13' r='1.2' fill='%233E2210'/%3E%3C/g%3E%3C/defs%3E%3Crect x='2' y='2' width='86' height='86' fill='none' stroke='%23C9A45C' stroke-width='1.6'/%3E%3Crect x='6' y='6' width='78' height='78' fill='none' stroke='%23C9A45C' stroke-width='.8'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='rotate(90 45 45)'/%3E%3Cuse href='%23c' transform='rotate(180 45 45)'/%3E%3Cuse href='%23c' transform='rotate(270 45 45)'/%3E%3C/svg%3E") 30 round}
body[data-gaya="gebyok"] .ib-sep:not(.on) svg.only-jawa rect{transform:scaleX(0)}
body[data-gaya="gebyok"] .ib-sep.on svg.only-jawa rect{animation:bentang 1.2s cubic-bezier(.3,.7,.3,1) both}

/* Penutup: daun pintu watercolor menutup */
.gb-tutup{display:flex;box-sizing:border-box;width:132px;height:172px;padding:5px;border:2px solid var(--t-accent);border-radius:3px;background:rgba(0,0,0,.35)}
.gb-tutup .wc{display:block;width:50%;height:100%;max-width:none;object-fit:cover}
.gb-tutup .gt-kiri{object-position:100% 50%}
.gb-tutup .gt-kanan{object-position:0 50%}
.gt-kiri{transform-origin:0 50%}
.gt-kanan{transform-origin:100% 50%}
body[data-gaya="gebyok"] .rv.on .gt-kiri,body[data-gaya="gebyok"] .rv.on .gt-kanan{animation:tutupPintu 1.8s cubic-bezier(.4,0,.3,1) .4s both}
@keyframes tutupPintu{from{transform:scaleX(0)}to{transform:none}}
.ornamen[data-ornamen="gebyok"]{min-height:220px}

@media (prefers-reduced-motion: reduce){
  .panggung.siap .gb-latar{opacity:1}
}