/* Page transitions */
@keyframes zb-pt-fwd-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zb-pt-back-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zb-pt-tab-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.zb-pt-fwd  { animation: zb-pt-fwd-in  .28s cubic-bezier(.2,.8,.2,1) both; }
.zb-pt-back { animation: zb-pt-back-in .28s cubic-bezier(.2,.8,.2,1) both; }
.zb-pt-tab  { animation: zb-pt-tab-in  .22s cubic-bezier(.2,.8,.2,1) both; }

/* Toast */
@keyframes zb-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Press feedback for interactive cards */
.zb-press {
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zb-press:active { transform: scale(0.97); }

/* Shake (wrong answer) */
@keyframes zb-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.zb-shake { animation: zb-shake .35s ease-in-out; }

/* Pulse ring */
@keyframes zb-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 176, 74, 0.55); }
  70% { box-shadow: 0 0 0 18px rgba(232, 176, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 176, 74, 0); }
}
.zb-ring-pulse { animation: zb-ring-pulse 1.6s ease-out infinite; }

/* Pop in */
@keyframes zb-pop-in {
  0% { opacity: 0; transform: scale(0.7); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.zb-pop-in { animation: zb-pop-in .45s cubic-bezier(.34,1.56,.64,1) both; }

/* Slide up */
@keyframes zb-slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.zb-slide-up { animation: zb-slide-up .35s cubic-bezier(.2,.8,.2,1) both; }

/* Stagger helper — apply with --i */
.zb-stagger { animation: zb-slide-up .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }

/* Glow */
@keyframes zb-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 176, 74, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(232, 176, 74, 0.7)); }
}
.zb-glow { animation: zb-glow 2s ease-in-out infinite; }

/* Hide scrollbars on the prototype */
.zb-noscroll::-webkit-scrollbar { display: none; }
.zb-noscroll { scrollbar-width: none; }

/* Avoid double-tap zoom */
.zb-proto button, .zb-proto [role="button"] { touch-action: manipulation; }