/* ==========================================================================
   Sistem animasi
   - Elemen dengan [data-anim] diam di posisi awal sampai section-nya aktif.
   - JS (snap.js) memberi class .is-active ke section yang sedang tampil dan
     mencabutnya saat ditinggal → elemen animasi keluar, lalu animasi masuk
     diputar lagi saat section kembali tampil.
   - Masuk (--dur-enter): ditunda sesuai --delay (eksplisit) atau --i × --stagger.
     Keluar (--dur-exit): semua langsung, tanpa delay.
   - Nama preset = arah datangnya elemen.
   ========================================================================== */

[data-anim] {
  --i: 0;
  transition-property: opacity, transform, clip-path;
  transition-duration: var(--dur-exit);
  transition-timing-function: var(--ease-snap);
  transition-delay: 0ms;
}

/* State awal / keluar (section tidak aktif) */
[data-anim="rise"] {
  opacity: 0;
  /* --rise: jarak naik khusus per elemen */
  transform: translateY(var(--rise, 1.5rem));
}

[data-anim="from-left"] {
  opacity: 0;
  transform: translateX(-3rem);
}

[data-anim="from-right"] {
  opacity: 0;
  transform: translateX(3rem);
}

[data-anim="stamp"] {
  opacity: 0;
  transform: scale(1.35) rotate(var(--stamp-rotate, -4deg));
}

[data-anim="bloom"] {
  opacity: 0;
  transform: scale(0.2) rotate(-180deg);
}

[data-anim="wipe"] {
  clip-path: inset(0 100% 0 0);
}

/* Stick: muncul agak besar & miring, lalu "ditempel" lurus dengan sedikit mantul */
[data-anim="stick"] {
  opacity: 0;
  transform: scale(1.2) rotate(var(--tilt, -5deg));
}

.is-active [data-anim="stick"] {
  transition-timing-function: var(--ease-overshoot);
}

/* Kebalikan "wipe": terbuka dari kanan ke kiri */
[data-anim="wipe-from-right"] {
  clip-path: inset(0 0 0 100%);
}

/* Tirai: terbuka dari atas ke bawah */
[data-anim="curtain"] {
  clip-path: inset(0 0 100% 0);
}

/* Zoom-out tanpa fade (biasanya dipakai di dalam elemen "curtain") */
[data-anim="zoom-out"] {
  transform: scale(1.15);
}

/* State masuk (section aktif) */
.is-active [data-anim] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  /* --dur / --ease: durasi & kurva masuk khusus per elemen */
  transition-duration: var(--dur, var(--dur-enter));
  transition-timing-function: var(--ease, var(--ease-snap));
  transition-delay: var(--delay, calc(var(--i) * var(--stagger)));
}

.is-active [data-anim="stamp"] {
  transform: rotate(var(--stamp-rotate, -4deg));
  transition-timing-function: var(--ease-overshoot);
}

.is-active [data-anim="bloom"] {
  transition-timing-function: var(--ease-overshoot);
}

/* ==========================================================================
   Animasi per huruf — elemen [data-split] (dipecah oleh split-letters.js).
   Awal dihitung dari --delay elemen itu sendiri.
   ========================================================================== */

/* Sembunyikan teks asli sampai selesai dipecah, supaya tidak berkedip */
[data-split]:not([data-split-ready]) {
  visibility: hidden;
}

.split__word {
  display: inline-block;
  white-space: nowrap;
}

.split__char {
  display: inline-block;
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--dur-exit);
  transition-timing-function: var(--ease-snap);
}

/* --- letters: tiap huruf naik dari bawah ---------------------------------
   Semua huruf selesai dalam --split-window + --split-char-dur (±1 detik),
   berapa pun panjang teksnya. */
[data-split="letters"] {
  --split-window: 600ms;
  --split-char-dur: 400ms;
}

[data-split="letters"] .split__char {
  transform: translateY(0.4em);
}

.is-active [data-split="letters"] .split__char {
  opacity: 1;
  transform: none;
  transition-duration: var(--split-char-dur);
  transition-delay: calc(
    var(--delay, 0ms) + var(--char-i) * var(--split-window) / max(var(--char-count) - 1, 1)
  );
}

