/* ============================================
   DEKORASI TEMA JAWA KLASIK — ASET GAMBAR ASLI
   Gunungan wayang, motif kawung, dan rangkaian
   bunga/dedaunan rustic. Gerak halus sebagai aksen.
   ============================================ */

.deco-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.deco-img {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}

.deco-img.deco-in-view {
  animation:
    decoFadeIn 1.1s ease forwards,
    decoFloat var(--float-dur, 7s) ease-in-out var(--float-delay, 0s) infinite;
}

@keyframes decoFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95) rotate(var(--rot, 0deg)); }
  to   { opacity: var(--max-opacity, 0.7); transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}

@keyframes decoFloat {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%      { transform: translate(var(--float-x, 4px), var(--float-y, -6px)) rotate(calc(var(--rot, 0deg) + var(--rot-add, 1deg))); }
}

@media (prefers-reduced-motion: reduce) {
  .deco-img.deco-in-view { animation: decoFadeIn 0.6s ease forwards; }
}

/* ---------- HERO: bunga mawar-lotus pojok atas, bouquet pastel bawah ---------- */
#hero .deco-layer .deco-img.hero-bunga-1 {
  top: -2%;
  right: -8%;
  width: 130px;
  --rot: 8deg;
  --float-x: -4px;
  --float-y: -6px;
  --float-dur: 7.5s;
  --max-opacity: 0.55;
}
#hero .deco-layer .deco-img.hero-bunga-2 {
  bottom: 4%;
  left: -6%;
  width: 100px;
  --rot: -10deg;
  --float-x: 4px;
  --float-y: -5px;
  --float-dur: 6.4s;
  --float-delay: 0.5s;
  --max-opacity: 0.5;
}

/* ---------- PROFIL: bunga bouquet pastel pojok kanan ---------- */
#profil .deco-layer .deco-img.profil-bunga {
  top: -4%;
  right: -10%;
  width: 130px;
  --rot: 6deg;
  --float-x: -4px;
  --float-y: 5px;
  --float-dur: 8s;
  --max-opacity: 0.5;
}

/* ---------- ACARA: bunga pampas oranye pojok kiri bawah ---------- */
#acara .deco-layer .deco-img.acara-bunga {
  bottom: -6%;
  left: -10%;
  width: 150px;
  --rot: -180deg;
  --float-x: 4px;
  --float-y: -4px;
  --float-dur: 7.5s;
  --max-opacity: 0.45;
}

/* ---------- AMPLOP: bunga kembar mengapit ---------- */
#amplop .deco-layer .deco-img.amplop-bunga-1 {
  top: -3%;
  left: -8%;
  width: 100px;
  --rot: -10deg;
  --float-x: 3px;
  --float-y: -5px;
  --float-dur: 6.2s;
  --max-opacity: 0.45;
}
#amplop .deco-layer .deco-img.amplop-bunga-2 {
  bottom: -3%;
  right: -8%;
  width: 110px;
  --rot: 12deg;
  --float-x: -3px;
  --float-y: -5px;
  --float-dur: 6.8s;
  --float-delay: 0.4s;
  --max-opacity: 0.45;
}

/* ---------- UCAPAN: bunga pastel pojok atas kiri ---------- */
#ucapan .deco-layer .deco-img.ucapan-bunga {
  top: -4%;
  left: -8%;
  width: 110px;
  --rot: -8deg;
  --float-x: 3px;
  --float-y: -4px;
  --float-dur: 8.4s;
  --max-opacity: 0.4;
}

/* ---------- FOOTER: bunga mawar-lotus tengah atas (animasi terpusat) ---------- */
#footer .deco-layer .deco-img.footer-bunga {
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  opacity: 0;
}
#footer .deco-layer .deco-img.footer-bunga.deco-in-view {
  animation:
    decoFadeInCentered 1.1s ease forwards,
    decoFloatCentered 6.6s ease-in-out 0s infinite;
}
@keyframes decoFadeInCentered {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.95); }
  to   { opacity: 0.5; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes decoFloatCentered {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}

#hero, #profil, #acara, #amplop, #ucapan, #footer {
  position: relative;
}

#hero .section-inner,
#profil .section-inner,
#acara .section-inner,
#amplop .section-inner,
#ucapan .section-inner {
  position: relative;
  z-index: 2;
}