/* =====================================================================
   DEKORASI HALAMAN
   ---------------------------------------------------------------------
   Lapisan hiasan yang menempel di tepi ruang. Selalu di belakang isi
   dan tidak pernah bisa diklik — hiasan tidak boleh menghalangi apa pun.
   ===================================================================== */

.room,.stage{position:relative}

/* Satu lapisan per jenis hiasan, dicetak sekali di tingkat halaman.
   Dipaku ke tepi layar supaya selalu terlihat, berapa pun panjang
   isinya — dan supaya tidak terkurung oleh ruang yang sedang
   dianimasikan. Isi halaman ada di z-index 3, jadi selalu di atas. */
.decor{
  position:fixed;inset:0;
  pointer-events:none;overflow:hidden;
  z-index:1;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease;
}
.decor.is-on{opacity:1;visibility:visible}

/* visibility:hidden TIDAK menghentikan animasi CSS — elemennya tetap
   di-layout dan di-tick tiap frame. Satu ucapan bisa mencetak sampai
   7 lapisan hiasan sekaligus (satu per jenis yang dipakai di seluruh
   ruang), masing-masing berisi 10-16 elemen ber-animasi infinite. Jadi
   HP menganimasikan ratusan elemen padahal hanya satu lapisan terlihat.

   content-visibility melewatkan render seluruh isi lapisan, dan animasi
   elemen yang tidak dirender tidak pernah menghasilkan frame.
   animation-play-state jadi jaring pengaman untuk browser lama. */
.decor:not(.is-on){content-visibility:hidden}
.decor:not(.is-on) *{animation-play-state:paused}

/* --------------------------------------------------------------
   Bendera
   -------------------------------------------------------------- */
.dc-line{
  position:absolute;left:-4%;right:-4%;top:22px;height:2px;
  background:color-mix(in srgb,var(--accent) 42%,transparent);
  border-radius:2px;transform:rotate(-1.2deg);
}
.dc-flags{
  position:absolute;left:-4%;right:-4%;top:22px;
  display:flex;justify-content:space-between;transform:rotate(-1.2deg);
}
.dc-flag{
  width:0;height:0;
  border-left:11px solid transparent;
  border-right:11px solid transparent;
  border-top:26px solid var(--accent);
  opacity:.85;transform-origin:top center;
  animation:dcSway 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .12s);
}
.dc-flag:nth-child(even){border-top-color:var(--accent2)}
.dc-flag:nth-child(3n){border-top-width:21px;opacity:.7}
@keyframes dcSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* --------------------------------------------------------------
   Butiran yang disebar
   -------------------------------------------------------------- */
.dc-bit{
  position:absolute;left:var(--x);top:var(--y);
  transform:scale(var(--s,1));
  animation:dcFloat 7s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.6s);
}
@keyframes dcFloat{
  0%,100%{transform:scale(var(--s,1)) translateY(0) rotate(0)}
  50%{transform:scale(var(--s,1)) translateY(-14px) rotate(12deg)}
}

.dc-petal{
  width:20px;height:13px;opacity:.5;
  background:var(--accent);
  border-radius:50% 0 50% 0;
}
.dc-bit:nth-child(even).dc-petal{background:var(--accent2)}

.dc-star{
  width:9px;height:9px;opacity:.75;
  background:var(--accent2);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:dcTwinkle 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.35s);
}
@keyframes dcTwinkle{0%,100%{opacity:.25;transform:scale(calc(var(--s,1) * .8))}50%{opacity:.9;transform:scale(var(--s,1))}}

.dc-heart{
  width:15px;height:14px;opacity:.45;
  background:var(--accent);
  /* polygon() dipakai, bukan path(): path() memakai satuan piksel tetap
     dan dukungannya lebih baru. Bentuknya cukup mirip pada ukuran sekecil ini. */
  clip-path:polygon(50% 100%,10% 62%,0 35%,8% 12%,28% 4%,50% 20%,72% 4%,92% 12%,100% 35%,90% 62%);
}
.dc-bit:nth-child(even).dc-heart{background:var(--accent2)}

