/* bunga.css — ornamen bunga + gerak khas untuk SEMUA lapisan desain.
   Satu berkas, bukan 19: motif & gerak diatur lewat custom property per
   `data-tpl` di <body>, lalu SATU aturan menggambarnya. Menambah lapisan
   baru = menambah satu baris variabel di bawah, bukan menyalin blok CSS.

   Prinsip yang dijaga:
   - Motif digambar sendiri di sini (SVG inline data-URI); tidak memuat apa pun
     dari luar — CSP produksi hanya mengizinkan berkas dari domain sendiri.
   - Dipasang lewat mask-image, jadi warnanya ikut --accent tiap tema.
   - Gerak selalu dimatikan saat tamu meminta lebih sedikit gerak. */

.inv .bunga{
  display:block;width:20px;height:20px;margin:.65rem auto 0;
  background:currentColor;color:var(--accent);opacity:.8;
  -webkit-mask:var(--bunga-motif) center/contain no-repeat;
  mask:var(--bunga-motif) center/contain no-repeat;
  animation:var(--bunga-gerak) var(--bunga-dur,8s) ease-in-out infinite;
  animation-delay:var(--bunga-jeda,0s);
}
/* Lapisan bernomor (kanon, teras) menaruh judul di kiri, jadi bunganya ikut kiri. */
.inv.tpl-kanon .bunga,.inv.tpl-teras .bunga{margin-left:0}

