/* ==========================================================================
   Father Kasir — Motion Kit v1.1
   Animasi beranda: halus, profesional, hemat performa.
   Pasangannya: fk-anim.js (WAJIB, karena kelas .fk-motion dipasang dari JS —
   kalau JS gagal load, semua konten tetap terlihat normal.)
   ========================================================================== */

:root {
  /* Easing & durasi — ubah di sini kalau mau lebih cepat/lambat */
  --fk-ease: cubic-bezier(0.22, 1, 0.36, 1); /* keluar halus, khas fintech */
  --fk-ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --fk-dur: 680ms; /* reveal saat scroll */
  --fk-dur-hero: 820ms; /* intro hero */
  --fk-dur-fast: 240ms; /* hover / state kecil */
  --fk-rise: 20px; /* jarak naik saat muncul */
  --fk-shift: 28px; /* jarak geser kiri/kanan */
  --fk-stagger: 70ms; /* jeda antar item dalam satu grup */
}

/* --------------------------------------------------------------------------
   1. STATE DASAR REVEAL
   Elemen disembunyikan HANYA kalau JS aktif (html.fk-motion).
   -------------------------------------------------------------------------- */

.fk-motion [data-anim] {
  opacity: 0;
  transition:
    opacity var(--fk-dur) var(--fk-ease),
    transform var(--fk-dur) var(--fk-ease),
    filter var(--fk-dur) var(--fk-ease),
    clip-path var(--fk-dur) var(--fk-ease);
  transition-delay: var(--fk-delay, 0ms);
  will-change: opacity, transform;
}

/* varian arah */
.fk-motion [data-anim="rise"],
.fk-motion [data-anim=""] { transform: translate3d(0, var(--fk-rise), 0); }
.fk-motion [data-anim="rise-sm"] { transform: translate3d(0, 10px, 0); }
.fk-motion [data-anim="fade"] { transform: none; }
.fk-motion [data-anim="left"] { transform: translate3d(calc(var(--fk-shift) * -1), 0, 0); }
.fk-motion [data-anim="right"] { transform: translate3d(var(--fk-shift), 0, 0); }
.fk-motion [data-anim="scale"] { transform: scale(0.965) translate3d(0, 12px, 0); }
.fk-motion [data-anim="card"] { transform: translate3d(0, 26px, 0) scale(0.985); }
.fk-motion [data-anim="blur"] { transform: translate3d(0, 12px, 0); filter: blur(8px); }
.fk-motion [data-anim="line"] { transform: translate3d(0, 0.4em, 0); }

/* judul besar: baris demi baris dari bawah (butuh <span class="fk-line"> dari JS) */
.fk-motion [data-anim="mask"] { opacity: 1; }
.fk-motion [data-anim="mask"] .fk-line-mask { overflow: hidden; display: block; padding-bottom: 0.06em; }
.fk-motion [data-anim="mask"] .fk-line-inner {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--fk-dur-hero) var(--fk-ease);
  transition-delay: calc(var(--fk-delay, 0ms) + var(--fk-line-i, 0) * 90ms);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   2. STATE MASUK
   -------------------------------------------------------------------------- */

.fk-motion [data-anim].fk-in {
  opacity: 1;
  transform: none;
  filter: none;
}
.fk-motion [data-anim="mask"].fk-in .fk-line-inner { transform: none; }

/* elemen di dalam hero pakai durasi hero */
.fk-motion .fk-hero [data-anim] { transition-duration: var(--fk-dur-hero); }

/* --------------------------------------------------------------------------
   3. GARIS & PROGRESS YANG "DIGAMBAR"
   -------------------------------------------------------------------------- */

/* garis penghubung antar langkah (1 → 2 → 3) */
.fk-motion [data-anim="grow-x"] {
  opacity: 1;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--fk-ease);
  transition-delay: var(--fk-delay, 0ms);
}
.fk-motion [data-anim="grow-x"].fk-in { transform: scaleX(1); }

