/* =====================================================================
   MODE RUANG — halaman sambutan (hub) + ruang-ruang
   ---------------------------------------------------------------------
   Dimuat setelah site.css & themes.css. Semua warna memakai variabel
   tema, jadi tampilannya otomatis ikut suasana ucapan.
   ===================================================================== */

.rooms{
  position:relative;z-index:3;
  display:none;
  min-height:100vh;min-height:100svh;
}
/* Kolom flex, bukan block: ruang aktif dan footer membagi habis satu
   layar. Sebelumnya tiap .room dipatok setinggi layar SENDIRI, lalu
   footer setinggi ±185px menempel di bawahnya — jadi selalu ada gulir
   sisa walau isi ruangnya pendek. */
.rooms.is-active{display:flex;flex-direction:column;animation:roomsIn .7s ease both}
@keyframes roomsIn{from{opacity:0}to{opacity:1}}

/* --------------------------------------------------------------
   Satu ruang
   -------------------------------------------------------------- */
.room{
  flex:1 1 auto;min-height:0;
  display:grid;align-items:start;
  /* Kolom grid tanpa ukuran melebar mengikuti lebar minimum isinya.
     Strip sampul video memang digulir menyamping, tapi lebar minimumnya
     tetap jumlah seluruh sampul. Kolomnya jadi lebih lebar dari layar
     dan pemutar dipusatkan di situ, terdorong ke kanan. minmax(0,1fr)
     mematok kolom pada lebar ruang. */
  grid-template-columns:minmax(0,1fr);
  padding:clamp(22px,5vw,52px) 18px calc(24px + env(safe-area-inset-bottom));
}
.room[hidden]{display:none}

/* margin:auto, BUKAN align-items:center. Auto margin menyerap ruang
   bebas dan luruh jadi nol ketika ruangnya negatif — jadi isi pendek
   (video, kado) terpusat, sementara isi panjang (album, buku tamu)
   tetap mulai dari atas dan judulnya tidak pernah meluber ke luar
   layar. Memusatkan dengan align-items akan merusak yang panjang. */
.room-in{width:min(680px,100%);margin:auto}

/* Di layar tinggi, isi pendek ditarik ke sepertiga atas.

   margin:auto di atas memusatkannya tegak, dan itu benar selama ruangnya
   sempit — di HP, isi yang pendek pun mengisi sebagian besar layar. Di
   jendela tinggi bedanya jauh: surat satu baris cuma mengisi 47% ruang,
   dan sisanya jadi 206px kosong di atas plus 180px di bawah. Yang
   terbaca bukan "lapang", melainkan melayang.

   Yang diubah cuma tepi atasnya jadi jarak tetap; tepi bawahnya tetap
   auto sehingga ia yang menyerap seluruh ruang bebas. Isi panjang tetap
   mulai dari atas persis seperti sebelumnya — auto di bawah luruh jadi
   nol, dan tidak ada satu pun bagian yang jadi tidak terjangkau. Itu
   sebabnya cara ini dipakai, bukan align-items:center. */
@media (min-height:760px){
  .room-in{margin-block:min(9vh,96px) auto}
}

/* Footer ikut dibagi tinggi layarnya, tidak lagi menambah gulir.
   Hanya di mode ruang — mode gulir punya footer sendiri di .stage. */
.rooms .site-foot{
  flex:0 0 auto;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
}

/* Ucapan "dibuat dengan sepenuh hati" adalah tanda tangan kartunya —
   tempatnya di halaman sambutan, bukan diulang di tiap ruang. Di ruang
   isi ia memakan 116px yang seharusnya jadi milik isinya. */
.rooms:has(.room-hub[hidden]) .site-foot{display:none}

/* --------------------------------------------------------------
   Ruang video
   --------------------------------------------------------------
   Ruang yang isinya cuma satu video tidak perlu jarak selega ruang
   yang isinya banyak. Judulnya dirapatkan supaya tinggi yang tersisa
   jatuh ke videonya.
   -------------------------------------------------------------- */
.room[data-room="video"] .sec-head{margin-bottom:14px}
.room[data-room="video"] .room-back{margin-bottom:14px}

