/* ═══════════════════════════════════════════════════
       CHECKOUT ANIMATIONS
       - Skeleton loading waves
       - Field error shakes
       - UI Transitions
    ═══════════════════════════════════════════════════ */

/* ── Skeleton Wave ── */
.skeleton-text { position: relative; overflow: hidden; background-color: #f0f0f0 !important; }
.skeleton-text::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: skeleton-wave 1.5s infinite;
}
@keyframes skeleton-wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Error Shake ── */
.shake {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ── Generic Pulse ── */
@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* ── Hint Scroll (Tab Hint) ── */
@keyframes hint-scroll {
  0% { transform: translateX(0); }
  15% { transform: translateX(-40px); }
  35% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
  70% { transform: translateX(0); }
}