.dc-confetti{
  width:8px;height:12px;border-radius:2px;opacity:.55;
  background:var(--accent);
}
.dc-bit:nth-child(3n).dc-confetti{background:var(--accent2);border-radius:50%;height:8px}

/* --------------------------------------------------------------
   Balon
   -------------------------------------------------------------- */
.dc-balloon{
  position:absolute;left:var(--x);top:var(--y);
  width:34px;height:42px;border-radius:50% 50% 46% 46%;
  background:var(--accent);opacity:.55;
  animation:dcRise 6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.3s);
}
.dc-balloon:nth-child(even){background:var(--accent2);width:28px;height:35px}
.dc-balloon::after{
  content:"";position:absolute;left:50%;top:100%;
  width:1.5px;height:34px;translate:-50% 0;
  background:color-mix(in srgb,var(--accent) 45%,transparent);
}
@keyframes dcRise{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}

/* Topi toga melayang */
.dc-toga{
  position:absolute;left:var(--x);top:var(--y);
  width:36px;height:36px;opacity:.5;
  animation:dcRise 6.5s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.4s);
}
.dc-toga::before{          /* papan topi */
  content:"";position:absolute;inset:0;border-radius:4px;
  background:var(--accent);
  transform:scaleY(.5) rotate(45deg);
}
.dc-toga::after{           /* jumbai */
  content:"";position:absolute;left:74%;top:46%;
  width:3px;height:15px;border-radius:0 0 2px 2px;
  background:var(--accent2);
}
.dc-toga:nth-child(even)::before{background:var(--accent2)}
.dc-toga:nth-child(even)::after{background:var(--accent)}

/* --------------------------------------------------------------
   Tulip (template Jinju)
   -------------------------------------------------------------- */
.dc-tulip{
  position:absolute;left:var(--x);bottom:-6px;
  width:64px;height:var(--h,120px);
  transform-origin:bottom center;
  animation:dcSwayTulip 5.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.7s);
}
.dc-tulip svg{width:100%;height:100%;overflow:visible;opacity:.9}

.dc-tulip-top{
  position:absolute;left:var(--x);top:-8px;
  width:52px;height:96px;
  transform-origin:top center;
  animation:dcSwayTulip 6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.1s);
}
.dc-tulip-top svg{width:100%;height:100%;overflow:visible;opacity:.75}

@keyframes dcSwayTulip{
  0%,100%{transform:rotate(-2.2deg)}
  50%{transform:rotate(2.4deg)}
}

/* Di layar sempit cukup tiga tangkai — sesuai janji "minimal 3",
   tanpa membuat tepi halaman jadi penuh. */
@media (max-width:520px){
  .dc-tulip:nth-child(2),
  .dc-tulip:nth-child(5){display:none}
}

/* --------------------------------------------------------------
   Bingkai garis
   -------------------------------------------------------------- */
.decor[data-decor="frame"]::before,
.decor[data-decor="frame"]::after{
  content:"";position:absolute;border-radius:14px;pointer-events:none;
}
.decor[data-decor="frame"]::before{
  inset:16px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
}
.decor[data-decor="frame"]::after{
  inset:23px;border:1px solid color-mix(in srgb,var(--accent2) 26%,transparent);
}

/* Layar sempit: hiasan tepi dikurangi supaya tidak ramai */
@media (max-width:520px){
  .dc-bit:nth-child(n+9){display:none}
  .dc-balloon:nth-child(n+3){display:none}
  /* Sisakan satu topi per sudut atas. Yang di sebelah dalam jatuh
     tepat di atas judul begitu layarnya menyempit. */
  .dc-toga:nth-child(even){display:none}
}

@media (prefers-reduced-motion: reduce){
  .dc-tulip,.dc-tulip-top{animation:none !important}
}

@media (prefers-reduced-motion: reduce){
  .dc-flag,.dc-bit,.dc-star,.dc-balloon{animation:none !important}
}