/* ============================================================
   RANDOM WISHES SPAWN 
   ============================================================ */
:root {
  --ws-max-active: 10;
  /* jumlah maksimal teks yang boleh tampil bersamaan */
  --ws-min-total-to-activate: 3;
  /* fitur ini baru aktif kalau jumlah data pesan di database LEBIH DARI angka ini */
  --ws-spawn-delay-min: 0.05s;
  /* jeda paling cepat sebelum satu teks baru muncul menggantikan slot kosong */
  --ws-spawn-delay-max: 1s;
  /* jeda paling lambat sebelum satu teks baru muncul menggantikan slot kosong */
  --ws-cycle-duration: 10s;
  /* durasi 1 siklus penuh per teks: fade-in + typewriter + scale + fade-out */
  --ws-blur-amount: 10px;
  /* seberapa blur teks saat fade-in / masih diketik */
  --ws-blur-clear-duration: 0.8s;
  /* durasi blur menghilang setelah typewriter selesai */
  --ws-scale-start: 1;
  /* ukuran scale di awal siklus */
  --ws-scale-end: 2.25;
  /* ukuran scale di akhir siklus */
  --ws-type-speed: 40ms;
  /* kecepatan ketik typewriter, per huruf */
  --ws-font-size: clamp(13px, 1.6vw, 18px);
  /* ukuran font teks wishes-nya */
  --ws-name-font-size: clamp(11px, 1.2vw, 14px);
  /* ukuran font nama pengirim */
  --ws-edge-margin-x: 5.5%;
  /* batas aman posisi dari tepi kiri/kanan layar (makin besar = makin ke tengah, tidak kepotong) */
  --ws-edge-margin-y: 9%;
  /* batas aman posisi dari tepi atas/bawah layar */
  --ws-center-avoid-radius: 20%;
  /* radius area di sekitar titik tengah layar yang dihindari posisi acak, biar tidak nabrak teks utama */
  --ws-min-spawn-distance: 18%;
  /* jarak minimal antar 2 teks yang tampil bersamaan, biar posisi acaknya tidak saling tabrakan/tumpuk */
  --ws-overlap-fade-duration: 2s;
  /* secepat apa transisi teks spawn berubah saat bertabrakan dengan teks tengah yang sedang membesar */
  --ws-overlap-opacity: 1;
  /* opacity teks spawn saat bertabrakan (bukan 0, supaya tidak hilang total, cuma jadi samar) */
  --ws-overlap-blur: 5px;
  /* seberapa blur teks spawn saat bertabrakan */
}

@font-face {
  font-family: 'Nothing You Could Do';
  src: url('Nothing_You_Could_Do/NothingYouCouldDo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

#wishes-spawn-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
  /* di bawah #live-message (z-index 5) supaya teks tengah tetap paling menonjol */
}

.wish-spawn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 220px;
  padding: 6px 10px;
  font-family: 'Nothing You Could Do', cursive;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;

  opacity: 0;
  filter: blur(var(--ws-blur-amount));
  transform: translate(-50%, -50%) scale(var(--ws-scale-start));
}

/* Blur hilang smooth, dipicu JS begitu typewriter selesai mengetik */
.wish-spawn.ws-clear {
  filter: blur(0px);
  transition: filter var(--ws-blur-clear-duration) ease;
}

/* Scale: linear murni dari awal ke akhir siklus, terpisah dari opacity,
   supaya membesar rata terus-menerus (sama seperti teks tengah). */
@keyframes ws-scale-cycle {
  0% {
    transform: translate(-50%, -50%) scale(var(--ws-scale-start));
  }

  100% {
    transform: translate(-50%, -50%) scale(var(--ws-scale-end));
  }
}

/* Opacity: fade-in di awal, tahan penuh, fade-out di akhir. */
@keyframes ws-fade-cycle {
  0% {
    opacity: 0;
    animation-timing-function: ease-out;
  }

  8% {
    opacity: 1;
  }

  85% {
    opacity: 1;
    animation-timing-function: ease-in;
  }

  100% {
    opacity: 0;
  }
}

.wish-spawn.ws-play {
  animation:
    ws-scale-cycle var(--ws-cycle-duration) linear 1,
    ws-fade-cycle var(--ws-cycle-duration) linear 1;
}

.wish-spawn.ws-hide-overlap {
  opacity: var(--ws-overlap-opacity) !important;
  filter: blur(var(--ws-overlap-blur));
  transition: opacity var(--ws-overlap-fade-duration) ease,
    filter var(--ws-overlap-fade-duration) ease;
}

.wish-spawn-text {
  margin: 0;
  font-size: var(--ws-font-size);
  overflow-wrap: break-word;
  word-break: break-word;
}

.wish-spawn-name {
  margin: 4px 0 0;
  align-self: flex-end;
  font-size: var(--ws-name-font-size);
  opacity: 0.85;
}