/* Motion kit Koperasi Insan Sinergi Sejahtera
   Prinsip: konten selalu terlihat tanpa JavaScript; animasi hanya aktif bila
   motion.js menambahkan kelas .kp-anim (tidak aktif jika pengguna memilih "kurangi gerakan"). */

:root {
  --kp-ease: cubic-bezier(.22, .8, .24, 1);
  --kp-dur: .7s;
}

/* ---------- Interaksi (hover/tekan) — aman tanpa JS ---------- */
.btn, .chip, .nav a, .card, .product, .tier, .quote, .faq-item, .side-card, .tip-card {
  transition: transform .28s var(--kp-ease), box-shadow .28s var(--kp-ease),
              background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 122, 67, .18); }
  .btn-outline:hover, .btn-outline-light:hover { box-shadow: 0 8px 20px rgba(0, 112, 138, .16); }
  .card:hover, .tier:hover, .quote:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(11, 43, 48, .09); }
  .product:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(11, 43, 48, .11); border-color: var(--line-input); }
  .product .thumb img { transition: transform .6s var(--kp-ease); }
  .product:hover .thumb img { transform: scale(1.06); }
  .chip:hover { border-color: var(--green); transform: translateY(-1px); }
  .nav a:not(.btn):hover { color: var(--green-ink); }
}
.btn:active, .chip:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn:focus-visible, .chip:focus-visible, .nav a:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* Garis bawah animasi pada tautan navigasi */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; border-radius: 3px;
  background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--kp-ease);
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav a[aria-current="page"]::after { display: none; }

/* Menu ponsel membuka halus */
@media (max-width: 899px) {
  .kp-anim .nav.open { animation: kp-drop .3s var(--kp-ease); }
}

/* Dialog pemesanan */
dialog.checkout[open] { animation: kp-pop .35s var(--kp-ease); }
dialog.checkout[open]::backdrop { animation: kp-fade .3s ease; }

/* Penanda jumlah pesanan "memantul" saat berubah */
.kp-bump { animation: kp-bump .45s var(--kp-ease); display: inline-block; }

/* Pesan status muncul halus */
.status:not(:empty), .error { animation: kp-fade .3s ease; }

/* ---------- Animasi masuk (hanya saat .kp-anim aktif) ---------- */
.kp-anim .rv {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--kp-dur) var(--kp-ease), transform var(--kp-dur) var(--kp-ease);
  transition-delay: var(--kp-d, 0ms);
  will-change: opacity, transform;
}
.kp-anim .rv.rv-left  { transform: translateX(-28px); }
.kp-anim .rv.rv-right { transform: translateX(28px); }
.kp-anim .rv.rv-zoom  { transform: scale(.94); }
.kp-anim .rv.rv-in { opacity: 1; transform: none; will-change: auto; }

/* Hero: muncul berurutan saat halaman dibuka */
.kp-anim .hero-copy > *, .kp-anim .shop-hero > *, .kp-anim .page-head > * {
  animation: kp-rise .8s var(--kp-ease) backwards;
}
.kp-anim .hero-copy > :nth-child(2), .kp-anim .shop-hero > :nth-child(2) { animation-delay: .08s; }
.kp-anim .hero-copy > :nth-child(3), .kp-anim .shop-hero > :nth-child(3) { animation-delay: .16s; }
.kp-anim .hero-copy > :nth-child(4), .kp-anim .shop-hero > :nth-child(4) { animation-delay: .24s; }
.kp-anim .hero-visual { animation: kp-zoom 1s var(--kp-ease) .15s backwards; }
.kp-anim .hero-visual .hero-logo { animation: kp-float 6s ease-in-out 1.2s infinite; }
.kp-anim .hero-visual .waves { animation: kp-drift 9s ease-in-out infinite alternate; transform-origin: center bottom; }
.kp-anim .badge-stat { animation: kp-pop .6s var(--kp-ease) .8s backwards; }

/* Ikon pada kartu bergoyang halus saat kartu disorot */
@media (hover: hover) {
  .card:hover .icon-box { transform: scale(1.08) rotate(-4deg); }
}
.card .icon-box { transition: transform .35s var(--kp-ease); }

@keyframes kp-rise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kp-zoom  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kp-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kp-pop   { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes kp-drop  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes kp-bump  { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes kp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kp-drift { from { transform: translateX(-1.5%) scaleX(1.03); } to { transform: translateX(1.5%) scaleX(1.03); } }

/* ---------- Hormati pengaturan "kurangi gerakan" dan cetak ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .btn:hover, .card:hover, .tier:hover, .quote:hover, .product:hover, .chip:hover { transform: none; }
}
@media print {
  .kp-anim .rv { opacity: 1 !important; transform: none !important; }
}