/* =========================================================
   ANIMATIONS — sisi CSS dari Global Animation System
   =========================================================
   anim.js menangani animasi yang perlu dikontrol dari JS
   (menunggu selesai, berurutan, transisi chapter).

   File ini untuk yang berjalan terus-menerus / deklaratif:
   cukup tambahkan class, tidak perlu JS sama sekali.

     <div class="anim-apung">      → naik-turun pelan
     <div class="anim-denyut">     → membesar-mengecil
     <div class="anim-cahaya">     → glow berkedip
     <div class="anim-goyang">     → bergoyang
     <div class="anim-putar-pelan">
     <div class="anim-ken-burns">  → zoom + pan foto
     <div class="anim-kilau">      → kilau melintas
     <div class="anim-naik">       → muncul dari bawah (sekali)

   Kecepatan bisa diatur per elemen:
     style="--durasi: 6s; --jeda: .4s"
========================================================= */

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes a-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes a-fade-out  { from { opacity: 1; } to { opacity: 0; } }

@keyframes a-naik {
  from { opacity: 0; transform: translate3d(0, 44px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes a-turun {
  from { opacity: 0; transform: translate3d(0, -44px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes a-zoom-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes a-blur-in {
  from { opacity: 0; filter: blur(18px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes a-apung {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--jarak, 14px) * -1)); }
}

@keyframes a-apung-miring {
  0%, 100% { transform: translate(0, 0) rotate(var(--miring, 0deg)); }
  33%      { transform: translate(6px, -12px) rotate(calc(var(--miring, 0deg) + 1.5deg)); }
  66%      { transform: translate(-5px, -6px) rotate(calc(var(--miring, 0deg) - 1.5deg)); }
}

@keyframes a-denyut {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--skala, 1.07)); }
}

@keyframes a-cahaya {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 111, 165, 0.35)); }
  50%      { filter: drop-shadow(0 0 26px rgba(255, 111, 165, 0.85)); }
}

@keyframes a-cahaya-emas {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 198, 107, 0.25); }
  50%      { box-shadow: 0 0 46px rgba(255, 198, 107, 0.7); }
}

@keyframes a-goyang {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(4deg); }
}

@keyframes a-getar {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(7px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

@keyframes a-putar {
  to { transform: rotate(360deg); }
}

@keyframes a-ken-burns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.16) translate(var(--geser-x, 2%), var(--geser-y, -2%)); }
}

@keyframes a-kilau {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(320%) skewX(-18deg); }
}

@keyframes a-nafas-api {
  0%, 100% { transform: scale(1) translateY(0);       opacity: 1; }
  25%      { transform: scale(1.12) translateY(-2px); opacity: 0.92; }
  50%      { transform: scale(0.94) translateY(1px);  opacity: 1; }
  75%      { transform: scale(1.08) translateY(-1px); opacity: 0.95; }
}

@keyframes a-gelombang {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes a-masuk-lembut {
  from { opacity: 0; filter: blur(10px); transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}

/* =========================================================
   CLASS UTILITAS
========================================================= */

.anim-apung {
  animation: a-apung var(--durasi, 4s) var(--jeda, 0s) infinite ease-in-out;
}

.anim-apung-miring {
  animation: a-apung-miring var(--durasi, 7s) var(--jeda, 0s) infinite ease-in-out;
}

.anim-denyut {
  animation: a-denyut var(--durasi, 2.4s) var(--jeda, 0s) infinite ease-in-out;
}

.anim-cahaya {
  animation: a-cahaya var(--durasi, 2.6s) var(--jeda, 0s) infinite ease-in-out;
}

.anim-cahaya-emas {
  animation: a-cahaya-emas var(--durasi, 3s) var(--jeda, 0s) infinite ease-in-out;
}

.anim-goyang {
  animation: a-goyang var(--durasi, 1.6s) var(--jeda, 0s) infinite ease-in-out;
}

.anim-getar {
  animation: a-getar 0.5s ease-in-out;
}

.anim-putar-pelan {
  animation: a-putar var(--durasi, 26s) linear infinite;
}

.anim-ken-burns {
  animation: a-ken-burns var(--durasi, 14s) linear forwards;
}

.anim-nafas-api {
  animation: a-nafas-api var(--durasi, 0.9s) infinite ease-in-out;
}

.anim-gelombang {
  animation: a-gelombang var(--durasi, 3s) var(--jeda, 0s) infinite ease-in-out;
}

/* Muncul sekali */
.anim-naik   { animation: a-naik   var(--durasi, 0.8s) var(--jeda, 0s) both cubic-bezier(0.16, 1, 0.3, 1); }
.anim-turun  { animation: a-turun  var(--durasi, 0.8s) var(--jeda, 0s) both cubic-bezier(0.16, 1, 0.3, 1); }
.anim-fade   { animation: a-fade-in var(--durasi, 0.7s) var(--jeda, 0s) both ease; }
.anim-zoom   { animation: a-zoom-in var(--durasi, 0.7s) var(--jeda, 0s) both cubic-bezier(0.34, 1.56, 0.64, 1); }
.anim-lembut { animation: a-masuk-lembut var(--durasi, 0.95s) var(--jeda, 0s) both cubic-bezier(0.16, 1, 0.3, 1); }

/* =========================================================
   KILAU — sapuan cahaya melintas (dipakai tombol & kotak hadiah)
========================================================= */
.kilau { position: relative; overflow: hidden; }

.kilau::after {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: a-kilau var(--durasi, 3.4s) var(--jeda, 1s) infinite;
  pointer-events: none;
}

/* =========================================================
   PARALLAX
   Elemen dengan [data-parallax] digerakkan oleh anim.js.
   Class ini hanya memberi transisi supaya tidak patah-patah.
========================================================= */
[data-parallax] {
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================
   JEDA BERTAHAP — untuk daftar
   <li class="anim-naik" style="--jeda: calc(var(--i) * 80ms)">
========================================================= */
.jeda-1 { --jeda: 0.08s; }
.jeda-2 { --jeda: 0.16s; }
.jeda-3 { --jeda: 0.24s; }
.jeda-4 { --jeda: 0.32s; }
.jeda-5 { --jeda: 0.40s; }
.jeda-6 { --jeda: 0.48s; }

/* =========================================================
   HEMAT GERAKAN
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .anim-apung, .anim-apung-miring, .anim-denyut, .anim-cahaya,
  .anim-cahaya-emas, .anim-goyang, .anim-putar-pelan,
  .anim-ken-burns, .anim-nafas-api, .anim-gelombang,
  .kilau::after {
    animation: none !important;
  }
  [data-parallax] { transform: none !important; }
}