/* ═══════════════════════════════════════════════════════════
   micro-interactions.css  v1.0  — RUB383
   Premium micro-interaction layer for LexNadlan
   ═══════════════════════════════════════════════════════════
   SCOPE   : Additive only — zero existing rules overwritten
   TIMING  : Hover 120-160ms · Press < 80ms · Reveal 140-160ms
   MOTION  : Full prefers-reduced-motion support
   LOADS   : After ux-polish-v2.css (highest-priority layer)
   ═══════════════════════════════════════════════════════════ */

/* ── 0. TIMING TOKENS ────────────────────────────────────── */
:root {
  --mi-dur-hover  : 140ms;
  --mi-dur-press  : 70ms;
  --mi-dur-reveal : 155ms;
  --mi-ease-out   : cubic-bezier(0.22, 1, 0.36, 1);
  --mi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mi-scale-hover: 1.016;
  --mi-scale-press: 0.979;
}


/* ══════════════════════════════════════════════════════════
   1. SECTION REVEAL — fade-up on load & scroll
   ══════════════════════════════════════════════════════════ */

@keyframes mi-reveal {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Utility class — applied by JS or manually */
.mi-reveal {
  animation: var(--mi-dur-reveal) var(--mi-ease-out) both mi-reveal;
}

/* Stagger helpers for sibling sections */
.mi-reveal-1 { animation-delay:   0ms; }
.mi-reveal-2 { animation-delay:  45ms; }
.mi-reveal-3 { animation-delay:  90ms; }
.mi-reveal-4 { animation-delay: 135ms; }
.mi-reveal-5 { animation-delay: 180ms; }

/* IntersectionObserver hook — JS adds .is-visible */
.js-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity  var(--mi-dur-reveal) var(--mi-ease-out),
    transform var(--mi-dur-reveal) var(--mi-ease-out);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════
   2. FILTER CHIPS — lift + scale on hover
   ══════════════════════════════════════════════════════════ */

/* Extend transition list (non-destructive; doesn't break existing bg/border) */
@media (hover: hover) and (pointer: fine) {
  .filter-chip {
    transition:
      background      80ms,
      border-color    80ms,
      color           80ms,
      transform       var(--mi-dur-hover) var(--mi-ease-out),
      box-shadow      var(--mi-dur-hover) var(--mi-ease-out);
    will-change: transform;
  }

  .filter-chip:hover:not(.active) {
    transform : scale(var(--mi-scale-hover));
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  }

  .filter-chip.active:hover {
    transform : translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
  }
}

.filter-chip:active {
  transform         : scale(var(--mi-scale-press)) !important;
  transition-duration: var(--mi-dur-press) !important;
}


/* ══════════════════════════════════════════════════════════
   3. TABS — subtle lift on hover, press feedback
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .tab {
    transition:
      color         120ms,
      border-color  120ms,
      transform     var(--mi-dur-hover) var(--mi-ease-out);
  }

  .tab:hover {
    transform: translateY(-1px);
  }
}

.tab:active {
  transform          : translateY(0) scale(0.99) !important;
  transition-duration: var(--mi-dur-press) !important;
}

.tab:focus-visible {
  outline       : 2px solid var(--accent-400, #6E9172);
  outline-offset: 2px;
  border-radius : var(--radius-sm, 4px);
}


/* ══════════════════════════════════════════════════════════
   4. QUICK-ACTION BAR BUTTONS — lift on hover
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .dqb-btn {
    transition:
      background    var(--duration-fast, 80ms),
      border-color  var(--duration-fast, 80ms),
      color         var(--duration-fast, 80ms),
      transform     var(--mi-dur-hover) var(--mi-ease-out),
      box-shadow    var(--mi-dur-hover) var(--mi-ease-out);
    will-change: transform;
  }

  .dqb-btn:hover {
    transform : translateY(-1px) scale(1.012);
    box-shadow: 0 2px 7px rgba(0,0,0,0.08);
  }
}


/* ══════════════════════════════════════════════════════════
   5. DROPDOWN ITEMS — RTL slide nudge + focus ring
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .dropdown-item {
    transition:
      background  80ms,
      color       80ms,
      transform   var(--mi-dur-hover) var(--mi-ease-out);
  }

  .dropdown-item:hover {
    transform: translateX(2px); /* in RTL: nudge toward reading start */
  }
}

