/* =========================================================
   fx.css: gerak dan efek bersama (semua halaman)
   Semua gerak dimatikan bila pengguna memilih "kurangi gerak".
   ========================================================= */
:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --progress: linear-gradient(90deg, var(--navy), var(--cerulean), var(--spring));
}

/* Muncul saat digulir (aktif hanya bila JS berjalan) */
.js-motion .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-motion .reveal.in { opacity: 1; transform: none; }

/* Garis kemajuan gulir */
.scroll-progress {
  position: fixed; left: 0; top: env(safe-area-inset-top, 0px); z-index: 90;
  width: 100%; height: 3px; pointer-events: none;
  background: var(--progress); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

/* Header saat digulir */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.scrolled { box-shadow: 0 10px 28px -18px rgba(19, 37, 116, .55); }
.brand-logo { transition: transform .5s var(--ease-out); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.06); }

/* Kilau pada tombol */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.btn:hover::after, .gate-card:hover .btn::after { transform: translateX(120%); }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* Tombol chat melayang: denyut lembut 3 kali, lalu diam */
.wa-float { transition: transform .3s var(--ease-out), background-color .2s ease; }
.wa-float:hover { transform: translateY(-3px) scale(1.03); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: wa-pulse 2.4s ease-out 2.5s 3;
}
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(26, 127, 74, .55); }
  100% { box-shadow: 0 0 0 20px rgba(26, 127, 74, 0); }
}

/* Logo mitra dan kartu verifikasi */
.verify-link .vi { animation: shield-glow 3.6s ease-in-out infinite; }
@keyframes shield-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(23, 112, 63, 0)); } 50% { filter: drop-shadow(0 0 6px rgba(23, 112, 63, .45)); } }
.footer-partners a, a.badge-white { transition: transform .3s var(--ease-out); }
.footer-partners a:hover, a.badge-white:hover { transform: translateY(-3px); }

/* Gambar membesar halus saat disorot */
.zoom { overflow: hidden; }
.zoom img { transition: transform .9s var(--ease-out); }
:is(a, article, figure, div):hover > .zoom img, .zoom:hover img { transform: scale(1.06); }

/* Masuk halaman: naik perlahan */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float-y { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; }
  .scroll-progress { display: none; }
}

/* Teks bergradasi: beri ruang agar ujung huruf tidak terpotong */
.gate-title em, .grad-text, .figure .num { padding-block: .06em .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.figure .num { display: inline-block; line-height: 1.1; }
.hero-title { line-height: 1.08; padding-top: .12em; padding-bottom: .08em; }
.figure .num { padding-top: .14em; }