/* tpl-bali.css — LAPISAN ADAT BALI.
   Karakter: undangan yang tenang dan sakral. Pura bertingkat (meru) jadi bingkai,
   kain poleng hitam-putih jadi pita pemisah, penjor melengkung di tepi, dan
   bunga kamboja berkelopak lima yang jatuh pelan. Emas & hijau dedaunan.

   Prinsip yang dijaga:
   - Semua ornamen digambar sendiri di berkas ini (SVG data-URI) — tidak memuat
     berkas atau motif milik siapa pun, dan tidak ada URL luar sama sekali
     (CSP produksi hanya mengizinkan berkas dari domain sendiri).
   - Ornamen dipasang lewat pseudo-elemen bertumpuk, jadi markup halaman tidak
     perlu tahu apa pun soal Bali.
   - Simetri dijaga di semua lebar: setiap ornamen terpusat atau mengulang rata. */

.inv.tpl-bali{background:var(--background);--poleng:6px}

/* ---------- pita poleng: kotak hitam-putih, murni gradien ---------- */
.inv.tpl-bali .rule,
.inv.tpl-bali .sec--footer::after{
  display:block;height:10px;border:0;margin:1.4rem auto;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      var(--text) 0 25%, var(--surface) 0 50%) 0 0/12px 12px;
  opacity:.5;max-width:22rem;
}
.inv.tpl-bali .sec--footer{position:relative;padding-bottom:3.2rem}
.inv.tpl-bali .sec--footer::after{
  content:'';position:absolute;left:0;right:0;bottom:1.4rem;margin-inline:auto;
}

/* ---------- meru: pura bertingkat, dipakai sebagai bingkai cover ---------- */
.inv.tpl-bali .cover__inner{
  position:relative;padding:3rem 1.5rem 2.4rem;max-width:32rem;
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
}
.inv.tpl-bali .cover__inner::before{
  content:'';position:absolute;top:1rem;left:0;right:0;margin-inline:auto;
  width:96px;height:48px;background:currentColor;color:var(--primary);opacity:.9;
  -webkit-mask:var(--meru) center/contain no-repeat;
  mask:var(--meru) center/contain no-repeat;
  animation:baliMeruNapas 6s ease-in-out infinite;
}
.inv.tpl-bali .cover.has-cover .cover__inner{background:rgba(12,14,10,.5);border-color:rgba(240,230,200,.45)}
.inv.tpl-bali .cover__names{letter-spacing:.08em;font-weight:600}
.inv.tpl-bali .cover__date{letter-spacing:.34em;text-transform:uppercase;font-size:.78rem;color:var(--accent)}
.inv.tpl-bali .cover__to{letter-spacing:.14em;color:var(--muted)}
.inv.tpl-bali .cover__guestname{border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:.25rem}

/* ---------- penjor: bambu melengkung + hiasan menggantung ---------- */
.inv.tpl-bali .sec--hero{position:relative;padding-top:5.2rem}
.inv.tpl-bali .sec--hero::before,
.inv.tpl-bali .sec--hero::after{
  content:'';position:absolute;top:0;width:78px;height:110px;background:currentColor;
  color:var(--accent);opacity:.55;pointer-events:none;
  -webkit-mask:var(--penjor) center/contain no-repeat;
  mask:var(--penjor) center/contain no-repeat;
}
.inv.tpl-bali .sec--hero::before{left:calc(50% - 190px);animation:baliPenjorAyun 7.5s ease-in-out infinite}
.inv.tpl-bali .sec--hero::after{right:calc(50% - 190px);transform:scaleX(-1);animation:baliPenjorAyun 7.5s ease-in-out infinite reverse}

/* ---------- kamboja: kelopak jatuh, satu-satunya gerak yang berulang cepat ---------- */
.inv.tpl-bali .sec--quote,
.inv.tpl-bali .sec--countdown,
.inv.tpl-bali .sec--couple{position:relative;overflow:hidden}
.inv.tpl-bali .sec--quote::after,
.inv.tpl-bali .sec--countdown::after,
.inv.tpl-bali .sec--couple::after{
  content:'';position:absolute;top:-24px;left:0;right:0;height:24px;
  background:currentColor;color:var(--accent);opacity:.7;
  -webkit-mask:var(--kamboja) repeat-x 0 0/24px 24px;
  mask:var(--kamboja) repeat-x 0 0/24px 24px;
  animation:baliKambojaJatuh 9s linear infinite;
}