/* Anggaran perabot di sekitar video: padding ruang (52+24), tombol
   kembali (42+14), judul (98+14), keterangan (56) = 330px. Angkanya
   DIUKUR di browser pada 412x790, bukan ditebak — percobaan pertama
   memakai 302px dan menyisakan 20px gulir. */
@media (max-width:700px){
  .room[data-room="video"] .video-frame{--v-chrome:330px}

  /* Video tegak (TikTok, Reels, Shorts) butuh hampir seluruh tinggi
     layar. Judul "Video Ucapan" memakan ±112px yang seharusnya jadi
     milik videonya — dan di ruang yang isinya cuma satu video, judul
     itu tidak memberi tahu apa pun yang tidak sudah jelas.

     :has() dipakai supaya judulnya hanya hilang saat videonya memang
     tegak; video mendatar punya tinggi berlebih dan judulnya boleh
     tetap ada. Pola ini sudah dipakai di berkas ini untuk footer. */
  .room[data-room="video"]:has(.video-frame.is-tall) .sec-head{display:none}
  .room[data-room="video"]:has(.video-frame.is-tall) .video-frame{--v-chrome:218px}
}

/* Masuk & keluar ruang */
.room.is-in{animation:roomIn .5s cubic-bezier(.2,.8,.25,1) both}
.room.is-out{animation:roomOut .3s ease both}
@keyframes roomIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
@keyframes roomOut{to{opacity:0;transform:translateY(-14px) scale(.99)}}

.room-back{
  display:inline-flex;align-items:center;gap:7px;
  text-decoration:none;
  margin:0 0 22px;padding:9px 16px 9px 12px;
  font-family:var(--sans);font-size:.85rem;font-weight:600;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid var(--line);border-radius:999px;
  cursor:pointer;transition:transform .18s ease,background .18s ease;
}
.room-back:hover{transform:translateX(-3px);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.room-back span{font-size:1.1em;line-height:1}

/* --------------------------------------------------------------
   Halaman sambutan
   -------------------------------------------------------------- */
.room-hub{place-items:center;text-align:center}
.room-hub .room-in{display:flex;flex-direction:column;align-items:center}

.hub-eyebrow{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin:0 0 10px;
}
.hub-name{
  font-family:var(--script);font-weight:400;
  font-size:clamp(2.4rem,11vw,4rem);line-height:1.05;
  color:var(--accent);margin:0 0 6px;overflow-wrap:break-word;
}
/* Judul difokuskan lewat skrip tiap ganti ruang supaya pembaca layar
   ikut berpindah. Keduanya bertabindex="-1", jadi tidak akan pernah
   dicapai lewat tombol Tab — cincin fokusnya tidak berguna dan hanya
   terlihat seperti kotak nyasar. (:focus-visible tidak dipakai di sini:
   Chrome tetap menganggapnya "terlihat" untuk fokus dari skrip.) */
.hub-name:focus,
.room .sec-title:focus{outline:none}

.hub-art{
  width:min(300px,82%);margin:6px auto 14px;
}
.hub-art .ha{width:100%;height:auto;overflow:visible}

/* Gerak halus tiap ilustrasi */
.ha-balloon{transform-box:fill-box;transform-origin:bottom center;
  animation:haFloat 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes haFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}

.ha-flame{transform-box:fill-box;transform-origin:bottom center;
  animation:haFlicker 1.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * .2s)}
@keyframes haFlicker{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.14,.9) rotate(4deg)}}

.ha-ring{stroke-dashoffset:172;animation:haDraw 1.4s ease .3s forwards}
@keyframes haDraw{to{stroke-dashoffset:0}}

.ha-box{transform-box:fill-box;transform-origin:bottom center;
  animation:haWobble 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0) * .4s)}
@keyframes haWobble{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}65%{transform:rotate(3deg)}}

.ha-bit{transform-box:fill-box;transform-origin:center;
  animation:haSpin 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s)}
@keyframes haSpin{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(28deg)}}

