/* =====================================================================
   RUANG KADO
   ---------------------------------------------------------------------
   Keadaan diatur lewat kelas pada .giftbox:
     (bawaan)     hadiahnya langsung terlihat — inilah yang dilihat
                  browser tanpa JavaScript
     .is-closed   kotak tertutup, hadiah disembunyikan
     .is-opening  tutup terlempak, percikan menyebar
     .is-open     kotak menghilang, hadiah muncul
   ===================================================================== */

.giftbox .gx-stage{display:none}
.giftbox.is-closed .gx-stage{display:flex}
.giftbox.is-closed #gxReveal{display:none}

/* Kelas .is-closed sengaja tidak dilepas (animasi goyangnya terikat ke
   sana), jadi panggungnya harus disingkirkan lewat .is-open — kalau
   tidak, kotak kosongnya tetap nongkrong di atas hadiah. */
.giftbox.is-open .gx-stage{
  animation:gxStageOut .5s ease forwards;
  pointer-events:none;
}
@keyframes gxStageOut{
  to{opacity:0;transform:translateY(-14px) scale(.9);height:0;padding:0;margin:0}
}

.gx-stage{
  flex-direction:column;align-items:center;
  padding:10px 0 4px;
}

/* --------------------------------------------------------------
   Kotak kado
   -------------------------------------------------------------- */
.gx-open{
  position:relative;
  width:min(260px,72vw);
  border:0;padding:0;background:none;cursor:pointer;
  transition:transform .25s ease;
}
.gx-open:hover{transform:scale(1.04)}
.gx-open:focus-visible{outline:3px solid var(--accent);outline-offset:10px;border-radius:14px}
.gx-box{width:100%;height:auto;overflow:visible}

/* Goyangan pelan supaya kotaknya "memanggil" untuk diketuk */
.gx-base,.gx-lid{transform-box:fill-box;transform-origin:bottom center}
.is-closed .gx-lid{animation:gxNudge 2.6s ease-in-out infinite}
.is-closed .gx-base{animation:gxNudge 2.6s ease-in-out infinite;animation-delay:.06s}
@keyframes gxNudge{
  0%,72%,100%{transform:rotate(0) translateY(0)}
  78%{transform:rotate(-3.5deg) translateY(-3px)}
  86%{transform:rotate(3deg) translateY(-2px)}
  93%{transform:rotate(-1.4deg)}
}
.gx-shadow{transform-box:fill-box;transform-origin:center}
.is-closed .gx-shadow{animation:gxShadow 2.6s ease-in-out infinite}
@keyframes gxShadow{0%,72%,100%{transform:scaleX(1)}80%{transform:scaleX(.9)}}

/* Tutup terlempar */
.is-opening .gx-lid{animation:gxLid .9s cubic-bezier(.25,.9,.35,1) forwards}
@keyframes gxLid{
  35%{transform:translateY(-86px) rotate(-14deg)}
  100%{transform:translateY(-190px) rotate(-46deg);opacity:0}
}
.is-opening .gx-base{animation:gxSquash .55s ease forwards}
@keyframes gxSquash{40%{transform:scale(1.07,.92)}100%{transform:scale(1)}}

/* Percikan */
.gx-burst{position:absolute;inset:0;pointer-events:none}
.gx-burst i{
  position:absolute;left:50%;top:42%;
  width:8px;height:12px;border-radius:2px;
  background:var(--accent2);opacity:0;
}
.gx-burst i:nth-child(even){background:var(--accent);width:7px;height:7px;border-radius:50%}
.is-opening .gx-burst i{animation:gxSpark .95s ease-out forwards}
.gx-burst i:nth-child(1){--dx:-120px;--dy:-130px}
.gx-burst i:nth-child(2){--dx:-80px; --dy:-165px}
.gx-burst i:nth-child(3){--dx:-30px; --dy:-185px}
.gx-burst i:nth-child(4){--dx:25px;  --dy:-180px}
.gx-burst i:nth-child(5){--dx:78px;  --dy:-160px}
.gx-burst i:nth-child(6){--dx:125px; --dy:-125px}
.gx-burst i:nth-child(7){--dx:-150px;--dy:-70px}
.gx-burst i:nth-child(8){--dx:150px; --dy:-62px}
.gx-burst i:nth-child(9){--dx:-100px;--dy:-30px}
.gx-burst i:nth-child(10){--dx:104px;--dy:-22px}
.gx-burst i:nth-child(11){--dx:-56px;--dy:-205px}
.gx-burst i:nth-child(12){--dx:56px; --dy:-200px}
@keyframes gxSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(220deg)}
}

.gx-hint{margin:18px 0 0;text-align:center;font-size:.88rem;color:var(--ink-soft)}
.is-opening .gx-hint{color:var(--accent);font-weight:600}

/* --------------------------------------------------------------
   Isi kado
   -------------------------------------------------------------- */
.gx-reveal{text-align:center}
.giftbox.is-open #gxReveal{
  display:block;
  animation:gxIn .8s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes gxIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}

.gx-title{
  font-family:var(--script);font-weight:400;
  font-size:clamp(1.7rem,6vw,2.4rem);color:var(--accent);
  margin:0 0 14px;line-height:1.15;
}
.gx-title:focus{outline:none}

.gx-content{display:flex;justify-content:center;flex-direction:column;align-items:center;gap:16px}

.gx-bouquet{width:min(330px,88%);height:auto;overflow:visible}
/* Tiap tangkai mekar bergantian */
.gx-stem{transform-box:fill-box;transform-origin:bottom center}
.is-open .gx-stem{animation:gxBloom .7s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(.2s + var(--i,0) * .11s)}
@keyframes gxBloom{from{opacity:0;transform:scale(.25) rotate(6deg)}to{opacity:1;transform:none}}

.gx-photo{
  max-width:min(420px,100%);border-radius:var(--radius);
  box-shadow:var(--shadow-md);border:1px solid var(--line);
}

.gx-qr{
  width:min(260px,72%);padding:14px;border-radius:20px;
  background:#fff;box-shadow:var(--shadow-md);border:1px solid var(--line);
}
.gx-qr svg{width:100%;height:auto;display:block}
.gx-link{margin-top:2px}

.gx-msg{
  margin:18px auto 0;max-width:38ch;
  font-family:var(--serif);font-size:1.02rem;line-height:1.7;color:var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  .gx-lid,.gx-base,.gx-shadow,.gx-burst i,.gx-stem,.giftbox.is-open #gxReveal{animation:none !important}
  .giftbox.is-open .gx-stage{animation:none;display:none}
  .gx-open{transition:none}
}