/* ===== MODULE 15.57 — MICRO INTERACTIONS ===== */
/* UI chrome feedback only. No VOID card transform ownership, no pack logic, no JS dependency. */

@layer overrides {
  :root {
    --ui-hover-lift: -1px;
    --ui-press-lift: 0px;
    --ui-transition-fast: 140ms;
    --ui-transition-med: 220ms;
    --ui-focus-ring: rgba(185, 124, 255, .72);
    --ui-glow-soft: 0 0 28px rgba(123, 43, 255, .16);
  }

  button,
  .btn,
  .nav-item,
  .sidebar-link,
  .tab-button,
  .filter-chip,
  .rarity-filter,
  .family-filter,
  .open-pack-button,
  .opening-primary-action,
  .pack-primary-action,
  .booster-primary-action,
  [data-nav],
  [data-view-button],
  [data-action] {
    transition:
      color var(--ui-transition-fast) ease,
      background var(--ui-transition-fast) ease,
      border-color var(--ui-transition-fast) ease,
      box-shadow var(--ui-transition-med) ease,
      opacity var(--ui-transition-fast) ease,
      filter var(--ui-transition-fast) ease,
      transform var(--ui-transition-fast) ease;
  }

  button:not(:disabled):hover,
  .btn:not(:disabled):hover,
  .tab-button:not(:disabled):hover,
  .filter-chip:not(:disabled):hover,
  .rarity-filter:not(:disabled):hover,
  .family-filter:not(:disabled):hover,
  [data-action]:not(:disabled):hover {
    filter: brightness(1.06);
  }

  button:not(:disabled):active,
  .btn:not(:disabled):active,
  .tab-button:not(:disabled):active,
  .filter-chip:not(:disabled):active,
  .rarity-filter:not(:disabled):active,
  .family-filter:not(:disabled):active,
  [data-action]:not(:disabled):active {
    transform: translateY(var(--ui-press-lift));
    filter: brightness(.98);
  }

  button:disabled,
  .btn:disabled,
  .tab-button:disabled,
  .open-pack-button:disabled,
  [data-action]:disabled {
    cursor: not-allowed;
    opacity: .48;
    filter: grayscale(.18);
    box-shadow: none;
  }

  a,
  .link,
  .text-link {
    color: var(--void-primary-soft, #b97cff);
    text-decoration-color: rgba(185, 124, 255, .38);
    text-underline-offset: .22em;
    transition:
      color var(--ui-transition-fast) ease,
      text-decoration-color var(--ui-transition-fast) ease,
      filter var(--ui-transition-fast) ease;
  }

  a:hover,
  .link:hover,
  .text-link:hover {
    color: var(--void-text, #f3ecff);
    text-decoration-color: rgba(185, 124, 255, .72);
    filter: drop-shadow(0 0 10px rgba(185, 124, 255, .18));
  }

  input,
  textarea,
  select {
    transition:
      border-color var(--ui-transition-fast) ease,
      box-shadow var(--ui-transition-fast) ease,
      background var(--ui-transition-fast) ease,
      color var(--ui-transition-fast) ease;
  }

  input:hover,
  textarea:hover,
  select:hover {
    border-color: rgba(185, 124, 255, .28);
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--ui-focus-ring);
    outline-offset: 2px;
    box-shadow:
      0 0 0 4px rgba(123, 43, 255, .12),
      var(--ui-glow-soft);
  }

  .interactive-card,
  .collection-card,
  .card-tile,
  .owned-card,
  .pack-opening-panel,
  .opening-panel,
  .inspect-panel,
  .collection-header {
    transition:
      border-color var(--ui-transition-fast) ease,
      box-shadow var(--ui-transition-med) ease,
      background var(--ui-transition-med) ease,
      filter var(--ui-transition-fast) ease;
  }

  .is-loading,
  [aria-busy="true"] {
    cursor: progress;
  }

  .skeleton,
  .loading-skeleton,
  .card-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card, 22px);
    background:
      linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)),
      rgba(8, 4, 18, .64);
    background-size: 220% 100%;
    animation: voidSkeletonSweep 1.4s ease-in-out infinite;
  }

  .empty-state,
  .collection-empty,
  .empty-collection,
  .collection-state-empty {
    position: relative;
  }

  .empty-state::after,
  .collection-empty::after,
  .empty-collection::after,
  .collection-state-empty::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: inherit;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .035);
    opacity: .7;
  }

  .toast,
  .notification,
  .snackbar {
    border: 1px solid rgba(185, 124, 255, .2);
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
      rgba(8, 4, 18, .92);
    color: var(--void-text, #f3ecff);
    box-shadow:
      0 18px 54px rgba(0,0,0,.34),
      0 0 30px rgba(123, 43, 255, .14);
    backdrop-filter: blur(var(--blur-panel, 18px));
  }

  @keyframes voidSkeletonSweep {
    0% {
      background-position: 120% 0;
    }

    100% {
      background-position: -120% 0;
    }
  }

  @media (hover: none) {
    button:not(:disabled):hover,
    .btn:not(:disabled):hover,
    .tab-button:not(:disabled):hover,
    .filter-chip:not(:disabled):hover,
    .rarity-filter:not(:disabled):hover,
    .family-filter:not(:disabled):hover,
    [data-action]:not(:disabled):hover {
      filter: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto;
    }

    .skeleton,
    .loading-skeleton,
    .card-skeleton {
      animation: none;
      background-size: 100% 100%;
    }
  }
}