/* ---------- 8 motif, dipakai bergantian supaya tiap template beda ---------- */
/* mawar: tiga cincin bertumpuk */
.inv,.inv.tpl-soft{--bunga-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.1'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6.4'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/g%3E%3C/svg%3E")}
/* kamboja: lima kelopak, khas Bali */
.inv.tpl-bali,.inv.tpl-aurora{--bunga-motif: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.6' ry='5.5'/%3E%3Cellipse cx='12' cy='6.5' rx='2.6' ry='5.5' transform='rotate(72 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='2.6' ry='5.5' transform='rotate(144 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='2.6' ry='5.5' transform='rotate(216 12 12)'/%3E%3Cellipse cx='12' cy='6.5' rx='2.6' ry='5.5' transform='rotate(288 12 12)'/%3E%3C/g%3E%3C/svg%3E")}
/* teratai: kelopak runcing, khas Betawi */
.inv.tpl-betawi,.inv.tpl-aksara{--bunga-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M12 1.5c2.2 5 2.2 8.3 0 11.5-2.2-3.2-2.2-6.5 0-11.5z'/%3E%3Cpath d='M12 1.5c2.2 5 2.2 8.3 0 11.5-2.2-3.2-2.2-6.5 0-11.5z' transform='rotate(45 12 12)'/%3E%3Cpath d='M12 1.5c2.2 5 2.2 8.3 0 11.5-2.2-3.2-2.2-6.5 0-11.5z' transform='rotate(90 12 12)'/%3E%3Cpath d='M12 1.5c2.2 5 2.2 8.3 0 11.5-2.2-3.2-2.2-6.5 0-11.5z' transform='rotate(270 12 12)'/%3E%3Cpath d='M12 1.5c2.2 5 2.2 8.3 0 11.5-2.2-3.2-2.2-6.5 0-11.5z' transform='rotate(315 12 12)'/%3E%3C/g%3E%3C/svg%3E")}
/* dahlia: delapan kelopak penuh */
.inv.tpl-batak,.inv.tpl-riso{--bunga-motif: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='5.4' rx='2.1' ry='6.6'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(45 12 12)'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(90 12 12)'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(135 12 12)'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(180 12 12)'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(225 12 12)'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(270 12 12)'/%3E%3Cellipse cx='12' cy='5.4' rx='2.1' ry='6.6' transform='rotate(315 12 12)'/%3E%3C/g%3E%3C/svg%3E")}
/* melati: empat bulatan kecil mengelilingi pusat */
.inv.tpl-kabut,.inv.tpl-minang{--bunga-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='5.6' r='4'/%3E%3Ccircle cx='18.4' cy='12' r='4'/%3E%3Ccircle cx='12' cy='18.4' r='4'/%3E%3Ccircle cx='5.6' cy='12' r='4'/%3E%3C/g%3E%3C/svg%3E")}
/* tulip: satu kelopak berlekuk tiga */
.inv.tpl-swiss,.inv.tpl-gelas{--bunga-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.8 9c0-4.2 2.7-6.8 4.8-6.8 1.2 0 2 .9 2.4 2.2.4-1.3 1.2-2.2 2.4-2.2 2.1 0 4.8 2.6 4.8 6.8 0 6.3-4.6 12-7.2 12S4.8 15.3 4.8 9z' fill='%23000'/%3E%3C/svg%3E")}
/* anggrek: dua sayap + bibir */
.inv.tpl-deco,.inv.tpl-kinetik{--bunga-motif: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' rx='3' ry='6'/%3E%3Cellipse cx='12' cy='6' rx='3' ry='6' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='6' rx='3' ry='6' transform='rotate(-60 12 12)'/%3E%3Ccircle cx='12' cy='14.2' r='3.6'/%3E%3C/g%3E%3C/svg%3E")}
/* matahari: delapan sinar mengelilingi pusat */
.inv.tpl-brut,.inv.tpl-sagara,.inv.tpl-bento,.inv.tpl-organik{--bunga-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(45 12 12)'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(90 12 12)'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(135 12 12)'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(180 12 12)'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(225 12 12)'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(270 12 12)'/%3E%3Cellipse cx='12' cy='4.6' rx='1.3' ry='3.4' transform='rotate(315 12 12)'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- 6 gerak; tiap lapisan memakai satu dengan tempo berbeda ---------- */
@keyframes bungaPutar{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes bungaNapas{0%,100%{transform:scale(.86) rotate(-6deg)}50%{transform:scale(1.1) rotate(6deg)}}
@keyframes bungaApung{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-6px) rotate(8deg)}}
@keyframes bungaDenyut{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.95;transform:scale(1.05)}}
@keyframes bungaAyun{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes bungaMekar{0%{transform:scale(.6) rotate(0);opacity:.3}55%{transform:scale(1.12) rotate(150deg);opacity:.95}100%{transform:scale(.6) rotate(300deg);opacity:.3}}

.inv.tpl-soft    .bunga,.inv.tpl-gelas  .bunga{--bunga-gerak:bungaNapas;--bunga-dur:7s}
.inv.tpl-aurora  .bunga,.inv.tpl-kabut  .bunga{--bunga-gerak:bungaDenyut;--bunga-dur:5.5s}
.inv.tpl-kanon   .bunga,.inv.tpl-teras  .bunga{--bunga-gerak:bungaPutar;--bunga-dur:22s}
.inv.tpl-aksara  .bunga,.inv.tpl-minang .bunga{--bunga-gerak:bungaMekar;--bunga-dur:11s}
.inv.tpl-sagara  .bunga,.inv.tpl-organik .bunga{--bunga-gerak:bungaApung;--bunga-dur:6s}
.inv.tpl-swiss   .bunga,.inv.tpl-brut   .bunga{--bunga-gerak:bungaAyun;--bunga-dur:4.5s}
.inv.tpl-deco    .bunga,.inv.tpl-bali   .bunga{--bunga-gerak:bungaPutar;--bunga-dur:16s}
.inv.tpl-riso    .bunga,.inv.tpl-bento  .bunga{--bunga-gerak:bungaNapas;--bunga-dur:9s}
.inv.tpl-kinetik .bunga{--bunga-gerak:bungaDenyut;--bunga-dur:3.2s}
.inv.tpl-batak   .bunga{--bunga-gerak:bungaMekar;--bunga-dur:13s}
.inv.tpl-betawi  .bunga{--bunga-gerak:bungaApung;--bunga-dur:4.2s}

/* Selang waktu berbeda supaya tidak semua bunga bergerak serempak. */
.inv.tpl-aurora .bunga{--bunga-jeda:.4s}   .inv.tpl-kanon .bunga{--bunga-jeda:.8s}
.inv.tpl-aksara .bunga{--bunga-jeda:1.2s}  .inv.tpl-sagara .bunga{--bunga-jeda:.6s}
.inv.tpl-kabut .bunga{--bunga-jeda:1.6s}   .inv.tpl-swiss .bunga{--bunga-jeda:.3s}
.inv.tpl-deco .bunga{--bunga-jeda:1s}      .inv.tpl-brut .bunga{--bunga-jeda:.5s}
.inv.tpl-riso .bunga{--bunga-jeda:1.4s}    .inv.tpl-bento .bunga{--bunga-jeda:.2s}
.inv.tpl-kinetik .bunga{--bunga-jeda:.9s}  .inv.tpl-gelas .bunga{--bunga-jeda:1.1s}
.inv.tpl-organik .bunga{--bunga-jeda:.7s}  .inv.tpl-teras .bunga{--bunga-jeda:1.3s}
.inv.tpl-minang .bunga{--bunga-jeda:.5s}   .inv.tpl-batak .bunga{--bunga-jeda:1.5s}
.inv.tpl-bali .bunga{--bunga-jeda:.2s}     .inv.tpl-betawi .bunga{--bunga-jeda:1s}

@media (prefers-reduced-motion:reduce){
  .inv .bunga{animation:none;opacity:.6}
}