.dropdown-item:active {
  transform          : translateX(2px) scale(0.99) !important;
  transition-duration: var(--mi-dur-press) !important;
  background         : var(--bg-sunken) !important;
}

.dropdown-item:focus-visible {
  outline       : 2px solid var(--accent-400, #6E9172);
  outline-offset: -2px;
  border-radius : var(--radius-sm, 4px);
  background    : var(--bg-sunken);
}


/* ══════════════════════════════════════════════════════════
   6. TABLE / LIST ROWS — horizontal nudge + press tint
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .tx-row,
  .data-table tbody tr,
  .task-list-row,
  .tasks-row {
    transition: background 100ms, transform var(--mi-dur-hover) var(--mi-ease-out);
  }

  .tx-row:hover,
  .data-table tbody tr:hover,
  .task-list-row:hover,
  .tasks-row:hover {
    transform: translateX(1px);
  }
}

.tx-row:active,
.data-table tbody tr:active,
.task-list-row:active {
  background         : color-mix(in srgb, var(--accent-500, #4e7554) 6%, var(--bg-surface)) !important;
  transform          : scale(0.999) !important;
  transition-duration: var(--mi-dur-press) !important;
}


/* ══════════════════════════════════════════════════════════
   7. CARD SCALE BOOST — adds scale to existing translateY
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  /* Contact & docs cards: translateY already set in polish.css; add scale */
  .contact-card:hover {
    transform: translateY(var(--card-hover-lift-md, -2px)) scale(1.006);
  }

  .docs-card:hover {
    transform: translateY(var(--card-hover-lift-md, -2px)) scale(1.006);
  }

  .kanban-card:hover {
    transform: translateY(var(--card-hover-lift-md, -2px)) scale(1.009);
  }

  .rpt-stat-item:hover {
    transform: translateY(var(--card-hover-lift-sm, -1px)) scale(1.006);
  }

  .settings-mode-card:hover {
    transform: translateY(var(--card-hover-lift-md, -2px)) scale(1.01);
  }
}


/* ══════════════════════════════════════════════════════════
   8. MODAL CLOSE BUTTON — rotate + scale spring
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .modal-close {
    transition:
      background  80ms,
      color       80ms,
      transform   var(--mi-dur-hover) var(--mi-ease-out);
  }

  .modal-close:hover {
    transform: scale(1.1) rotate(8deg);
  }
}

.modal-close:active {
  transform          : scale(0.9) rotate(8deg) !important;
  transition-duration: 55ms !important;
}


/* ══════════════════════════════════════════════════════════
   9. MODAL ENTER ANIMATION
   ══════════════════════════════════════════════════════════ */

@keyframes mi-modal-in {
  from { opacity: 0; transform: scale(0.974) translateY(-7px); }
  to   { opacity: 1; transform: scale(1)     translateY(0);    }
}

/* Only animate when opened via .modal-overlay parent */
.modal-overlay .modal-content {
  animation: 160ms var(--mi-ease-out) both mi-modal-in;
}


/* ══════════════════════════════════════════════════════════
   10. STAT CARD ICON — bounce on card hover
   ══════════════════════════════════════════════════════════ */

.stat-icon {
  transition: transform var(--mi-dur-hover) var(--mi-ease-spring);
}

@media (hover: hover) and (pointer: fine) {
  .stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(-4deg);
  }
}


/* ══════════════════════════════════════════════════════════
   11. EMPTY STATE ICON — float on section hover
   ══════════════════════════════════════════════════════════ */

.empty-state-icon {
  transition: transform 0.35s var(--mi-ease-out), opacity 0.3s;
}

.empty-state:hover .empty-state-icon {
  transform: translateY(-4px) scale(1.06);
}


/* ══════════════════════════════════════════════════════════
   12. HEADER ACTION BUTTONS — icon micro-scale
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .header-action-btn .material-icons-round {
    transition: transform var(--mi-dur-hover) var(--mi-ease-out);
  }

  .header-action-btn:hover .material-icons-round {
    transform: scale(1.1);
  }
}


/* ══════════════════════════════════════════════════════════
   13. NOTIFICATION ITEMS — RTL nudge
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .notif-item {
    transition:
      background  100ms,
      transform   var(--mi-dur-hover) var(--mi-ease-out);
  }

  .notif-item:hover {
    transform: translateX(1px);
  }
}


/* ══════════════════════════════════════════════════════════
   14. SKELETON — crisp, faster shimmer
   ══════════════════════════════════════════════════════════ */