.fk-motion [data-anim="grow-y"] {
  opacity: 1;
  transform-origin: center top;
  transform: scaleY(0);
  transition: transform 900ms var(--fk-ease);
  transition-delay: var(--fk-delay, 0ms);
}
.fk-motion [data-anim="grow-y"].fk-in { transform: scaleY(1); }

/* centang / ikon SVG yang tergambar sendiri */
.fk-motion [data-anim="draw"] { opacity: 1; }
.fk-motion [data-anim="draw"] .fk-draw {
  stroke-dasharray: var(--fk-len, 200);
  stroke-dashoffset: var(--fk-len, 200);
  transition: stroke-dashoffset 900ms var(--fk-ease-soft);
  transition-delay: var(--fk-delay, 0ms);
}
.fk-motion [data-anim="draw"].fk-in .fk-draw { stroke-dashoffset: 0; }

/* bar harga / meter */
.fk-motion [data-anim="bar"] {
  opacity: 1;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1000ms var(--fk-ease);
  transition-delay: var(--fk-delay, 0ms);
}
.fk-motion [data-anim="bar"].fk-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   4. NAVBAR SAAT SCROLL
   -------------------------------------------------------------------------- */

[data-fk-nav] {
  transition:
    background-color var(--fk-dur-fast) ease,
    box-shadow var(--fk-dur-fast) ease,
    border-color var(--fk-dur-fast) ease,
    padding var(--fk-dur-fast) ease,
    backdrop-filter var(--fk-dur-fast) ease;
  border-bottom: 1px solid transparent;
}
[data-fk-nav].fk-nav-scrolled {
  background-color: var(--fk-nav-bg, rgba(240, 243, 235, 0.82));
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--fk-nav-border, rgba(15, 20, 24, 0.08));
}
/* sembunyikan nav saat scroll ke bawah, tampilkan saat scroll ke atas (opsional) */
[data-fk-nav][data-fk-nav-hide].fk-nav-up { transform: translateY(0); }
[data-fk-nav][data-fk-nav-hide].fk-nav-down { transform: translateY(-102%); }
[data-fk-nav][data-fk-nav-hide] { transition: transform 380ms var(--fk-ease), background-color var(--fk-dur-fast) ease, border-color var(--fk-dur-fast) ease; }

/* garis progres baca di bawah navbar */
.fk-progress {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: var(--fk-accent, #2f9fe1);
  z-index: 9999; pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. HOVER / MIKRO-INTERAKSI
   -------------------------------------------------------------------------- */

.fk-lift {
  transition:
    transform var(--fk-dur-fast) var(--fk-ease),
    box-shadow var(--fk-dur-fast) var(--fk-ease),
    border-color var(--fk-dur-fast) ease;
}
@media (hover: hover) {
  .fk-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -14px rgba(15, 20, 24, 0.28);
  }
}

.fk-press { transition: transform 140ms var(--fk-ease), box-shadow var(--fk-dur-fast) var(--fk-ease), opacity var(--fk-dur-fast) ease; }
.fk-press:active { transform: scale(0.975); }
@media (hover: hover) {
  .fk-press:hover { box-shadow: 0 10px 26px -12px rgba(15, 20, 24, 0.45); }
}

/* panah kecil yang maju saat hover */
.fk-arrow { display: inline-block; transition: transform var(--fk-dur-fast) var(--fk-ease); }
@media (hover: hover) {
  .fk-press:hover .fk-arrow,
  .fk-link:hover .fk-arrow { transform: translateX(4px); }
}

/* garis bawah tumbuh pada link nav */
.fk-link { position: relative; }
.fk-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 320ms var(--fk-ease);
}
@media (hover: hover) {
  .fk-link:hover::after { transform: scaleX(1); transform-origin: left center; }
}

/* kilau halus melintasi kartu saat hover */
.fk-sheen { position: relative; overflow: hidden; }
.fk-sheen::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%);
  transform: translateX(-120%); opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .fk-sheen:hover::before { opacity: 1; transform: translateX(120%); transition: transform 900ms var(--fk-ease-soft), opacity 200ms ease; }
}

