/* ─────────────────────────────────────────────────────────────────────
   Micro-interactions — Qapita Platform
   A coherent, restrained motion vocabulary applied platform-wide.

   Principles
   • Subtle, never showy — never animate scale beyond 1.02 / -1px translate
   • Consistent timing — fast (140ms) for press, base (180ms) for hover
   • One easing — cubic-bezier(.2,.7,.3,1) for everything except the spring press
   • Respect reduced motion — disable transforms / keyframes if requested
   ───────────────────────────────────────────────────────────────────── */

:root {
  --mi-ease:        cubic-bezier(.2, .7, .3, 1);
  --mi-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mi-fast:        140ms;
  --mi-base:        180ms;
}

/* ─── Buttons ──────────────────────────────────────────────────────────
   Hover: gentle 1px lift + slightly deeper shadow
   Active: settle back down with snap (no overshoot)
   Focus-visible: 3px brand ring                                        */
.btn,
.btn-ai {
  transition:
    transform      var(--mi-fast) var(--mi-ease),
    box-shadow     var(--mi-base) var(--mi-ease),
    background     var(--mi-base) var(--mi-ease),
    border-color   var(--mi-base) var(--mi-ease),
    color          var(--mi-base) var(--mi-ease) !important;
}
.btn:hover,
.btn-ai:hover {
  transform: translateY(-1px);
}
.btn:active,
.btn-ai:active {
  transform: translateY(0);
  transition-duration: 80ms;
}
.btn:focus-visible,
.btn-ai:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 63, 214, 0.28);
}

/* Primary buttons get a slightly deeper hover shadow */
.btn-primary:hover {
  box-shadow: 0 6px 14px rgba(91, 63, 214, 0.24);
}
.btn-secondary:hover {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* ─── Icon-only buttons (kebab, info, close) ─────────────────────────
   Soft background fade, small inward press                            */
.icon-btn {
  transition:
    background   var(--mi-base) var(--mi-ease),
    color        var(--mi-base) var(--mi-ease),
    transform    var(--mi-fast) var(--mi-ease) !important;
}
.icon-btn:hover { transform: scale(1.06); }
.icon-btn:active { transform: scale(.94); transition-duration: 80ms; }

/* ─── Cards — gentle lift on interactive cards ────────────────────────
   Only cards that are clickable (have data-interactive or .card-link)
   get the lift, so static cards don't dance under the cursor.          */
.card-link,
[data-interactive="true"],
.award-card,
.exercise-card,
.surrender-card,
.article-card,
.task-card,
.kpi-tile,
.profile-card[data-interactive="true"] {
  transition:
    transform    var(--mi-base) var(--mi-ease),
    box-shadow   var(--mi-base) var(--mi-ease),
    border-color var(--mi-base) var(--mi-ease);
  will-change: transform;
}
.card-link:hover,
[data-interactive="true"]:hover,
.award-card:hover,
.exercise-card:hover,
.surrender-card:hover,
.article-card:hover,
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* KPI tiles get a quieter treatment — informational, not clickable */
.kpi-tile { transition: box-shadow var(--mi-base) var(--mi-ease); }
.kpi-tile:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }

/* ─── Sidebar items — match icon buttons ──────────────────────────── */
.side-item {
  transition:
    background var(--mi-base) var(--mi-ease),
    color      var(--mi-base) var(--mi-ease),
    transform  var(--mi-fast) var(--mi-ease) !important;
}
.side-item:hover  { transform: scale(1.05); }
.side-item:active { transform: scale(.96); transition-duration: 80ms; }

/* ─── Tabs — colour + indicator transition ───────────────────────── */
.tab {
  transition:
    color           var(--mi-base) var(--mi-ease),
    border-color    var(--mi-base) var(--mi-ease) !important;
}

/* ─── Form inputs — smooth focus ring ─────────────────────────────── */
input,
textarea,
select,
.search-input,
.select-chip {
  transition:
    border-color  var(--mi-base) var(--mi-ease),
    box-shadow    var(--mi-base) var(--mi-ease),
    background    var(--mi-base) var(--mi-ease) !important;
}
input:focus,
textarea:focus,
select:focus,
.search-input:focus-within {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 63, 214, 0.15);
}

/* ─── Pills / Chips ──────────────────────────────────────────────── */
.pill,
.chip,
.lock-pill,
.status-badge {
  transition:
    background  var(--mi-base) var(--mi-ease),
    color       var(--mi-base) var(--mi-ease),
    transform   var(--mi-fast) var(--mi-ease) !important;
}
.pill:hover,
.chip:hover { transform: translateY(-1px); }

/* ─── Modal / Side-panel enter ─────────────────────────────────────
   A single, calm fade-up — used by any modal or right-side panel.     */
@keyframes mi-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal-card,
[data-mi-enter="fade-up"] {
  animation: mi-fade-up 220ms var(--mi-ease) both;
}

@keyframes mi-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-scrim { animation: mi-scrim-in 180ms var(--mi-ease) both; }

/* ─── AI sparkle — gentle pulse for the in-button orb ───────────── */
@keyframes mi-sparkle-pulse {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.07); filter: brightness(1.1); }
}
.btn-ai:hover .btn-ai-icon {
  animation: mi-sparkle-pulse 1.2s var(--mi-ease) infinite;
}

/* ─── Header Qap AI button — icon rotates + pops on hover ───────── */
.ds-aibtn-icon,
.btn.ai > svg,
#qapAiBtn > svg {
  transform-origin: center;
  transition: transform var(--mi-base) var(--mi-ease-spring);
}
.ds-aibtn:hover .ds-aibtn-icon,
.btn.ai:hover > svg,
#qapAiBtn:hover > svg {
  transform: rotate(18deg) scale(1.18);
}
.ds-aibtn:active .ds-aibtn-icon,
.btn.ai:active > svg,
#qapAiBtn:active > svg {
  transition-duration: var(--mi-fast);
}

/* ─── Link underline grow ────────────────────────────────────────── */
a.inline-link,
.text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size var(--mi-base) var(--mi-ease), color var(--mi-base) var(--mi-ease);
}
a.inline-link:hover,
.text-link:hover { background-size: 100% 1.5px; }

/* ─── Reduced motion: opt-out of all transforms / keyframes ─────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .btn-ai:hover,
  .icon-btn:hover, .side-item:hover,
  .card-link:hover, .award-card:hover,
  .exercise-card:hover, .surrender-card:hover,
  .article-card:hover, .task-card:hover,
  .pill:hover, .chip:hover {
    transform: none;
  }
  .ds-aibtn:hover .ds-aibtn-icon,
  .btn.ai:hover > svg,
  #qapAiBtn:hover > svg { transform: none; }
}