/* ============================================================
   Webvora - animasi scroll lembut
   Memakai properti `translate` & `scale` (terpisah dari `transform`)
   supaya tidak bentrok dengan efek hover Tailwind.
   ============================================================ */
:root {
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --rv-dist: 28px;
  --rv-dur: 900ms;
}

/* ---------- Reveal saat scroll ---------- */
.js-anim [data-reveal] {
  opacity: 0;
  translate: 0 var(--rv-dist);
  transition:
    opacity var(--rv-dur) var(--ease-soft) var(--rv-delay, 0ms),
    translate var(--rv-dur) var(--ease-soft) var(--rv-delay, 0ms),
    scale var(--rv-dur) var(--ease-soft) var(--rv-delay, 0ms);
  will-change: opacity, translate;
}
.js-anim[data-anim="fade"] [data-reveal]        { translate: 0 0; }
.js-anim[data-anim="zoom"] [data-reveal]        { translate: 0 0; scale: .94; }
.js-anim[data-anim="fade-left"] [data-reveal]   { translate: calc(var(--rv-dist) * -1.4) 0; }
.js-anim[data-anim="fade-right"] [data-reveal]  { translate: calc(var(--rv-dist) * 1.4) 0; }
.js-anim [data-reveal][data-reveal-style="zoom"] { translate: 0 0; scale: .95; }

.js-anim [data-reveal].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
/* setelah selesai, lepas will-change agar hemat memori */
.js-anim [data-reveal].rv-done { will-change: auto; }

/* ---------- Bar progres scroll ---------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #004ac6, #2563eb 55%, #007d55);
  opacity: 0; transition: opacity .4s var(--ease-soft);
  pointer-events: none;
}
#scroll-progress.on { opacity: 1; }

/* ---------- Header ---------- */
#site-header.is-scrolled { box-shadow: 0 6px 24px rgba(19, 27, 46, .08); }
.nav-link { transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft); }

/* ---------- Marquee klien ---------- */
.marquee-track { animation: marquee 32s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Tombol WhatsApp mengambang ---------- */
.float-wa { animation: float-in 1s var(--ease-soft) 1.2s both; }
@keyframes float-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

/* ---------- FAQ ---------- */
.faq-item { overflow: hidden; }

/* ---------- Hormati preferensi "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-reveal] { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; transition: none !important; }
  .marquee-track, .float-wa { animation: none !important; }
  #scroll-progress { display: none; }
  html { scroll-behavior: auto !important; }
}