/* ============================================================
   ANIMASI HALAMAN PUBLIK
   Brutalist: gerak pendek, tegas, tidak halus excessive.
   Semua dinonaktifkan otomatis bila pengguna memilih
   "kurangi gerakan" di sistemnya.
   ============================================================ */

/* ---------- TOMBOL KELOMPOK BERGERAK ---------- */
.anim-rise {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s var(--e), transform .5s var(--e);
}
.anim-rise.tampil { opacity: 1; transform: none; }
.anim-rise.d-1 { transition-delay: .06s; }
.anim-rise.d-2 { transition-delay: .12s; }
.anim-rise.d-3 { transition-delay: .18s; }
.anim-rise.d-4 { transition-delay: .24s; }

/* ---------- HITUNG ANGKA MENGATUR ---------- */
.anim-angka { font-variant-numeric: tabular-nums; }

/* ---------- TITIK "LIVE" BERDENYUT ---------- */
.anim-live {
  display: inline-block; width: 9px; height: 9px; flex: none;
  border-radius: 99px; background: var(--lime);
  border: 2px solid var(--ink);
  animation: anim-denut 1.6s ease-in-out infinite;
}
@keyframes anim-denut {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 255, 58, .85); }
  50%      { box-shadow: 0 0 0 7px rgba(200, 255, 58, 0); }
}

/* ---------- STICKER HERO GOYANG SEDIKIT ---------- */
.anim-sticker { animation: anim-goyang 3.6s ease-in-out infinite; transform-origin: center; }
@keyframes anim-goyang {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-4px); }
}

/* ---------- PANEL AKTIVITAS BERJALAN ---------- */
.anim-panel { position: relative; overflow: hidden; }
.anim-panel::after {
  /* Gradien tipis biar feed terlihat "terus mengalir" saat marquee jalan. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(239, 232, 216, .95) 0%, transparent 18%, transparent 82%, rgba(239, 232, 216, .95) 100%);
}
.anim-marquee { display: flex; gap: 10px; will-change: transform; }
.anim-marquee.jalan { animation: anim-marquee var(--kecepatan, 26s) linear infinite; }
@keyframes anim-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.anim-marquee:hover { animation-play-state: paused; }

/* ---------- TOMBOL WHATSAPP MELAYANG ---------- */
.anim-wa {
  position: fixed; z-index: 55;
  right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px 11px 13px;
  background: var(--lime); color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: 99px;
  box-shadow: var(--shadow);
  font: 800 14px/1 system-ui, sans-serif;
  animation: anim-melayang 3.2s ease-in-out infinite;
  transition: transform .14s var(--e), box-shadow .14s var(--e);
}
.anim-wa:hover { animation-play-state: paused; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.anim-wa svg { width: 20px; height: 20px; }
/* Cincin denyut di belakang tombol. */
.anim-wa::before {
  content: ''; position: absolute; inset: -5px; z-index: -1;
  border: 3px solid var(--ink); border-radius: 99px;
  animation: anim-cincin 2.4s ease-out infinite;
}
@keyframes anim-cincin {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}
@keyframes anim-melayang {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
/* Naik agar tidak menutup bottom nav mobile. */
@media (max-width: 899px) {
  .anim-wa { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 900px) {
  .anim-wa { right: 26px; bottom: 26px; }
}
/* Di layar sangat pendek, tombol hanya ikon supaya tidak memakan tempat. */
@media (max-height: 520px) {
  .anim-wa span { display: none; }
  .anim-wa { padding: 12px; }
}

/* ---------- AKSESIBILITAS: HORMATI PENGATURAN SISTEM ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim-live, .anim-sticker, .anim-wa, .anim-wa::before, .anim-marquee.jalan {
    animation: none !important;
  }
  .anim-wa:hover { transform: none; }
}