/* =====================================================================
 * Pola Bunga Pelangi (Rainbow Flowers) — latar dekforatif wizard booking
 * - Dipakai bersama assets/js/rainbow-flowers.js (bunga dibuat via JS, tanpa gambar)
 * - Layer fixed full-viewport: pointer-events none (klik/scroll tembus), tanpa scrollbar
 * - Animasi CSS murni (hanya transform/opacity/filter) → GPU-friendly ±60 FPS
 * - Aksesibilitas: prefers-reduced-motion mematikan semua animasi (bunga tetap statis)
 * =================================================================== */

/* ---------- SVG defs bersama (wadah gradient, disembunyikan) ---------- */
.rbf-defs {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Layer utama (dibuat JS sebagai anak PERTAMA <body>) ---------- */
.rbf-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;            /* jaminan tidak memunculkan scrollbar */
  pointer-events: none;        /* efek TIDAK PERNAH mengintersep klik */
  background: transparent;
  contain: layout style paint; /* isolasi layout+paint untuk performa */
  animation: rbfHue 24s ease-in-out infinite alternate; /* rainbow drift halus */
  will-change: filter;
}

/* ---------- Bunga: wrapper = float (translate), inner = rotasi ---------- */
.rbf-flower {
  position: absolute;
  width: 260px;                                /* fallback browser lama */
  height: 260px;
  width: min(var(--rbf-size, 260px), 45vw);    /* cap ukuran terhadap viewport */
  height: min(var(--rbf-size, 260px), 45vw);
  opacity: var(--rbf-op, 0.18);                /* level watermark, teks tetap terbaca */
  filter: blur(var(--rbf-blur, 0px)) hue-rotate(var(--rbf-hue, 0deg));
  animation: rbfFloat var(--rbf-fdur, 14s) ease-in-out infinite alternate;
  will-change: transform;
}

/* Halo glow + inti lembut di BELAKANG kelopak (tanpa node DOM tambahan) */
.rbf-flower::before {
  content: "";
  position: absolute;
  top: -24%;
  right: -24%;
  bottom: -24%;
  left: -24%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--rbf-core, rgba(255, 238, 196, 0.85)), transparent 15%),
    radial-gradient(closest-side, var(--rbf-glow, rgba(255, 255, 255, 0.5)), transparent 72%);
  z-index: -1; /* wrapper membentuk stacking context (opacity), jadi tetap di dalam layer */
}

/* ---------- Inner: rotasi lambat (1 keyframes utk semua bunga via custom props) ---------- */
.rbf-flower-inner {
  width: 100%;
  height: 100%;
  animation: rbfSpin var(--rbf-dur, 90s) linear infinite;
  animation-direction: var(--rbf-dir, normal);
  transform-origin: center;
  will-change: transform;
}

/* ---------- SVG bunga + kelopak "bernapas" ---------- */
.rbf-flower svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--rbf-base, 0deg)); /* orientasi awal per bunga (dari JS ber-seed) */
}

.rbf-petals {
  transform-box: fill-box;
  transform-origin: center;
  animation: rbfBreathe var(--rbf-bdur, 10s) ease-in-out infinite alternate;
  will-change: transform;
}

/* ---------- Keyframes (durasi/arah dikontrol custom property per bunga) ---------- */
@keyframes rbfSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes rbfFloat {
  from { transform: translate3d(0, 12px, 0); }
  to   { transform: translate3d(0, -12px, 0); }
}

@keyframes rbfBreathe {
  from { transform: scale(0.94); }
  to   { transform: scale(1.06); }
}

@keyframes rbfHue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(40deg); }
}

/* ---------- Mode gelap: versi lebih redup agar tetap lembut ---------- */
@media (prefers-color-scheme: dark) {
  .rbf-flower {
    opacity: calc(var(--rbf-op, 0.18) * 0.72);
  }
  .rbf-flower::before {
    opacity: 0.55;
  }
}

/* ---------- Reduced motion: SEMUA animasi mati, bunga tetap tampil statis ---------- */
@media (prefers-reduced-motion: reduce) {
  .rbf-layer,
  .rbf-layer *,
  .rbf-layer *::before {
    animation: none !important;
  }
}