/* Gaya khusus Jawa Kembang Setaman. 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. */
/* Pembatas: janur watercolor menggantikan SVG janur */
body[data-gaya="setaman"] .ib-sep svg.only-jawa,body[data-gaya="setaman"] svg.sep-janur{display:none}
.sep-janur{display:block;transform-origin:center}
.sep-janur-wc{width:200px;height:auto;margin:0 auto}
body[data-gaya="setaman"] .ib-sep:not(.on) .sep-janur{transform:scaleX(0)}
body[data-gaya="setaman"] .ib-sep.on .sep-janur{animation:bentang 1.2s cubic-bezier(.3,.7,.3,1) both}

/* Sampul (tetap SVG garis): kain truntum + bokor */
.cover > .cover-seni{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cover-bokor{width:150px;height:104px;margin-bottom:6px}

/* ---------- Adegan watercolor ---------- */
.adegan .wc{display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.st-kain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.adegan svg.st-truntum{position:absolute;inset:0;opacity:.22}
.st-cahaya{position:absolute;inset:0}
.st-wadah{position:absolute;left:50%;bottom:104px;transform:translateX(-50%)}
.st-penutup .st-wadah{position:relative;left:auto;bottom:auto;transform:none}
.st-bokor{position:absolute;bottom:0;height:auto;z-index:1}
.st-isi{position:absolute;inset:0;z-index:2}
.st-tabur{position:absolute;inset:0;z-index:3}
.st-l{position:absolute;height:auto;transform-origin:50% 100%;transform:var(--tf,rotate(0deg))}
.st-bunga .st-th{position:absolute;left:0;bottom:0;width:100%;height:auto;transform-origin:50% 85%}
.st-bunga .st-kuncup,.st-bunga .st-setengah{opacity:0}
.st-pop,.st-turun,.st-jatuh{transform-origin:50% 50%}

/* Gerak adegan pembuka (.adegan.main) dan penutup (.rv.on) */
.adegan.main .st-kain{animation:fadeIn .6s ease both}
.adegan.main .st-bokor,.rv.on .st-penutup .st-bokor{animation:stBokor .8s cubic-bezier(.3,.7,.3,1) .3s both}
.adegan.main .st-naik,.rv.on .st-penutup .st-naik{animation:stNaik .9s cubic-bezier(.25,.7,.3,1) var(--t,0s) both}
.adegan.main .st-th.st-kuncup,.rv.on .st-penutup .st-th.st-kuncup{animation:stKuncup 2.2s ease-in-out calc(var(--t,0s) + .5s) both}
.adegan.main .st-th.st-setengah,.rv.on .st-penutup .st-th.st-setengah{animation:stSetengah 2.2s ease-in-out calc(var(--t,0s) + .5s) both}
.adegan.main .st-th.st-mekar,.rv.on .st-penutup .st-th.st-mekar{animation:stMekar 2.2s ease-in-out calc(var(--t,0s) + .5s) both}
.adegan.main .st-pop{animation:stPop .6s cubic-bezier(.3,1.4,.5,1) var(--t,0s) both}
.adegan.main .st-turun{animation:stTurun 1s ease var(--t,0s) both}
.rv.on .st-penutup .st-jatuh{animation:stJatuh 1.3s cubic-bezier(.3,.6,.4,1) var(--t,0s) both}
@keyframes stBokor{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes stNaik{0%{opacity:0;transform:var(--tf,rotate(0deg)) translateY(70%)}30%{opacity:1}100%{opacity:1;transform:var(--tf,rotate(0deg))}}
/* Mekar: kuncup -> setengah -> mekar, silang-pudar (tahap baru menimpa tahap lama) sambil membesar halus */
@keyframes stKuncup{0%,52%{opacity:1;transform:scale(1)}64%,100%{opacity:0;transform:scale(1.04)}}
@keyframes stSetengah{0%,28%{opacity:0;transform:scale(.92)}52%{opacity:1;transform:scale(1)}88%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.02)}}
@keyframes stMekar{0%,64%{opacity:0;transform:scale(.94)}88%{opacity:1;transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes stPop{0%{opacity:0;transform:var(--tf) scale(.2)}70%{opacity:1;transform:var(--tf) scale(1.12)}100%{opacity:1;transform:var(--tf) scale(1)}}
@keyframes stTurun{from{opacity:0;transform:var(--tf) translateY(-34px) rotate(-40deg)}to{opacity:1;transform:var(--tf) translateY(0) rotate(0deg)}}
@keyframes stJatuh{0%{opacity:0;transform:var(--tf) translateY(-90px) rotate(-60deg)}20%{opacity:1}100%{opacity:1;transform:var(--tf) translateY(0) rotate(0deg)}}

/* Kelopak watercolor tersebar dari bokor (lapisan #kelopak, sekali) */
.kelopak.sebar{left:50%;animation-name:sebar}
.kelopak.sebar img{display:block;height:auto}
@keyframes sebar{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0deg)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}

/* Hiasan susulan: rangkaian sudut di dua sudut bawah, ronce melati menjuntai di kiri-kanan nama */
.st-susulan{position:absolute;inset:0;pointer-events:none}
.st-sudut{position:absolute;bottom:0;width:130px}
.st-sudut img{width:100%;height:auto}
.st-sudut.kiri{left:0;transform-origin:0 100%}
.st-sudut.kiri img{transform:scaleY(-1)}
.st-sudut.kanan{right:0;transform-origin:100% 100%}
.st-sudut.kanan img{transform:scale(-1,-1)}
.st-ronce{position:absolute;top:-6px;height:250px;transform:translateX(-50%)}
.st-ronce img{height:100%;width:auto}
.st-ronce.kiri{left:38px}
.st-ronce.kanan{left:calc(100% - 38px)}
.st-susulan.gerak .st-sudut{animation:stSudut 1s ease both}
.st-susulan.gerak .st-ronce{animation:stRonce 1.4s cubic-bezier(.25,.7,.3,1) both}
.st-susulan.gerak .st-ronce.kanan{animation-delay:.15s}
@keyframes stSudut{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes stRonce{from{opacity:0;transform:translate(-50%,-100%)}25%{opacity:1}to{opacity:1;transform:translateX(-50%)}}

/* Gantal watercolor bertemu di atas "&" */
body[data-gaya="setaman"] .gantal-wrap{height:40px;margin-top:4px}
body[data-gaya="setaman"] .gantal{top:0;width:46px;height:auto}
body[data-gaya="setaman"] .gantal:not([src]){visibility:hidden}
body[data-gaya="setaman"] .gantal.kiri{margin-left:-45px}
body[data-gaya="setaman"] .gantal.kanan{margin-left:-1px}
body[data-gaya="setaman"] .panggung.main .gantal.kiri{animation:gantalKiri 1.6s cubic-bezier(.25,.7,.3,1) 2.6s both}
body[data-gaya="setaman"] .panggung.main .gantal.kanan{animation:gantalKanan 1.6s cubic-bezier(.25,.7,.3,1) 2.6s both}

/* Kantil watercolor di blok mempelai (menggantikan kantil SVG) */
.st-kt{position:relative;width:84px;height:64px}
.st-kt-i{position:absolute;bottom:0;width:34px;height:auto;transform-origin:50% 100%;transform:var(--tf)}
.st-kt-i.kiri{left:10px}
.st-kt-i.kanan{right:10px}
body[data-gaya="setaman"] .rv.on .st-kt-i{animation:stKt 1.1s ease .4s both}
body[data-gaya="setaman"] .rv.on .st-kt-i.kanan{animation-delay:.55s}
@keyframes stKt{from{opacity:0;transform:var(--tf) rotate(24deg) translateY(10px)}to{opacity:1;transform:var(--tf) rotate(0deg) translateY(0)}}

/* Penutup */
.ornamen[data-ornamen="bokor"]{min-height:236px}
.st-penutup{margin-bottom:4px}