/* ---------- section: garis rambut emas + judul kecil berspasi ---------- */
.inv.tpl-bali .sec{
  border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  padding-block:clamp(2rem,5vw,3.4rem);
}
.inv.tpl-bali .sec--quote,
.inv.tpl-bali .sec--countdown{
  background:color-mix(in srgb,var(--secondary) 34%,var(--background));
  border-block:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.inv.tpl-bali .eyebrow{color:var(--accent);letter-spacing:.32em;font-size:.7rem}
.inv.tpl-bali .sec__num{color:color-mix(in srgb,var(--accent) 70%,var(--muted))}
.inv.tpl-bali .sec__head{border-bottom:1px solid var(--line);padding-bottom:.6rem}

/* ---------- mempelai: foto bulat penuh + cincin emas tipis ---------- */
.inv.tpl-bali .couple{gap:1.6rem}
.inv.tpl-bali .couple__photo{
  border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  padding:6px;background:var(--surface);box-shadow:var(--shadow);
}
.inv.tpl-bali .couple__photo--empty{background:color-mix(in srgb,var(--secondary) 50%,var(--surface))}
.inv.tpl-bali .couple__name{font-family:var(--font-heading);letter-spacing:.05em}
.inv.tpl-bali .couple__nick{color:var(--accent);letter-spacing:.22em;text-transform:uppercase;font-size:.72rem}
.inv.tpl-bali .couple__parents{color:var(--muted);font-size:.86rem;line-height:1.7}
.inv.tpl-bali .couple__amp{color:var(--accent);font-family:var(--font-heading)}
.inv.tpl-bali .couple__ig{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line)}

/* ---------- acara: kartu tanpa bayangan, dipisah garis emas ---------- */
.inv.tpl-bali .events{gap:1.1rem}
.inv.tpl-bali .event{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.2rem;box-shadow:none;
}
.inv.tpl-bali .event__title{color:var(--primary);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.inv.tpl-bali .event__when{color:var(--text);font-weight:600}
.inv.tpl-bali .event__place{color:var(--text)}
.inv.tpl-bali .event__addr{color:var(--muted);font-size:.9rem}
.inv.tpl-bali .event__rule{background:color-mix(in srgb,var(--accent) 40%,transparent);height:1px}

/* ---------- hitung hari: angka telanjang, satuan berspasi lebar ---------- */
.inv.tpl-bali .count{gap:1.6rem}
.inv.tpl-bali .count__num{font-family:var(--font-heading);color:var(--primary);line-height:1}
.inv.tpl-bali .count__unit{color:var(--accent);letter-spacing:.26em;text-transform:uppercase;font-size:.62rem}
.inv.tpl-bali .count__lbl{color:var(--muted);font-size:.7rem}
.inv.tpl-bali .count__done{color:var(--muted);font-style:italic}

/* ---------- galeri: kisi rapat, sudut lembut ---------- */
.inv.tpl-bali .gallery{gap:.7rem}
.inv.tpl-bali .gallery__item{border-radius:calc(var(--radius) - 4px);overflow:hidden;border:1px solid var(--line)}
.inv.tpl-bali .lightbox{background:rgba(10,12,9,.9)}
.inv.tpl-bali .lightbox__cap{color:var(--secondary)}

/* ---------- hadiah: kartu bersudut emas, angka monospace ---------- */
.inv.tpl-bali .gifts{gap:1rem}
.inv.tpl-bali .gift{
  background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  border-radius:var(--radius);padding:1.3rem 1.1rem;
}
.inv.tpl-bali .gift__kind{color:var(--accent);letter-spacing:.24em;text-transform:uppercase;font-size:.66rem}
.inv.tpl-bali .gift__provider{color:var(--text);font-weight:600}
.inv.tpl-bali .gift__number{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--primary);letter-spacing:.06em}
.inv.tpl-bali .gift__holder{color:var(--muted);font-size:.84rem}

/* ---------- ucapan: kartu rata kiri, garis kiri emas ---------- */
.inv.tpl-bali .wishes{gap:.9rem}
.inv.tpl-bali .wish{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid color-mix(in srgb,var(--accent) 60%,transparent);
  border-radius:calc(var(--radius) - 6px);padding:1rem 1.1rem;
}
.inv.tpl-bali .wish__name{color:var(--primary);font-weight:600}
.inv.tpl-bali .wish__msg{color:var(--text);line-height:1.75}
.inv.tpl-bali .wish__meta{color:var(--muted);font-size:.74rem}
.inv.tpl-bali .form--wish input,.inv.tpl-bali .form--wish textarea{
  border:1px solid var(--line);border-radius:calc(var(--radius) - 6px);background:var(--surface);color:var(--text);
}
.inv.tpl-bali .form--wish input:focus,.inv.tpl-bali .form--wish textarea:focus{
  outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:1px;
}

