/* Gaya khusus Minimalis "Kalender Sobek", watercolor. Satu aksen kecil khas: angka merah bata #A0442C
   (kontras sekitar 6:1 di atas kertas putih). Latar dan teks lain ikut tiga varian warna Minimalis.
   Keadaan diam (tanpa animasi) = posisi akhir, jadi saat "kurangi gerakan" semua langsung tampil di tempatnya.
   Semua kelas khusus berawalan kal-. */
body[data-gaya="kalender"]{--kal-bata:#A0442C}
body[data-gaya="kalender"] .wc{display:block;max-width:none;height:auto;user-select:none;-webkit-user-drag:none}
/* Tekstur kertas sebagai latar halus (dipasang JS setelah dibuka lewat variabel --wc-kertas) */
body[data-gaya="kalender"] #inv-isi,.kal-latar{background-color:var(--t-bg);background-image:var(--wc-kertas,none);background-size:360px auto;background-blend-mode:multiply}

/* ---------- Sampul: gambar garis kalender kecil (tanpa angka, tanpa tanggal) ---------- */
.kal-cover-orn{width:220px;height:48px;margin-bottom:10px;overflow:visible}
.kal-cover-orn .kal-garis-bata{stroke:var(--kal-bata);stroke-width:1.5}
/* Kuntum dan baby's breath di sulur: merah bata yang dilunakkan ke warna latar, supaya tidak bersaing dengan lingkaran */
.kal-cover-orn .kal-garis-bunga{stroke:#C98E86;stroke:color-mix(in srgb,var(--kal-bata) 55%,var(--t-bg,#fff))}
body[data-gaya="kalender"] .cover .kal-mono{margin-bottom:12px}
/* Layar pendek (HP mini di landing 290 x 485, iPhone SE 320 x 568): jarak dan ukuran dirapatkan supaya
   hiasan, nama, tamu, dan tombol muat utuh tanpa terpotong. Tombol tetap minimal 52 px. */
@container kal-layar (max-height:620px){
  body[data-gaya="kalender"] .cover{padding-top:12px;padding-bottom:12px}
  body[data-gaya="kalender"] .kal-cover-orn{margin-bottom:6px}
  body[data-gaya="kalender"] .cover .inv-lbl{margin-bottom:8px}
  body[data-gaya="kalender"] .cover .foto-ph{width:104px;height:136px;margin-bottom:10px}
  body[data-gaya="kalender"] .cover .mono-min.kal-mono{width:120px;height:120px;font-size:40px;margin-bottom:8px}
  body[data-gaya="kalender"] .cover .cover-nama{font-size:38px}
  body[data-gaya="kalender"] .cover .cover-nama + .cover-kepada{margin-top:10px}
  body[data-gaya="kalender"] .cover .btn-buka{min-height:52px;margin-top:12px}
  body[data-gaya="kalender"] .cover .cover-aman{margin-top:8px}
}
@container kal-layar (max-height:520px){
  body[data-gaya="kalender"] .cover .foto-ph{width:84px;height:110px;margin-bottom:8px}
  body[data-gaya="kalender"] .cover .mono-min.kal-mono{width:96px;height:96px;font-size:32px;margin-bottom:6px}
  body[data-gaya="kalender"] .cover .cover-nama{font-size:34px}
}
/* Layar sempit: hiasan garis sedikit dikecilkan, nama tamu tidak melebar ke tepi */
@container kal-layar (max-width:330px){
  body[data-gaya="kalender"] .cover{padding-left:14px;padding-right:14px}
  body[data-gaya="kalender"] .kal-cover-orn{width:200px;height:44px}
  body[data-gaya="kalender"] .cover .cover-tamu{font-size:20px;max-width:100%}
  body[data-gaya="kalender"] .cover .btn-buka{max-width:100%}
}

/* ---------- Lembar kalender (dipakai di adegan dan di hero). Ukuran teks ikut --kal-f ---------- */
.kal-lb{position:relative;width:100%;aspect-ratio:280/382;font-size:var(--kal-f,10px);font-family:var(--f-body);color:var(--t-text-muted);text-align:center}
body[data-gaya="kalender"] .kal-lb .kal-kertas{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.kal-lb > span{position:absolute;left:0;right:0;line-height:1;white-space:nowrap}
.kal-bln{top:19%;font-size:1.35em;font-weight:600;letter-spacing:.18em;color:var(--t-heading)}
.kal-tgl{top:53%;transform:translateY(-50%);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:11em;color:var(--kal-bata);font-variant-numeric:lining-nums}
.kal-hr{bottom:14%;font-size:1.7em;color:var(--t-text)}
/* Lingkar tinta: tergambar melingkar lewat mask conic (sudut --kal-a dianimasikan) */
@property --kal-a{syntax:'<angle>';inherits:false;initial-value:360deg}
body[data-gaya="kalender"] .kal-lingkar{position:absolute;left:50%;top:52%;width:16em;margin:-8em 0 0 -8em;transform:rotate(-8deg);
  -webkit-mask-image:conic-gradient(from 20deg,#000 var(--kal-a,360deg),transparent 0);mask-image:conic-gradient(from 20deg,#000 var(--kal-a,360deg),transparent 0)}
/* Tepi sobek bergerigi di bawah jilid (jilid tetap milik lembar dasar, jadi tidak ikut tersobek) */
.kal-sobek{position:absolute !important;left:0;top:0;
  clip-path:polygon(0 11%,6% 12.4%,12% 10.8%,18% 12.6%,24% 11%,30% 12.2%,36% 10.9%,42% 12.5%,48% 11.1%,54% 12.3%,60% 10.8%,66% 12.6%,72% 11%,78% 12.2%,84% 10.9%,90% 12.4%,96% 11.1%,100% 12%,100% 100%,0 100%)}

/* ---------- Rangkaian bunga di sekitar lembar (adegan dan hero) ----------
   Letak dan ukuran dalam em (ikut --kal-f: 10px di blok, 6,8px di hero), jadi saat serah terima susunannya sama.
   Lembar 22em x 30em. Komposisi diagonal: rangkaian sudut di kiri atas, peony dan mawar krem di kanan bawah.
   --tf = putaran/cermin tiap gambar, --j = jeda mekar di adegan. */
.kal-rk{position:absolute;left:0;top:0;width:100%;height:100%;font-size:var(--kal-f,10px);pointer-events:none;--tf:rotate(0deg)}
body[data-gaya="kalender"] .kal-rk .wc{position:absolute;transform:var(--tf)}
.kal-rk .kal-rk-sudut{left:-4.6em;top:-3.6em;width:11em;--j:2.85s}
.kal-rk .kal-rk-daun.atas{left:-6.2em;top:5em;width:8em;--tf:scaleX(-1) rotate(28deg);--j:2.95s}
.kal-rk .kal-rk-daun.bawah{right:-6em;bottom:1.5em;width:9em;--tf:rotate(-24deg);--j:2.8s}
.kal-rk .kal-rk-gyp.atas{right:-2.6em;top:-2.4em;width:5em;--tf:rotate(-10deg);--j:3.3s}
.kal-rk .kal-rk-gyp.bawah{right:-4.4em;bottom:6.2em;width:6.4em;--tf:rotate(12deg);--j:3.25s}
.kal-rk .kal-rk-mawar.atas{left:-1.8em;top:-1.6em;width:4.2em;--tf:scaleX(-1) rotate(10deg);--j:3.1s}
.kal-rk .kal-rk-peony{right:-3.8em;bottom:-2.6em;width:8.6em;--j:3s}
.kal-rk .kal-rk-mawar.bawah{right:3.6em;bottom:-3em;width:5.4em;--tf:rotate(-12deg);--j:3.15s}
/* Mekar bertahap setelah lingkar tinta (berlanjut saat kalender mengecil) */
.kal-lapis.main .kal-rk .wc{animation:kalMekar .7s cubic-bezier(.3,1.3,.5,1) var(--j,3s) both}
@keyframes kalMekar{from{opacity:0;transform:var(--tf) scale(.4)}to{opacity:1;transform:var(--tf) scale(1)}}

/* ---------- Lapisan adegan ----------
   Skala layar: semua ukuran adegan dirancang untuk layar 360 x 720. Panggung (.kal-panggung, dibuat JS) selalu
   berukuran 360 x 720 px dan diskalakan dengan --kal-u = min(lebar/360, tinggi/720, 1,3) dari ukuran layar undangan
   (#layar-tamu, jadi benar di bingkai HP pratinjau, di bingkai HP landing ?embed=1, dan di layar penuh), lalu
   diletakkan di tengah. Di 360 x 720, --kal-u = 1, jadi tampilan sama persis dengan versi yang disetujui. */
body[data-gaya="kalender"] #layar-tamu{container:kal-layar / size}
.kal-lapis{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.kal-lapis[hidden]{display:none}
.kal-latar{position:absolute;inset:0}
.kal-panggung{position:absolute;left:50%;top:50%;width:360px;height:720px;margin:-360px 0 0 -180px;transform:scale(var(--kal-u,1))}
/* Latar baru memudar setelah kalender hampir sampai di hero (terbang 0,8 s), supaya isi undangan
   tidak tampak bertumpuk di bawah kalender besar */
.kal-lapis.lepas .kal-latar{opacity:0;transition:opacity .45s ease .4s}
.kal-blok{position:absolute;left:50%;top:92px;width:220px;margin-left:-110px;--kal-f:10px;--kal-tx:0px;--kal-ty:-104px;--kal-s:.68}
.kal-tumpuk{position:absolute;left:50%;top:548px;width:190px;margin-left:-95px}
.kal-tumpuk img{width:100%;opacity:0}
.kal-lapis.lepas .kal-tumpuk{opacity:0;transition:opacity .5s ease}

/* Blok muncul, lalu mengecil ke kalender kecil di hero (jarak diukur JS) */
.kal-lapis.main .kal-blok{animation:kalMasuk .6s ease .1s both}
.kal-lapis.main .kal-blok.terbang{animation:kalTerbang .8s cubic-bezier(.45,0,.25,1) both}
@keyframes kalMasuk{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes kalTerbang{from{transform:none}to{transform:translate(var(--kal-tx),var(--kal-ty)) scale(var(--kal-s))}}

/* Tiga lembar tersobek bergantian ke kiri dan ke kanan, jatuh ke tumpukan */
.kal-sobek.s1,.kal-sobek.s3{transform-origin:100% 11%}
.kal-sobek.s2{transform-origin:0 11%}
.kal-lapis.main .kal-sobek.s1{animation:kalSobekKiri .8s cubic-bezier(.5,0,.7,.5) .9s both}
.kal-lapis.main .kal-sobek.s2{animation:kalSobekKanan .8s cubic-bezier(.5,0,.7,.5) 1.4s both}
.kal-lapis.main .kal-sobek.s3{animation:kalSobekKiri .8s cubic-bezier(.5,0,.7,.5) 1.9s both}
@keyframes kalSobekKiri{0%{opacity:1;transform:none}22%{opacity:1;transform:rotate(-7deg)}75%{opacity:1}100%{opacity:0;transform:translate(-60px,360px) rotate(-36deg) scale(.6)}}
@keyframes kalSobekKanan{0%{opacity:1;transform:none}22%{opacity:1;transform:rotate(7deg)}75%{opacity:1}100%{opacity:0;transform:translate(60px,360px) rotate(32deg) scale(.6)}}
/* Tumpukan sobekan tampil bertahap mengikuti tiap lembar yang jatuh */
.kal-lapis.main .kal-tumpuk img{animation:kalTumpuk 1.5s linear 1.45s both}
@keyframes kalTumpuk{0%{opacity:0;transform:translateY(8px) scale(.92)}20%,33%{opacity:.5;transform:translateY(4px) scale(.95)}53%,66%{opacity:.8;transform:translateY(2px) scale(.98)}100%{opacity:1;transform:none}}
/* Kelopak blush jatuh bersama tiap lembar dan berhenti di tumpukan sobekan (letak dan jeda dari JS) */
.kal-kelopak{position:absolute;inset:0}
.kal-kp{position:absolute;opacity:0}
.kal-lapis.main .kal-kp{animation:kalKp var(--t,1.2s) cubic-bezier(.4,0,.7,1) var(--j,1s) both}
@keyframes kalKp{0%{opacity:0;transform:none}12%{opacity:1}100%{opacity:.95;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.kal-lapis.lepas .kal-kelopak{opacity:0;transition:opacity .5s ease}
/* Lingkar tinta di angka hari H */
.kal-lapis.main .kal-blok .kal-lingkar{animation:kalLingkar .9s ease-in-out 2.6s both}
@keyframes kalLingkar{from{--kal-a:0deg}to{--kal-a:360deg}}

/* ---------- Hero: kalender hari H kecil di atas nama (posisi akhir) ---------- */
body[data-gaya="kalender"] .hero{padding:36px 16px 8px}
/* Rangkaian bunga ikut tampil saat serah terima (urutan DOM: bunga belakang, lembar, bunga depan) */
/* Ukuran ikut --kal-u, dibatasi 0,75 sampai 1 (di 360 x 720 tetap 150 px). Bunga menjorok paling jauh 3em ke bawah
   (20 px pada skala 1), jarak bawah 28 px ikut diskalakan, jadi bunga tidak pernah menyentuh label dan nama. */
.kal-hk{position:relative;--kal-hu:clamp(.75,var(--kal-u,1),1);width:calc(150px * var(--kal-hu));margin:0 auto calc(28px * var(--kal-hu));--kal-f:calc(6.8px * var(--kal-hu))}
.kal-hk.tunggu .kal-lb,.kal-hk.tunggu .kal-rk{opacity:0}
body[data-gaya="kalender"] .kelopak img{display:block;height:auto}
body[data-gaya="kalender"] .hero .ib-judul{font-size:40px;margin-bottom:6px}

@media (prefers-reduced-motion: reduce){
  .kal-lapis{display:none !important}
  .kal-hk.tunggu .kal-lb,.kal-hk.tunggu .kal-rk{opacity:1}
}