/* --- lines: baris per baris (dipecah oleh split-lines.js) ----------------- */
.split__line {
  display: block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.75em);
  transition-property: opacity, transform;
  transition-duration: var(--dur-exit);
  transition-timing-function: var(--ease-snap);
}

.is-active .split__line {
  opacity: 1;
  transform: none;
  transition-duration: var(--dur-enter);
  transition-delay: calc(var(--delay, 0ms) + var(--line-i) * var(--line-stagger, 120ms));
}

/* --- type: mesin ketik + kursor -------------------------------------------
   Semua huruf selesai diketik dalam --type-duration (jeda per huruf dibagi
   rata). Kursor (::after) menempel di huruf yang baru diketik; setelah huruf
   terakhir, kursor kedip 2x lalu hilang. */
[data-split="type"] {
  --type-duration: 600ms;
  --type-step: calc(var(--type-duration) / var(--char-count, 1));
}

[data-split="type"] .split__char {
  position: relative;
}

[data-split="type"] .split__char::after {
  content: "";
  position: absolute;
  top: 0.14em;
  bottom: 0.06em;
  left: calc(100% + 0.04em);
  width: 0.08em;
  background: currentColor;
  opacity: 0;
}

.is-active [data-split="type"] .split__char {
  --char-delay: calc(var(--delay, 0ms) + var(--char-i) * var(--type-step));
  opacity: 1;
  /* 1ms, bukan 0s: transisi 0s tidak selalu memicu repaint di Chrome */
  transition-duration: 1ms;
  transition-delay: var(--char-delay);
}

.is-active [data-split="type"] .split__char::after {
  animation: type-caret var(--type-step) step-end var(--char-delay);
}

.is-active [data-split="type"] .split__char--last::after {
  animation: type-caret-end calc(var(--type-step) * 6) step-end var(--char-delay);
}

@keyframes type-caret {
  0%,
  100% { opacity: 1; }
}

@keyframes type-caret-end {
  0% { opacity: 1; }
  33% { opacity: 0; }
  50% { opacity: 1; }
  83%,
  100% { opacity: 0; }
}

/* Putaran pelan tanpa henti, mulai setelah animasi masuk (--spin-delay).
   Dijeda saat section tidak aktif supaya tidak loncat sudut. */
[data-spin] {
  animation: spin var(--spin-duration, 40s) linear var(--spin-delay, var(--dur-enter)) infinite;
  animation-play-state: paused;
}

.is-active [data-spin] {
  animation-play-state: running;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Pop + shake: muncul dari kecil, membesar melewati ukuran akhir sambil
   berubah ke --pop-color, bergetar, lalu kembali ke ukuran & warna normal.
   Pakai @keyframes (bukan transisi) karena urutannya bertahap. */
[data-anim="pop-shake"] {
  opacity: 0;
  transform: scale(0.4);
}

.is-active [data-anim="pop-shake"] {
  animation: pop-shake var(--pop-dur, 1300ms) var(--delay, 0ms) both;
}

@keyframes pop-shake {
  0% {
    opacity: 0;
    transform: scale(0.4);
    color: var(--pop-color, currentColor);
    animation-timing-function: var(--ease-overshoot);
  }
  35% {
    opacity: 1;
    transform: scale(var(--pop-scale, 1.18));
    color: var(--pop-color, currentColor);
    animation-timing-function: linear;
  }
  41% { transform: scale(var(--pop-scale, 1.18)) translateX(-0.06em) rotate(-2deg); }
  47% { transform: scale(var(--pop-scale, 1.18)) translateX(0.06em) rotate(2deg); }
  53% { transform: scale(var(--pop-scale, 1.18)) translateX(-0.05em) rotate(-1.5deg); }
  59% { transform: scale(var(--pop-scale, 1.18)) translateX(0.05em) rotate(1.5deg); }
  65% { transform: scale(var(--pop-scale, 1.18)) translateX(-0.03em) rotate(-1deg); }
  71% {
    transform: scale(var(--pop-scale, 1.18));
    color: var(--pop-color, currentColor);
    animation-timing-function: var(--ease-snap);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Hormati pengaturan "kurangi gerakan" di HP user */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .is-active [data-anim],
  .split__char,
  .is-active .split__char,
  .split__line,
  .is-active .split__line {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }

  [data-spin],
  .split__char::after,
  .is-active [data-anim="pop-shake"] {
    animation: none !important;
  }
}