/* ---------- kutipan, prosa, tombol, musik, kaki ---------- */
.inv.tpl-bali .quote{font-family:var(--font-heading);color:var(--primary);line-height:1.9}
.inv.tpl-bali .quote::before{content:'“';color:color-mix(in srgb,var(--accent) 60%,transparent)}
.inv.tpl-bali .prose{color:var(--text);line-height:1.85}
.inv.tpl-bali .btn--open{
  background:var(--primary);color:var(--on-primary);border:0;border-radius:calc(var(--radius) - 2px);
  letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;padding:.9rem 1.6rem;
}
.inv.tpl-bali .btn--open:hover{background:color-mix(in srgb,var(--primary) 82%,var(--accent))}
.inv.tpl-bali .music{background:color-mix(in srgb,var(--surface) 80%,transparent);border:1px solid var(--line);border-radius:999px}
.inv.tpl-bali .share{border-top:1px solid var(--line);color:var(--muted)}
.inv.tpl-bali .footer__names{font-family:var(--font-heading);color:var(--primary);letter-spacing:.14em}
.inv.tpl-bali .orn{color:var(--accent);margin:0 auto 1.1rem}
.inv.tpl-bali .orn-corner{color:color-mix(in srgb,var(--accent) 60%,transparent)}

/* ---------- motif, digambar sendiri ---------- */
.inv.tpl-bali{
  /* meru: empat tingkat makin kecil ke atas */
  --meru:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath d='M2 31h60l-7-7H9zM11 22h42l-7-7H18zM20 13h24l-7-7H27zM28 4h8l-3-3h-2z' fill='%23000'/%3E%3C/svg%3E");
  /* penjor: bambu melengkung dengan hiasan menggantung di ujungnya */
  --penjor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 110'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M39 108C39 74 37 46 24 26 18 16 12 10 6 6'/%3E%3Cpath d='M24 26c6 2 12 1 17-3'/%3E%3Cpath d='M30 40c6 2 12 1 17-3'/%3E%3Cpath d='M34 58c6 2 12 1 17-3'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='41' cy='23' r='2.2'/%3E%3Ccircle cx='47' cy='37' r='2.2'/%3E%3Ccircle cx='51' cy='55' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  /* kamboja: lima kelopak */
  --kamboja:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cellipse cx='12' cy='6.5' rx='2.5' ry='5.4'/%3E%3Cellipse cx='12' cy='6.5' rx='2.5' ry='5.4' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='2.5' ry='5.4' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='2.5' ry='5.4' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='2.5' ry='5.4' transform='rotate(288 12 12)'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- gerak ---------- */
@keyframes baliMeruNapas{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}
@keyframes baliPenjorAyun{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes baliKambojaJatuh{from{transform:translateY(0)}to{transform:translateY(320px)}}
@keyframes baliMasuk{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.inv.tpl-bali .sec--hero,.inv.tpl-bali .sec--couple,.inv.tpl-bali .sec--events,
.inv.tpl-bali .sec--gallery,.inv.tpl-bali .sec--gift,.inv.tpl-bali .sec--wishes{
  animation:baliMasuk .7s cubic-bezier(.2,.8,.2,1) both;
}

/* ---------- lebar kecil: penjor keluar layar, jadi disembunyikan ---------- */
@media (max-width:640px){
  .inv.tpl-bali .sec--hero::before,
  .inv.tpl-bali .sec--hero::after{display:none}
  .inv.tpl-bali .sec--hero{padding-top:2.4rem}
  .inv.tpl-bali .cover__inner::before{width:72px;height:36px}
  .inv.tpl-bali .couple__photo{max-width:74%}
}

@media (prefers-reduced-motion:reduce){
  .inv.tpl-bali .cover__inner::before,
  .inv.tpl-bali .sec--hero::before,
  .inv.tpl-bali .sec--hero::after,
  .inv.tpl-bali .sec--quote::after,
  .inv.tpl-bali .sec--countdown::after,
  .inv.tpl-bali .sec--couple::after,
  .inv.tpl-bali .sec--hero,.inv.tpl-bali .sec--couple,.inv.tpl-bali .sec--events,
  .inv.tpl-bali .sec--gallery,.inv.tpl-bali .sec--gift,.inv.tpl-bali .sec--wishes{animation:none}
}