/* --------------------------------------------------------------------------
   6. AKSEN HIDUP (loop halus)
   -------------------------------------------------------------------------- */

/* titik status "Pendaftaran dibuka" */
.fk-pulse { position: relative; }
.fk-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: currentColor; opacity: 0.45;
  animation: fk-pulse 2.4s var(--fk-ease-soft) infinite;
}
@keyframes fk-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* kursor berkedip di sebelah headline */
.fk-caret { animation: fk-blink 1.15s steps(1, end) infinite; }
@keyframes fk-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }

/* --------------------------------------------------------------------------
   6b. EFEK MENGETIK (<h1 data-fk-type>)
   Salinan "hantu" mengunci tinggi & pemenggalan baris → tidak ada layout shift.
   Salinan "hidup" ditumpuk persis di atasnya dan diisi huruf demi huruf.
   -------------------------------------------------------------------------- */

.fk-type-host { position: relative; display: block; }
.fk-type-host .fk-type-ghost { visibility: hidden; display: block; }
.fk-type-host .fk-type-live {
  position: absolute; left: 0; top: 0; width: 100%; display: block;
}
/* tiap baris jadi blok sendiri supaya salinan hidup & hantu persis sejajar */
.fk-type-host .fk-line { display: block; }

.fk-type-caret {
  display: inline-block;
  width: 0.055em; min-width: 3px; height: 0.78em;
  background: var(--fk-caret-color, var(--fk-accent, currentColor)); border-radius: 1px;
  vertical-align: -0.06em; margin-left: 0.09em;
  animation: fk-blink 1.15s steps(1, end) infinite;
}
/* selama mengetik kursornya menyala terus — baru berkedip setelah selesai */
.fk-typing .fk-type-caret { animation: none; opacity: 1; }

/* kartu hero mengambang sangat pelan */
.fk-float { animation: fk-float 7s ease-in-out infinite; }
@keyframes fk-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* cincin lembut di sekitar ikon centang */
.fk-ring::before,
.fk-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 1.5px solid currentColor; opacity: 0;
  animation: fk-ring 3.6s var(--fk-ease-soft) infinite;
}
.fk-ring::after { animation-delay: 1.2s; }
@keyframes fk-ring {
  0% { transform: scale(1); opacity: 0.35; }
  60% { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* baris logo metode pembayaran berjalan pelan */
.fk-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fk-marquee__track { display: flex; width: max-content; animation: fk-marquee var(--fk-marquee-dur, 38s) linear infinite; }
.fk-marquee:hover .fk-marquee__track { animation-play-state: paused; }
@keyframes fk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   7. AKORDEON (Tanya jawab)
   -------------------------------------------------------------------------- */

[data-fk-panel] {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--fk-ease), opacity 300ms ease;
  opacity: 0;
}
[data-fk-panel] > * { overflow: hidden; }
[data-fk-item].fk-open > [data-fk-panel] { grid-template-rows: 1fr; opacity: 1; }
[data-fk-icon] { transition: transform 380ms var(--fk-ease); }
[data-fk-item].fk-open [data-fk-icon] { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   8. ANGKA BERJALAN
   -------------------------------------------------------------------------- */

[data-fk-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9. HORMATI PREFERENSI PENGGUNA
   Kalau OS-nya minta "kurangi gerak", semua animasi dimatikan — konten
   langsung tampil utuh. Ini penting untuk aksesibilitas.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fk-motion [data-anim],
  .fk-motion [data-anim].fk-in,
  .fk-motion [data-anim] * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .fk-motion [data-anim="draw"] .fk-draw { stroke-dashoffset: 0 !important; }
  .fk-pulse::after, .fk-caret, .fk-float, .fk-ring::before, .fk-ring::after,
  .fk-marquee__track { animation: none !important; }
  .fk-sheen::before { display: none; }
  * { scroll-behavior: auto !important; }
}