/* Sharper shimmer timing */
.skeleton,
[class*="skeleton-"] {
  animation-duration: 1.1s !important;
}

/* Fade rows by position for "receding" effect */
.skeleton-table-row:nth-child(1) { opacity: 1.00; }
.skeleton-table-row:nth-child(2) { opacity: 0.82; }
.skeleton-table-row:nth-child(3) { opacity: 0.62; }
.skeleton-table-row:nth-child(4) { opacity: 0.40; }
.skeleton-table-row:nth-child(5) { opacity: 0.22; }
.skeleton-table-row:nth-child(n+6) { opacity: 0.10; }


/* ══════════════════════════════════════════════════════════
   15. BADGE HOVER — brightness lift
   ══════════════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
  .badge {
    transition: filter 100ms;
  }

  .badge:hover {
    filter: brightness(1.07);
  }
}


/* ══════════════════════════════════════════════════════════
   16. NAV ITEM ACTIVE INDICATOR — smoother reveal
   ══════════════════════════════════════════════════════════ */

/* The ::before pseudo-element already exists; refine its transition */
.nav-item::before {
  transition:
    opacity   140ms,
    transform 140ms var(--mi-ease-out),
    height    140ms var(--mi-ease-out);
}


/* ══════════════════════════════════════════════════════════
   17. FOCUS STATES — accessible rings on more elements
   ══════════════════════════════════════════════════════════ */

.nav-item:focus-visible {
  outline   : 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(78, 117, 84, 0.35);
}

/* Settings mode cards */
.settings-mode-card:focus-visible {
  outline      : 2px solid var(--accent-400, #6E9172);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}


/* ══════════════════════════════════════════════════════════
   18. DARK MODE SHADOW ADJUSTMENTS
   ══════════════════════════════════════════════════════════ */

[data-mode=dark] .filter-chip:hover:not(.active),
[data-mode=black] .filter-chip:hover:not(.active) {
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

[data-mode=dark] .dqb-btn:hover,
[data-mode=black] .dqb-btn:hover {
  box-shadow: 0 2px 7px rgba(0,0,0,0.32);
}

[data-mode=dark] .contact-card:hover,
[data-mode=black] .contact-card:hover,
[data-mode=dark] .docs-card:hover,
[data-mode=black] .docs-card:hover {
  /* shadow already handled by polish.css dark overrides */
  transform: translateY(var(--card-hover-lift-md, -2px)) scale(1.004);
}


/* ══════════════════════════════════════════════════════════
   19. TOUCH PRESS CLASS — sub-100ms mobile feedback
   Applied by uxPolish.js on touchstart; removed on touchend.
   ══════════════════════════════════════════════════════════ */

.mi-pressed {
  transform          : scale(0.972) !important;
  transition-duration: 65ms         !important;
  opacity            : 0.88         !important;
}


/* ══════════════════════════════════════════════════════════
   20. REDUCED MOTION — honour the preference
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Section reveals: instant show, no animation */
  .js-reveal {
    opacity  : 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .mi-reveal {
    animation: none !important;
    opacity  : 1 !important;
    transform: none !important;
  }

  /* All hover/press micro-interactions disabled */
  .filter-chip,
  .tab,
  .dqb-btn,
  .dropdown-item,
  .tx-row,
  .data-table tbody tr,
  .task-list-row,
  .tasks-row,
  .contact-card,
  .docs-card,
  .kanban-card,
  .rpt-stat-item,
  .settings-mode-card,
  .modal-close,
  .notif-item,
  .stat-icon,
  .empty-state-icon,
  .header-action-btn .material-icons-round,
  .badge,
  .mi-pressed {
    transition: none !important;
    transform : none !important;
    filter    : none !important;
    animation : none !important;
    will-change: auto !important;
  }

  /* Modal enter: no animation */
  .modal-overlay .modal-content {
    animation: none !important;
  }
}