.hub-msg{
  font-family:var(--serif);font-size:clamp(1.02rem,3.4vw,1.2rem);
  line-height:1.75;color:var(--ink);margin:0 0 6px;max-width:34ch;
}
.hub-note{
  margin:14px 0 22px;font-size:.85rem;color:var(--ink-soft);
}

/* --------------------------------------------------------------
   Ikon-ikon di halaman sambutan
   -------------------------------------------------------------- */
.hub-menu{
  display:grid;gap:clamp(10px,3vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  width:100%;max-width:440px;
}
/* Empat ikon tetap dua baris rapi di layar sempit. */
@media (max-width:420px){
  .hub-menu{grid-template-columns:repeat(2,1fr)}
}
/* Kisi di atas ditala untuk empat ikon; dengan satu ikon saja ia menempel
   ke kiri dan menyisakan separuh baris kosong, seperti isi yang gagal
   dimuat. Specificity :has() (0,2,0) mengalahkan media query di atas
   (0,1,0), jadi urutannya tidak menentukan. Tanpa :has() jatuh ke
   perilaku lama, bukan rusak. */
.hub-menu:has(> :only-child){
  grid-template-columns:minmax(96px,200px);
  justify-content:center;
}

.hub-item{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;
  padding:16px 8px 13px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  font-family:var(--sans);color:var(--ink);
  cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,border-color .22s ease;
  animation:hubPop .5s cubic-bezier(.2,1.3,.4,1) both;
  animation-delay:calc(.25s + var(--i,0) * .08s);
}
@keyframes hubPop{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}

.hub-item:hover,.hub-item:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  outline:none;
}
.hub-item:active{transform:translateY(-1px) scale(.98)}

.hub-ico{width:clamp(46px,14vw,58px);height:clamp(46px,14vw,58px);display:block}
.hub-ico .ri{width:100%;height:100%;overflow:visible}
.hub-label{font-size:.82rem;font-weight:600;letter-spacing:.01em}

/* Ikon ikut hidup saat disentuh */
.hub-item:hover .ri-flap{transform:rotateX(34deg)}
.ri-flap{transform-box:fill-box;transform-origin:top center;transition:transform .3s ease}
.hub-item:hover .ri-note{animation:riBounce .6s ease infinite alternate}
@keyframes riBounce{to{transform:translateY(-4px)}}
.ri-note{transform-box:fill-box}
.hub-item:hover .ri-play{transform:scale(1.18)}
.ri-play{transform-box:fill-box;transform-origin:center;transition:transform .25s ease}

/* Ruang yang belum diisi, hanya di pratinjau draf. Redup dan bergaris
   putus-putus supaya jelas belum berisi, tapi teksnya tidak ikut diredupkan:
   ia harus tetap terbaca. Animasi ikon dimatikan karena amplop yang
   terbuka dan not yang bergoyang menjanjikan isi yang belum ada.
   Specificity .hub-item.is-kosong:hover .ri-flap (0,4,0) mengalahkan
   .hub-item:hover .ri-flap (0,3,0) di atas. */
.hub-item.is-kosong{
  background:transparent;border-style:dashed;
  border-color:color-mix(in srgb,var(--ink) 22%,transparent);
  box-shadow:none;gap:6px;
}
.hub-item.is-kosong .hub-ico{opacity:.38;filter:grayscale(1)}
.hub-item.is-kosong:hover,.hub-item.is-kosong:focus-visible{
  transform:none;box-shadow:none;
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
}
.hub-item.is-kosong:hover .ri-flap,
.hub-item.is-kosong:hover .ri-play{transform:none}
.hub-item.is-kosong:hover .ri-note{animation:none}
.hub-kosong{font-size:.7rem;line-height:1.3;color:var(--ink-soft);text-align:center}
.hub-tier{
  font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;
  color:var(--accent-ink,var(--accent));
  background:color-mix(in srgb,var(--accent) 14%,transparent);
}

@media (prefers-reduced-motion: reduce){
  .room.is-in,.room.is-out,.rooms.is-active,.hub-item{animation:none !important}
  .ha-balloon,.ha-flame,.ha-box,.ha-bit,.ha-ring{animation:none !important}
}