/* ── Reduce motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Bell shake ────────────────────────────────────────────── */
@keyframes pb-bell-ring {
  0%,100% { transform: rotate(0); }
  15%      { transform: rotate(20deg); }
  30%      { transform: rotate(-18deg); }
  45%      { transform: rotate(12deg); }
  60%      { transform: rotate(-8deg); }
  75%      { transform: rotate(4deg); }
}
#navNotifBtn.ringing svg {
  animation: pb-bell-ring .65s cubic-bezier(.22,1,.36,1) both;
  transform-origin: top center;
}

/* ── Notif badge pulse (loop) ──────────────────────────────── */
@keyframes pb-badge-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232,116,26,.5); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 5px rgba(232,116,26,0); }
}
#navNotifCount { animation: pb-badge-pulse 2s ease-in-out infinite; }

/* ── Cart badge bounce ─────────────────────────────────────── */
@keyframes pb-count-bounce {
  0%,100% { transform: scale(1); }
  40%      { transform: scale(1.4); }
  70%      { transform: scale(.88); }
}
.cart-pill .count.bounce {
  animation: pb-count-bounce .4s cubic-bezier(.22,1,.36,1);
}

/* ── Typing indicator ──────────────────────────────────────── */
@keyframes pb-dot {
  0%,80%,100% { transform: scale(0); opacity:.5; }
  40%          { transform: scale(1); opacity:1; }
}
.pb-typing-dot {
  display: inline-block; width:6px; height:6px;
  background: var(--gold-thread); border-radius: 50%;
  animation: pb-dot 1.4s ease-in-out infinite;
}
.pb-typing-dot:nth-child(2) { animation-delay:.16s; }
.pb-typing-dot:nth-child(3) { animation-delay:.32s; }

/* ── Hover lift (CSS — backup jika GSAP belum load) ───────── */
.buku-card, .langkah-card, .testi-card, .kategori-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
  will-change: transform;
}

/* ── Navbar bell button ────────────────────────────────────── */
#navNotifBtn {
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
#navNotifBtn:hover  { transform: scale(1.07); }
#navNotifBtn:active { transform: scale(.93); }

/* ── Toast ─────────────────────────────────────────────────── */
#pb-toast { transition: opacity .3s ease, transform .3s ease; }
#pb-toast.hiding { opacity: 0; transform: translateX(20px); }

/* ── Chat bubble ───────────────────────────────────────────── */
/* Hook classes: dipakai JS sebagai target animasi (GSAP), isinya
   sengaja tidak diisi lewat CSS statis di sini. */