/* Pagelaran (Luxury): panggung adat 2.5D yang bernapas.
   Prinsip gerak: satu angin yang merambat dari kiri ke kanan (bukan metronom), paralaks berlapis,
   tirai beludru yang terkumpul ke pinggir, dan sepasang boneka pengantin bergaya motion graphic.
   Kinerja: semua gerak hanya translate/rotate/scale/opacity pada lapisan GPU sendiri. */
.tpl-pagelaran{
  --bg:var(--t-paper);--bg2:var(--t-mist);--ink:var(--t-ink);--muted:color-mix(in srgb,var(--t-ink) 60%,var(--t-paper));
  --accent:var(--t-tone);--on-accent:var(--t-paper);--hair:var(--t-metal);--backdrop:color-mix(in srgb,var(--t-ink) 90%,#000);
  --velvet:color-mix(in srgb,var(--t-tone) 70%,var(--t-ink));
  --gold:color-mix(in srgb,var(--t-metal) 82%,#f3dc98);
  --gold-d:color-mix(in srgb,var(--t-metal) 70%,var(--t-ink));
  --leaf:var(--t-grass,color-mix(in srgb,#71866a 72%,var(--t-tone))); /* --t-grass: warna rumput pilihan admin (opsional) */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* masuk: cepat lalu melambat */
  --ease-sine:cubic-bezier(.37,0,.63,1);    /* napas dan ayunan */
  --ease-cloth:cubic-bezier(.65,0,.25,1);   /* kain ditarik */
}

/* ================= warna ilustrasi ================= */
.pg-defs{position:absolute;width:0;height:0;overflow:hidden}
.pg-ghostcrest,.pg-crest{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pg-ghostcrest{color:var(--t-metal);opacity:.3}
.pg-ghostcrest .fill,.pg-crest .fill{fill:currentColor;stroke:none}
.pg-crest{color:var(--gold);stroke-width:2.8}
.pg-crest>path:first-child{fill:color-mix(in srgb,var(--gold) 22%,transparent)}
.pg-pillar{fill:color-mix(in srgb,var(--t-tone) 22%,var(--t-paper));opacity:.7}
.pg-rays path{fill:#fff;opacity:.17}
.pg-floor{fill:color-mix(in srgb,var(--t-tone) 20%,var(--t-paper))}
.pg-floor-l{fill:none;stroke:var(--t-metal);stroke-width:.9;opacity:.8}
.pg-step{fill:color-mix(in srgb,var(--t-tone) 34%,var(--t-paper))}
.pg-ground{fill:color-mix(in srgb,var(--t-tone) 12%,var(--t-paper))}
.pg-leaf{fill:var(--leaf)}
.pg-leaf2{fill:color-mix(in srgb,var(--leaf) 78%,var(--t-ink))}
.pg-leaf3{fill:color-mix(in srgb,var(--leaf) 60%,var(--t-ink))}
.pg-leafb{fill:color-mix(in srgb,var(--leaf) 88%,#2f4a33)}
.pg-haze .pg-leaf,.pg-haze .pg-leaf2,.pg-haze .pg-leaf3{fill:color-mix(in srgb,var(--leaf) 55%,var(--t-mist))} /* jauh = lebih berkabut */
.pg-vein{fill:none;stroke:rgba(255,255,255,.28);stroke-width:.7}
.pg-stalk{fill:none;stroke:color-mix(in srgb,var(--leaf) 80%,var(--t-ink));stroke-width:1.4;stroke-linecap:round}
.pg-petal-t{fill:color-mix(in srgb,var(--t-tone) 78%,#fff)}
.pg-petal-d{fill:color-mix(in srgb,var(--t-tone) 80%,var(--t-ink))}
.pg-petal-w{fill:#fbf7ef}
.pg-petal-c{fill:color-mix(in srgb,var(--t-metal) 60%,#fff)}
.pg-petal-y{fill:color-mix(in srgb,var(--t-metal) 55%,#f4d67c)}
.pg-petal-p{fill:color-mix(in srgb,var(--t-tone) 32%,var(--t-paper))}
.pg-crease{fill:none;stroke:color-mix(in srgb,var(--t-tone) 45%,transparent);stroke-width:.8}
.pg-stamen{fill:none;stroke:var(--gold);stroke-width:1.2}
.pg-gold{fill:var(--gold)}
.pg-goldl{fill:none;stroke:var(--gold);stroke-width:1}
.pg-goldw{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round}
.pg-tatah-l{fill:none;stroke:var(--gold);stroke-width:.45;opacity:.55}
.pg-dark{fill:color-mix(in srgb,var(--t-tone) 58%,var(--t-ink))}
.pg-outline{fill:none;stroke:var(--gold);stroke-width:1.2}
.pg-rod{fill:none;stroke:var(--gold-d);stroke-width:1.8;stroke-linecap:round}
.pg-tone{fill:var(--t-tone)}
.pg-paper{fill:#fbf7ef}
.pg-veil{fill:rgba(255,255,255,.72)}
.pg-v1{stop-color:var(--velvet)}
.pg-v2{stop-color:color-mix(in srgb,var(--velvet) 72%,#fff)}
.pg-v3{stop-color:color-mix(in srgb,var(--velvet) 78%,#000)}
.pg-trim{fill:none;stroke:var(--gold);stroke-width:3}
.pg-fold{fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;stroke-linecap:round}
.pg-fold-d{fill:none;stroke:rgba(0,0,0,.22);stroke-width:3}
.pg-cord{fill:none;stroke:var(--gold);stroke-width:1.6}
.pg-tassel{fill:var(--gold)}
.pg-lamp1{stop-color:color-mix(in srgb,var(--gold) 70%,#fff4d8);stop-opacity:.75}
.pg-lamp0{stop-color:var(--gold);stop-opacity:0}
/* rumah adat dan properti (kelas yang sama dengan Tales) */
.pg-stage .h-roof{fill:color-mix(in srgb,var(--t-ink) 80%,var(--t-tone))}
.pg-stage .h-roof2{fill:color-mix(in srgb,var(--t-tone) 82%,var(--t-ink))}
.pg-stage .h-wall{fill:color-mix(in srgb,var(--t-paper) 72%,var(--t-metal))}
.pg-stage .h-dark{fill:var(--t-ink)}
.pg-stage .h-line{fill:none;stroke:var(--gold);stroke-width:1.6}
.pg-stage .h-tone{stroke:var(--t-tone);stroke-width:2.2}
.pg-stage .h-tone-fill{fill:var(--t-tone)}
.pg-stage .s-trunk{fill:color-mix(in srgb,var(--t-ink) 72%,var(--t-tone))}
.pg-stage .s-leaf{fill:var(--leaf)}

/* ================= ruang 2.5D =================
   Kinerja ponsel: tidak ada preserve-3d, tidak ada variabel CSS yang berubah per frame,
   tidak ada animasi layout (width/flex/clip-path) maupun filter yang bergerak.
   Tiap bidang = satu lapisan GPU; gerak hanya translate/rotate/scale/opacity. */
.pg-stage{position:absolute;inset:0;overflow:hidden;container-type:size;contain:strict;
  background:radial-gradient(ellipse 80% 55% at 50% 60%,var(--t-paper),var(--t-mist) 75%)}
.pg-plane,.pg-depth{position:absolute;inset:0}
.pg-depth{transform-origin:50% 64%;
  animation:drift 14s var(--ease-sine) calc(var(--k) * -1.3s) infinite alternate}
/* kamera mengapung: bidang dekat bergeser lebih jauh dari bidang jauh (paralaks) */
@keyframes drift{from{translate:calc(var(--k) * -5px) calc(var(--k) * 1.5px)}to{translate:calc(var(--k) * 5px) calc(var(--k) * -1.5px)}}
.pg-world{position:absolute;left:50%;bottom:0;width:100%;width:max(100cqw,52.632cqh);aspect-ratio:400/760;translate:-50% 0}
.pg-full{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-actor{position:absolute;display:block}
.pg-actor>svg,.pp-p>svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.pg-fade{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 30% at 50% 74%,color-mix(in srgb,var(--t-paper) 86%,transparent),transparent 72%),radial-gradient(ellipse 70% 26% at 50% 24%,color-mix(in srgb,var(--t-paper) 76%,transparent),transparent 72%)}
.pg-flare{position:absolute;left:50%;top:60%;width:80vmax;height:80vmax;margin:-40vmax 0 0 -40vmax;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 50%,#fff) 0,color-mix(in srgb,var(--t-paper) 80%,transparent) 22%,transparent 60%)}

/* ================= tirai beludru berlipat =================
   Kain digambar sekali (lipatan, brokat, bordir, rumbai, bayangan) lalu tidak pernah dilukis ulang. */
.pg-curtain{position:absolute;top:0;bottom:-2%;width:24%;will-change:transform}
.pg-curtain-l{left:-1%;transform-origin:0 0;--dir:-1}
.pg-curtain-r{right:-1%;transform-origin:100% 0;--dir:1}
.pg-cside{position:absolute;inset:0}
.pg-curtain-r .pg-cside{transform:scaleX(-1)}
.pg-cloth{position:absolute;inset:0;transform-origin:0 0;
  filter:drop-shadow(1.5px 0 0 var(--gold)) drop-shadow(8px 6px 12px rgba(0,0,0,.28));
  animation:billow 7.5s var(--ease-sine) infinite alternate}
.pg-curtain-r .pg-cloth{animation-delay:-3.1s}
/* kain bernapas: ayunan sangat kecil dari batang tirai */
@keyframes billow{from{rotate:-.35deg;scale:1 1}to{rotate:.3deg;scale:1.012 1}}
.pg-drape{position:absolute;inset:0;display:flex;
  clip-path:polygon(0 0,100% 0,96% 10%,84% 20%,66% 29%,46% 37%,33% 43.5%,37% 50%,45% 62%,52% 78%,58% 100%,0 100%)}
.pg-drape i{flex:1 1 0;min-width:0;margin-right:-1px;height:100%;
  background:
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.1) 20%,rgba(255,255,255,.18) 44%,rgba(255,255,255,.04) 58%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.48)),
    var(--kain-b) 0 calc(var(--i) * 9px)/30px auto,
    var(--velvet)}
/* lebar lipatan tidak seragam (dibekukan, bukan dianimasikan) */
.pg-drape i:nth-child(3n){flex-grow:1.25}.pg-drape i:nth-child(4n+1){flex-grow:.8}.pg-drape i:nth-child(5n+2){flex-grow:1.1}
.pg-drape::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(104deg,transparent 30%,rgba(255,255,255,.13) 44%,transparent 58%),
             linear-gradient(transparent 62%,rgba(0,0,0,.28))}
.pg-hem{position:absolute;left:0;right:0;bottom:0;height:13%;z-index:2;pointer-events:none;
  background:linear-gradient(var(--gold),var(--gold)) 0 0/100% 2px no-repeat,
             var(--kain-b) 0 6px/26px auto repeat-x,
             linear-gradient(var(--gold),var(--gold)) 0 46px/100% 1.5px no-repeat,
             repeating-linear-gradient(90deg,var(--gold) 0 1.5px,transparent 1.5px 5px) 0 52px/100% 100% no-repeat}
.pg-tie{position:absolute;top:42.2%;left:-6%;width:44%;height:12px;z-index:3;rotate:-9deg;border-radius:8px;
  background:repeating-linear-gradient(60deg,var(--gold) 0 4px,var(--gold-d) 4px 6px);box-shadow:0 3px 6px rgba(0,0,0,.25)}
.pg-tie b{position:absolute;right:6%;top:7px;width:9px;height:38px;transform-origin:50% 0;will-change:transform;
  background:linear-gradient(var(--gold) 0 30%,transparent 30% 34%,var(--gold) 34%),repeating-linear-gradient(90deg,var(--gold) 0 1px,var(--gold-d) 1px 2px);
  border-radius:4px 4px 2px 2px;animation:tassel 3.4s var(--ease-sine) infinite alternate}
@keyframes tassel{from{rotate:-9deg}to{rotate:7deg}}
/* pelmet atas */
.pg-pelmet{position:absolute;left:0;right:0;top:0;height:0;z-index:4;will-change:transform}
.pg-pelmet-band{position:absolute;left:-2%;right:-2%;top:0;height:clamp(22px,4.2vh,34px);
  background:linear-gradient(transparent calc(100% - 3px),var(--gold) calc(100% - 3px)),var(--kain-b) 0 50%/28px auto repeat-x,var(--velvet);
  box-shadow:0 4px 10px rgba(0,0,0,.25)}
.pg-swags{position:absolute;left:0;top:clamp(14px,2.6vh,22px);width:100%;height:auto;overflow:visible}

/* ================= angin dan cahaya ================= */
/* satu hembusan tak beraturan; tiap elemen menerimanya dengan jeda menurut posisinya */
@keyframes wind{
  0%{rotate:calc(var(--amp,2) * -.3deg)}14%{rotate:calc(var(--amp,2) * .9deg)}24%{rotate:calc(var(--amp,2) * .35deg)}
  41%{rotate:calc(var(--amp,2) * 1deg)}55%{rotate:calc(var(--amp,2) * -.45deg)}72%{rotate:calc(var(--amp,2) * .6deg)}
  86%{rotate:calc(var(--amp,2) * -.15deg)}100%{rotate:calc(var(--amp,2) * -.3deg)}}
.pg-wind{animation:wind 9s var(--ease-sine) var(--ph,0s) infinite}
.pg-stage .sway,.pg-stage .wave,.pg-stage .ondel{animation:none} /* gerak di dalam SVG memicu paint; properti bergoyang sebagai satu lapisan */
.pg-rays{animation:rays 13s var(--ease-sine) infinite alternate}
@keyframes rays{from{rotate:-3deg;opacity:.55}to{rotate:3deg;opacity:1}}
.pg-lamp{animation:lamp 4.3s linear infinite}
@keyframes lamp{0%,100%{opacity:.75}18%{opacity:.95}22%{opacity:.7}47%{opacity:1}52%{opacity:.82}80%{opacity:.92}}
.pg-glow{opacity:.35;animation:glow 4.5s var(--ease-sine) infinite alternate}
@keyframes glow{to{opacity:.85;scale:1.08}}
.pg-dust{position:absolute;inset:0;pointer-events:none}
.pg-dust i{position:absolute;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold);opacity:0;
  animation:dust var(--dur) var(--ease-sine) var(--del) infinite}
@keyframes dust{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}60%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),-90px)}}
/* kelopak: jatuh (luar), melayang dan berputar 3D (dalam) */
.pg-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.pg-petals i{position:absolute;top:-5%;animation:petal-fall var(--dur) linear var(--del) infinite}
.pg-petals b{display:block;width:var(--sz);height:calc(var(--sz) * .68);border-radius:80% 0 80% 0;
  animation:petal-drift var(--fl) var(--ease-sine) infinite alternate,petal-tumble calc(var(--fl) * 1.3) linear infinite}
.pg-petals .p1{background:linear-gradient(135deg,color-mix(in srgb,var(--t-tone) 45%,#fff),color-mix(in srgb,var(--t-tone) 70%,#fff))}
.pg-petals .p2{background:linear-gradient(135deg,#fff7e0,var(--gold))}
@keyframes petal-fall{from{transform:translateY(0)}to{transform:translateY(112vh)}}
@keyframes petal-drift{from{translate:calc(var(--dx) * -1) 0}to{translate:var(--dx) 0}}
@keyframes petal-tumble{to{rotate:1 .55 .25 360deg}}

/* ================= boneka pengantin (motion graphic) =================
   Satu siklus 12 detik dimainkan bersama, mempelai wanita menyahut 0,45 detik kemudian:
   diam bernapas -> saling menoleh dan mengulurkan tangan -> menunduk memberi salam kepada tamu.
   Hiasan kepala memakai pegas: tertinggal saat kepala bergerak lalu memantul dan reda. */
.pp{position:absolute;--pd:0s;
  --skin:color-mix(in srgb,#e2b793 90%,var(--t-tone));--skd:color-mix(in srgb,#c48f6b 86%,var(--t-tone));
  --hair:color-mix(in srgb,var(--t-ink) 86%,var(--t-tone));--pp-ink:color-mix(in srgb,var(--t-ink) 84%,var(--t-tone));
  --c1:var(--velvet);--c1d:color-mix(in srgb,var(--velvet) 72%,#000);
  --c2:color-mix(in srgb,var(--t-tone) 58%,var(--t-paper));--c3:color-mix(in srgb,var(--t-paper) 88%,var(--t-metal));--c3d:color-mix(in srgb,var(--t-paper) 66%,var(--t-metal))}
.pp-bride{--pd:.45s;scale:-1 1}
.pp-sway,.pp-up{position:absolute;inset:0}
.pp-p,.pp-head{position:absolute;display:block;overflow:visible}
.pp-sway,.pp-up,.pp-head,.pp-armf,.pp-armb,.pp-eyes,.pp-jig{will-change:transform}
.pp{--e:cubic-bezier(.45,.05,.4,1)}
.pp-sway{transform-origin:54% 96%;animation:pp-sway 12s var(--e) var(--pd) infinite}
.pp-up{animation:pp-breath 4.2s var(--ease-sine) var(--pd) infinite alternate}
.pp-head{animation:pp-head 12s var(--e) var(--pd) infinite}
.pp-armf{animation:pp-armf 12s var(--e) var(--pd) infinite}
.pp-armb{animation:pp-armb 12s var(--e) var(--pd) infinite}
.pp-eyes{animation:pp-blink 5.3s linear calc(var(--pd) * 3) infinite}
.pp-jig{animation:pp-jig 12s var(--e) calc(var(--pd) + var(--d,0s)) infinite}
@keyframes pp-sway{0%,100%{rotate:-.5deg}22%{rotate:.5deg}44%{rotate:.9deg}56%{rotate:0deg}64%,74%{rotate:2deg}82%{rotate:-.2deg}}
@keyframes pp-breath{from{translate:0 0}to{translate:0 -1.6px}}
@keyframes pp-head{0%,100%{rotate:0deg}10%{rotate:-2deg}20%{rotate:0deg}32%{rotate:0deg}38%,50%{rotate:6deg}56%{rotate:0deg}64%,73%{rotate:10deg}80%{rotate:-1deg}86%{rotate:0deg}}
@keyframes pp-armf{0%,30%,100%{rotate:0deg}14%{rotate:-4deg}40%{rotate:-27deg}45%{rotate:-22deg}51%{rotate:-27deg}58%{rotate:0deg}66%,73%{rotate:-8deg}80%{rotate:2deg}86%{rotate:0deg}}
@keyframes pp-armb{0%,32%,100%{rotate:0deg}18%{rotate:3deg}42%{rotate:-5deg}56%{rotate:0deg}66%,73%{rotate:-10deg}82%{rotate:0deg}}
@keyframes pp-blink{0%,93%,100%{scale:1 1}95.5%{scale:1 .08}97%{scale:1 1}}
@keyframes pp-jig{
  0%,100%{rotate:calc(var(--a) * -.3)}8%{rotate:calc(var(--a) * .45)}16%{rotate:calc(var(--a) * -.25)}24%{rotate:calc(var(--a) * .2)}32%{rotate:0deg}
  38%{rotate:calc(var(--a) * -1.4)}42%{rotate:calc(var(--a) * .9)}46%{rotate:calc(var(--a) * -.45)}50%{rotate:calc(var(--a) * .15)}
  56%{rotate:calc(var(--a) * 1.1)}60%{rotate:calc(var(--a) * -.6)}63%{rotate:calc(var(--a) * .2)}
  66%{rotate:calc(var(--a) * -1.6)}69.5%{rotate:calc(var(--a) * 1)}73%{rotate:calc(var(--a) * -.45)}
  80%{rotate:calc(var(--a) * 1.3)}84%{rotate:calc(var(--a) * -.7)}88%{rotate:calc(var(--a) * .3)}93%{rotate:calc(var(--a) * -.15)}}
/* warna boneka */
.pp-skin{fill:var(--skin)}.pp-skd{fill:var(--skd)}.pp-hair{fill:var(--hair)}.pp-ink{fill:var(--pp-ink)}
.pp-c1{fill:var(--c1)}.pp-c1d{fill:var(--c1d)}.pp-c2{fill:var(--c2)}.pp-c3{fill:var(--c3)}.pp-c3d{fill:var(--c3d)}
.pp-wiron{fill:color-mix(in srgb,var(--c2) 62%,var(--t-paper))}
.pp-tone{fill:var(--t-tone)}.pp-tone2{fill:color-mix(in srgb,var(--t-tone) 50%,#fff)}.pp-gold{fill:var(--gold)}.pp-white{fill:#fbf8f1}
.pp-shoe{fill:color-mix(in srgb,var(--t-ink) 80%,var(--t-tone))}
.pp-shade{fill:#000;opacity:.12}
.pp-armline{fill:none;stroke:rgba(0,0,0,.14);stroke-width:.8}
.pp-shadow ellipse{fill:var(--t-ink);opacity:.16}
.pp-blush{fill:color-mix(in srgb,var(--t-tone) 55%,#e9897a);opacity:.42}
.pp-eye{fill:var(--t-ink)}.pp-glint{fill:#fff}
.pp-mouth,.pp-brow,.pp-ln,.pp-lash{fill:none;stroke:color-mix(in srgb,var(--t-ink) 85%,var(--skin));stroke-linecap:round}
.pp-mouth{stroke-width:1.1}.pp-brow{stroke-width:1;opacity:.75}.pp-ln{stroke-width:.9;opacity:.55}.pp-lash{stroke-width:.9}
.pp-ln2{fill:none;stroke:var(--c3d);stroke-width:1}
.pp-hairh{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2;stroke-linecap:round}
.pp-paes{fill:color-mix(in srgb,var(--t-ink) 92%,#000)}
.pp-gl,.pp-gl2,.pp-wl,.pp-fold,.pp-gfold,.pp-inkl,.pp-ulos,.pp-leafp,.pp-veill{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pp-gl{stroke:var(--gold);stroke-width:.9}.pp-gl2{stroke:var(--gold);stroke-width:1.8}
.pp-wl{stroke:#fbf8f1;stroke-width:1}.pp-fold{stroke:rgba(0,0,0,.16);stroke-width:1}
.pp-gfold{stroke:color-mix(in srgb,var(--t-metal) 50%,transparent);stroke-width:.9}
.pp-inkl{stroke:rgba(255,255,255,.2);stroke-width:.9}
.pp-ulos{stroke:var(--pp-ink);stroke-width:1.6}
.pp-leafp{stroke:var(--leaf);stroke-width:1.6}
.pp-veil{fill:#fff;opacity:.55}.pp-veill{stroke:#fff;stroke-width:.7;opacity:.8}
.pp-none{display:none}
.pp-lace{fill:url(#ppTatah);opacity:.5}
.pp-batik,.pp-batikl{fill:url(#ppBatik)}.pp-batikl{opacity:.6}
.pp-songket{fill:url(#ppSongket)}
.pp-ulosp{fill:url(#ppSongket);opacity:.75}
.pp-bt1{fill:none;stroke:color-mix(in srgb,var(--t-ink) 60%,var(--t-tone));stroke-width:1.6;opacity:.55}
.pp-bt2{fill:none;stroke:var(--gold);stroke-width:.5;opacity:.7}.pp-bt2f{fill:var(--gold);opacity:.8}
.pp-sgf{fill:var(--gold);opacity:.75}.pp-tt{fill:none;stroke:var(--gold);stroke-width:.4}

/* ================= pembukaan (sebelum tamu menekan tombol) ================= */
.js .cover .pg-p-back .pg-world{animation:pgFade 1.4s ease backwards}
.js .cover .pg-p-far .pg-world{animation:pgRise 1.9s var(--ease-out) .45s backwards}
.js .cover .pg-p-mid .pg-world{animation:pgRise 1.9s var(--ease-out) .6s backwards}
.js .cover .pp-groom{animation:enterL 1.9s cubic-bezier(.2,1.15,.35,1) .95s backwards}
.js .cover .pp-bride{animation:enterR 1.9s cubic-bezier(.2,1.15,.35,1) 1.1s backwards}
.js .cover .pg-grow{animation:grow 1.7s cubic-bezier(.2,1.25,.35,1) calc(.45s + var(--i) * .06s) backwards,wind 9s var(--ease-sine) var(--ph) infinite}
.js .cover .pg-bloom{animation:bloom 1.1s cubic-bezier(.2,1.35,.4,1) calc(1.15s + var(--i) * .05s) backwards,wind 9s var(--ease-sine) var(--ph) infinite}
.js .cover .pg-crest-a{animation:pgFade 1.6s ease 1.3s backwards}
.js .cover .pg-curtain{animation:curtain-in 2.2s var(--ease-cloth) .2s backwards}
.js .cover .pg-pelmet{animation:pelmet-in 1.3s cubic-bezier(.2,1.3,.35,1) .05s backwards}
@keyframes pgFade{from{opacity:0}}
@keyframes pgRise{from{opacity:0;translate:-50% 44px}}
@keyframes enterL{from{opacity:0;translate:-70px 0}}
@keyframes enterR{from{opacity:0;translate:70px 0}}
@keyframes grow{from{opacity:0;scale:.2}}
@keyframes bloom{0%{opacity:0;scale:0}60%{opacity:1}}
/* tirai masuk dari luar layar lalu sedikit memantul seperti kain berat */
@keyframes curtain-in{0%{translate:calc(var(--dir) * 105%) 0}70%{translate:calc(var(--dir) * -2%) 0}100%{translate:0 0}}
@keyframes pelmet-in{from{translate:0 -120%}}
.js .tpl-pagelaran .cover-inner>*{animation:txtIn 1s var(--ease-out) backwards}
.js .tpl-pagelaran .cover-inner>:nth-child(1){animation-delay:1.5s}
.js .tpl-pagelaran .cover-inner>:nth-child(2){animation-delay:1.6s}
.js .tpl-pagelaran .cover-inner>:nth-child(3){animation-delay:1.7s}
.js .tpl-pagelaran .cover-inner>:nth-child(4){animation-delay:1.85s}
.js .tpl-pagelaran .cover-inner>:nth-child(5){animation-delay:2s}
.js .tpl-pagelaran .cover-inner>:nth-child(6){animation-delay:2.15s}
.js .tpl-pagelaran .cover-inner>:nth-child(n+7){animation-delay:2.3s}
@keyframes txtIn{from{opacity:0;translate:0 14px}}

/* ================= buka undangan: tirai terkumpul ke pinggir, kamera menembus taman =================
   Kamera = tiap bidang membesar sesuai kedalamannya (bidang dekat membesar lebih cepat). */
.tpl-pagelaran .pg-curtain{transition:transform 1.6s var(--ease-cloth)}
.tpl-pagelaran .pg-pelmet{transition:transform 1.2s cubic-bezier(.6,0,.4,1) .2s}
.tpl-pagelaran .cover .pg-depth{transition:scale 2.4s cubic-bezier(.55,0,.12,1) .2s,opacity 1.2s ease .5s}
.tpl-pagelaran.is-open .cover .pg-curtain{animation:none;transform:translateX(calc(var(--dir) * 18%)) scaleX(.22)}
.tpl-pagelaran.is-open .cover .pg-pelmet{animation:none;transform:translateY(-130%)}
.tpl-pagelaran.is-open .cover .pg-depth{scale:calc(1 + var(--k) * .9)}
.tpl-pagelaran.is-open .cover .pg-p-front .pg-depth{opacity:0}
.tpl-pagelaran.is-open .cover .pg-flare{animation:flare 1.9s ease .55s forwards}
@keyframes flare{0%{opacity:0;transform:scale(.3)}45%{opacity:.85}100%{opacity:0;transform:scale(1.6)}}
.tpl-pagelaran .cover-inner{transition:opacity .4s ease,transform .4s ease}
.tpl-pagelaran.is-open .cover-inner{opacity:0;transform:translateY(-14px)}
.tpl-pagelaran .cover{transition:opacity 1s ease 1.45s}
.tpl-pagelaran.is-open .cover{opacity:0}
/* setelah sampul hilang, panggungnya tidak dirender lagi sama sekali */
.tpl-pagelaran .cover.is-gone .pg-stage,.tpl-pagelaran .cover.is-gone .pg-petals{display:none}

/* ================= sampul ================= */
.tpl-pagelaran .cover{display:block;background:var(--t-paper)}
.tpl-pagelaran .cover-inner{min-height:100%;justify-content:flex-start;gap:8px;padding:calc(env(safe-area-inset-top) + max(70px,11dvh)) 26px calc(15dvh + env(safe-area-inset-bottom))}
.tpl-pagelaran .cover-inner .ghost{display:none}
.tpl-pagelaran .cover .guest{margin-top:auto}
.tpl-pagelaran .eyebrow{color:var(--gold-d)}
.tpl-pagelaran .names{font-size:clamp(42px,13vw,58px);color:var(--velvet);text-shadow:0 1px 0 color-mix(in srgb,var(--t-paper) 70%,transparent)}
.tpl-pagelaran .names .amp{font-size:.5em;color:var(--gold-d);margin:.06em 0}
.tpl-pagelaran.names-caps .names{font-size:34px;letter-spacing:.2em}
.tpl-pagelaran .cover-date{letter-spacing:.3em;font-size:12.5px;color:var(--gold-d)}
.tpl-pagelaran .cover .guest strong{color:var(--velvet)}
.tpl-pagelaran .btn-primary{background:var(--velvet);color:var(--t-paper);box-shadow:inset 0 0 0 1px var(--gold),0 8px 24px color-mix(in srgb,var(--velvet) 35%,transparent);transition:transform .25s var(--ease-out),box-shadow .25s}
.tpl-pagelaran .btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--gold),0 12px 28px color-mix(in srgb,var(--velvet) 42%,transparent)}
.tpl-pagelaran .seg input:checked+span{background:var(--velvet);border-color:var(--velvet)}

/* ================= beranda: panggung tanpa tirai; bidang bergeser berbeda saat digulir (JS, hanya translate) ================= */
.tpl-pagelaran .hero{justify-content:flex-start;min-height:0}
.tpl-pagelaran .hero-stage{position:relative;height:66dvh;min-height:360px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
/* hemat baterai: panggung beranda diam selama sampul masih tampil atau saat tergulir keluar layar */
body:not(.is-open) .hero-stage *,.hero-stage.is-off *{animation-play-state:paused!important}
.tpl-pagelaran .hero-text{margin-top:-58px;padding-top:0}
.tpl-pagelaran .hero-date{color:var(--gold-d)}

/* ================= isi ================= */
.tpl-pagelaran .sec-head h2{color:var(--velvet)}
.tpl-pagelaran .events,.tpl-pagelaran .rsvp{background:var(--bg2)}
.tpl-pagelaran .event{background:var(--t-paper);border:1px solid var(--gold);border-radius:2px;outline:1px solid color-mix(in srgb,var(--gold) 55%,transparent);outline-offset:-7px;padding:32px 22px}
.tpl-pagelaran .event h3{color:var(--velvet)}
.tpl-pagelaran .portrait{width:206px;padding:6px;border-radius:0;background:linear-gradient(160deg,var(--gold),var(--gold-d))}
.tpl-pagelaran .gift-card{background:var(--t-paper);border:1px solid var(--gold);border-radius:2px}
.tpl-pagelaran .story-list li::before{background:var(--gold)}
.tpl-pagelaran .closing .names{font-size:40px}
.tpl-pagelaran .dock a.is-current{color:var(--velvet)}

@media (prefers-reduced-motion:reduce){
  .tpl-pagelaran .pg-stage *,.tpl-pagelaran .cover-inner>*,.tpl-pagelaran .pg-curtain{animation:none!important}
  .pg-petals,.pg-dust{display:none}
}