/* ============================================================
   TEXT ANIMATION
   ============================================================ */
:root {
  --lm-blur-amount: 18px;
  /* seberapa blur teks saat fade-in / masih diketik */
  --lm-scale-start: 0.7;
  /* ukuran scale di AWAL siklus (batas kecil) */
  --lm-scale-amount: 3.8;
  /* ukuran scale di AKHIR siklus (batas besar) */
  --lm-cycle-duration: 30s;
  /* durasi total 1 siklus: fade-in + scale + fade-out, sebelum diulang */
  --lm-blur-clear-duration: 1.1s;
  /* durasi blur menghilang setelah typewriter selesai */
  --lm-type-speed: 45ms;
  /* kecepatan ketik typewriter, per huruf (dibaca oleh liveMessageAnimation.js) */
  --lm-long-text-threshold: 20;
  /* batas jumlah huruf sebelum teks wishes dianggap panjang & jadi paragraf (dibaca oleh liveMessageAnimation.js) */
}

@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;
}

.live-message {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  padding: 0 20px;
  font-family: 'Nothing You Could Do', cursive;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 5;

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

.live-message[hidden] {
  display: none;
}

.live-message.lm-clear {
  filter: blur(0px);
  transition: filter var(--lm-blur-clear-duration) ease;
}

/* Scale: animasi terpisah sendiri, linear murni dari 0% ke 100%, supaya membesar
   rata/konstan terus-menerus sepanjang siklus dan TIDAK ikut melambat/berhenti
   saat fade-in maupun fade-out (tidak dicampur dengan easing punya opacity). */
@keyframes lm-scale-cycle {
  0% {
    transform: translate(-50%, -50%) scale(var(--lm-scale-start));
  }

  100% {
    transform: translate(-50%, -50%) scale(var(--lm-scale-amount));
  }
}

/* Opacity: animasi terpisah, boleh punya kurva easing sendiri per segmen
   tanpa memengaruhi kecepatan scale di atas. */
@keyframes lm-fade-cycle {
  0% {
    opacity: 0;
    animation-timing-function: ease-out;
    /* kurva khusus fade-in (0%->3%): mulai cepat, mendarat halus */
  }

  3% {
    opacity: 1;
  }

  96% {
    opacity: 1;
    animation-timing-function: ease-in;
    /* kurva khusus fade-out (96%->100%): mulai halus, menutup mulus */
  }

  100% {
    opacity: 0;
  }
}

.live-message.lm-play {
  animation:
    lm-scale-cycle var(--lm-cycle-duration) linear infinite,
    lm-fade-cycle var(--lm-cycle-duration) linear infinite;
}

.live-message-text {
  margin: 0;
  text-align: center;
  font-size: clamp(18px, 3vw, 32px);
  line-height: 1.4;
}

/* Cuma dipasang oleh JS (liveMessageAnimation.js) kalau teks wishes > 30 huruf,
   supaya teks pendek tetap 1 baris natural dan teks panjang melipat jadi paragraf. */
.live-message-text.is-long {
  max-width: min(700px, 85vw);
  overflow-wrap: break-word;
  word-break: break-word;
}

.live-message-name {
  align-self: flex-end;
  margin: 8px 0 0;
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: 0.85;
}