/**
 * MB4 Category 14 — Micro-interactions on mobile
 * Tap feedback, smooth transitions, pulse indicators.
 */

@media (max-width: 768px) {
  button, .clickable, .card, .nav-item, [role="button"] {
    transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 120ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  button:active,
  .clickable:active,
  .card:active,
  .nav-item:active,
  [role="button"]:active {
    transform: scale(0.97);
    opacity: 0.92;
  }

  /* Loading skeleton shimmer */
  .mobile-skeleton {
    background: linear-gradient(90deg, #0F1724 0%, #1e293b 50%, #0F1724 100%);
    background-size: 600px 100%;
    animation: mbMobileShimmer 1.4s linear infinite;
    border-radius: 8px;
    min-height: 16px;
  }
  @keyframes mbMobileShimmer {
    0%   { background-position: -300px 0; }
    100% { background-position:  300px 0; }
  }

  /* Pulse indicator — gold glow for urgent/live */
  @keyframes mb4PulseGold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(212, 175, 55, 0); }
  }
  .pulse-urgent,
  [data-urgent="true"] {
    animation: mb4PulseGold 2s infinite;
  }

  /* Red-glow alert (overdue leads) */
  @keyframes mb4PulseRed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  }
  .overdue-glow,
  [data-overdue="true"] {
    animation: mb4PulseRed 2.4s infinite;
  }

  /* Page fade-in choreography (coordinates with safe-navigate) */
  .content-area {
    animation: mb4PageFadeIn 240ms cubic-bezier(0, 0, 0.2, 1);
  }
  @keyframes mb4PageFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }

  body.page-leaving .content-area {
    animation: mb4PageFadeOut 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
  }
  @keyframes mb4PageFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; transform: translateY(-2px); }
  }

  /* Tap ripple (compatible with Ripple effect from material design) */
  .mb4-ripple {
    position: relative;
    overflow: hidden;
  }
  .mb4-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 250ms;
    pointer-events: none;
  }
  .mb4-ripple:active::after {
    opacity: 1;
  }

  /* Tablet with mouse — hover states */
  @media (hover: hover) {
    .card:hover,
    .mb4-card:hover {
      border-color: rgba(212, 175, 55, 0.3) !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
  }
}

/* Respect reduced-motion even on mobile */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}