/* ================================================================
   FinanceKu — animations.css
   Infrastruktur animasi 3D & motion untuk seluruh situs.
   Dipakai bersama main.css & components.css yang sudah ada.
================================================================ */

/* ── KEYFRAMES ── */

@keyframes fk-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(.6deg); }
}
@keyframes fk-float-slow {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-9px); }
}
@keyframes fk-pulse-glow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.06); }
}
@keyframes fk-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fk-reveal-up {
  from { opacity: 0; transform: translateY(38px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fk-reveal-left {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fk-reveal-right {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fk-reveal-scale {
  from { opacity: 0; transform: scale(.82) rotateX(8deg); }
  to   { opacity: 1; transform: scale(1) rotateX(0deg); }
}
@keyframes fk-pop-in {
  0%   { opacity: 0; transform: scale(.4) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes fk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes fk-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fk-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes fk-draw-ring {
  from { stroke-dashoffset: 100; }
}
@keyframes fk-confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(340px) rotate(540deg); opacity: 0; }
}
@keyframes fk-check-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes fk-badge-tick {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

/* ── UTILITAS SCROLL-REVEAL (dikendalikan JS via IntersectionObserver) ── */
.fk-reveal {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.fk-reveal.fk-up     { transform: translateY(38px); }
.fk-reveal.fk-left    { transform: translateX(-34px); }
.fk-reveal.fk-right   { transform: translateX(34px); }
.fk-reveal.fk-scale   { transform: scale(.85); }
.fk-reveal.fk-visible {
  opacity: 1;
  transform: translate(0,0) scale(1);
}
/* Stagger delay helper - dipasang otomatis via JS berdasarkan index */
.fk-reveal[data-fk-delay="1"] { transition-delay: .08s; }
.fk-reveal[data-fk-delay="2"] { transition-delay: .16s; }
.fk-reveal[data-fk-delay="3"] { transition-delay: .24s; }
.fk-reveal[data-fk-delay="4"] { transition-delay: .32s; }
.fk-reveal[data-fk-delay="5"] { transition-delay: .40s; }
.fk-reveal[data-fk-delay="6"] { transition-delay: .48s; }
.fk-reveal[data-fk-delay="7"] { transition-delay: .56s; }
.fk-reveal[data-fk-delay="8"] { transition-delay: .64s; }

/* Varian "tenang" — gerakan lebih kecil & durasi lebih cepat, dipakai
   di halaman dashboard yang dibuka berkali-kali sehari. Landing page
   tetap pakai gerakan penuh (.fk-up/.fk-scale biasa) karena itu momen
   "wow" untuk pengunjung baru, bukan sesuatu yang dilihat berulang. */
.fk-reveal.fk-calm {
  transition-duration: .4s;
}
.fk-reveal.fk-calm.fk-up    { transform: translateY(14px); }
.fk-reveal.fk-calm.fk-left  { transform: translateX(-12px); }
.fk-reveal.fk-calm.fk-right { transform: translateX(12px); }
.fk-reveal.fk-calm.fk-scale { transform: scale(.96); }

/* ── HERO MOCKUP 3D MENGAMBANG ── */
.fk-hero-3d-stage {
  perspective: 1400px;
  position: relative;
}
.fk-hero-3d-card {
  animation: fk-float 6s ease-in-out infinite;
  transform-style: preserve-3d;
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.fk-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  animation: fk-pulse-glow 5s ease-in-out infinite;
  pointer-events: none;
}

/* ── GRADIENT MESH BERGERAK ── */
.fk-gradient-mesh {
  background-size: 200% 200%;
  animation: fk-gradient-shift 10s ease infinite;
}

/* ── ANGKA COUNT-UP ── */
.fk-count { font-variant-numeric: tabular-nums; }

/* ── SHIMMER LOADING ── */
.fk-shimmer {
  background: linear-gradient(90deg, var(--bg-surface) 0%, rgba(255,255,255,.35) 50%, var(--bg-surface) 100%);
  background-size: 800px 100%;
  animation: fk-shimmer 1.6s linear infinite;
}

/* ── BAR CHART TUMBUH ── */
.fk-bar-animated {
  transform-origin: bottom;
  animation: fk-bar-grow .7s cubic-bezier(.2,.8,.2,1) both;
}

/* ── DONUT CHART GAMBAR ── */
.fk-donut-animated circle {
  animation: fk-draw-ring 1s cubic-bezier(.2,.8,.2,1) both;
}
.donut-wrapper circle {
  transition: stroke-dasharray .9s cubic-bezier(.2,.8,.2,1), stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1);
}
.cat-bar-fill {
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}

/* ── CONFETTI (untuk perayaan target tabungan tercapai) ── */
.fk-confetti-piece {
  position: fixed;
  top: -20px;
  width: 9px; height: 9px;
  border-radius: 2px;
  animation: fk-confetti-fall 2.6s ease-in forwards;
  pointer-events: none;
  z-index: 2000;
}

/* ── ICON POP (badge centang, ikon achievement) ── */
.fk-pop { animation: fk-pop-in .5s cubic-bezier(.2,.8,.2,1) both; }
.fk-check-pop { animation: fk-check-pop .45s cubic-bezier(.34,1.56,.64,1) both; }
.fk-badge-tick:hover { animation: fk-badge-tick .5s ease; }

/* ── FLOAT AMBIENT (untuk elemen dekoratif kecil) ── */
.fk-float-ambient { animation: fk-float-slow 4.5s ease-in-out infinite; }

/* ── BUTTON PRESS 3D ── */
.fk-btn-3d {
  transform-style: preserve-3d;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.fk-btn-3d:hover { transform: translateY(-3px); }
.fk-btn-3d:active { transform: translateY(0) scale(.97); }

/* ── MAGNETIC HOVER LIFT (kartu dashboard, feature card) ── */
.fk-lift {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.fk-lift:hover {
  transform: translateY(-6px);
}

/* ── SPIN LAMBAT (dekorasi ring di sekitar ikon) ── */
.fk-spin-slow { animation: fk-spin-slow 14s linear infinite; }

/* ── BARIS TABEL — fade-up stagger otomatis via nth-child ── */
.fk-table-animated tbody tr {
  opacity: 0;
  animation: fk-reveal-up .5s cubic-bezier(.2,.8,.2,1) both;
}
.fk-table-animated tbody tr:nth-child(1)  { animation-delay: .03s; }
.fk-table-animated tbody tr:nth-child(2)  { animation-delay: .06s; }
.fk-table-animated tbody tr:nth-child(3)  { animation-delay: .09s; }
.fk-table-animated tbody tr:nth-child(4)  { animation-delay: .12s; }
.fk-table-animated tbody tr:nth-child(5)  { animation-delay: .15s; }
.fk-table-animated tbody tr:nth-child(6)  { animation-delay: .18s; }
.fk-table-animated tbody tr:nth-child(7)  { animation-delay: .21s; }
.fk-table-animated tbody tr:nth-child(8)  { animation-delay: .24s; }
.fk-table-animated tbody tr:nth-child(9)  { animation-delay: .27s; }
.fk-table-animated tbody tr:nth-child(10) { animation-delay: .30s; }
.fk-table-animated tbody tr:nth-child(n+11) { animation-delay: .32s; }
.fk-table-animated tbody tr:hover {
  background: var(--bg-surface);
}

/* ── RESPECT REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .fk-reveal, .fk-hero-3d-card, .fk-glow-orb, .fk-gradient-mesh,
  .fk-bar-animated, .fk-donut-animated circle, .fk-float-ambient,
  .fk-spin-slow, .fk-table-animated tbody tr {
    animation: none !important;
    transition: opacity .3s ease !important;
    transform: none !important;
    opacity: 1 !important;
  }
}