/* av-motion.css — original motion layer for the CRM (hover / press / focus / drag feedback).
 * Written from scratch. Every rule is scoped to html[data-motion="on"] (set by av-motion.js),
 * so it is inert with prefers-reduced-motion, the kill switch (localStorage av:motion = 'off')
 * or if the script does not run. Only transform-family props (translate/scale) and opacity are animated;
 * the individual `translate` / `scale` properties are used so that they compose with — and never
 * override — inline `transform`s set by framer-motion, vaul or av-funnel.js.
 * Kill switch: localStorage.setItem('av:motion','off') then reload  |  live: document.documentElement.dataset.motion='off'
 */
html[data-motion] {
  --avm-ease: cubic-bezier(.22, 1, .36, 1);
  --avm-ring: #3b82f6;
  --avm-tint: rgba(15, 23, 42, .035);
  --avm-lift-shadow: 0 16px 36px -12px rgba(15, 23, 42, .20), 0 3px 8px rgba(15, 23, 42, .05);
  --avm-over-bg: rgba(59, 130, 246, .06);
}
html.dark[data-motion],
html[data-theme="dark"][data-motion] {
  --avm-ring: #60a5fa;
  --avm-tint: rgba(255, 255, 255, .045);
  --avm-lift-shadow: 0 18px 38px -12px rgba(0, 0, 0, .70), 0 3px 10px rgba(0, 0, 0, .35);
  --avm-over-bg: rgba(59, 130, 246, .12);
}

/* ---- visible keyboard focus (also kept in reduced-motion mode: accessibility, not motion) ---- */
html:is([data-motion="on"], [data-motion="reduced"]) :is(a, button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--avm-ring);
  outline-offset: 2px;
}

/* ---- press feedback ---- */
html[data-motion="on"] :is(button, [role="button"], .icon-btn, .btn-primary):not(:disabled):not([aria-disabled="true"]):not([class*="inset-0"]):not(.avf-card):active {
  scale: .98;
  transition: scale 90ms var(--avm-ease);
}

/* ---- sidebar / bottom nav: subtle nudge on hover (the active highlight already slides via the app) ---- */
@media (hover: hover) and (pointer: fine) {
  html[data-motion="on"] aside nav a:not(.nav-active-ink) {
    transition: background-color 200ms var(--avm-ease), color 200ms var(--avm-ease), translate 200ms var(--avm-ease);
  }
  html[data-motion="on"] aside nav a:not(.nav-active-ink):hover {
    translate: 2px 0;
  }

  /* ---- interactive cards lift 2px with a soft shadow ---- */
  html[data-motion="on"] :is(
    a, button, [role="button"]
  ):is([class*="rounded-[var(--radius-lg)]"], [class*="rounded-[var(--radius-xl)]"], [class*="rounded-2xl"])[class*="border-border"]:not([class*="inset-0"]),
  html[data-motion="on"] [class*="rounded-"][class*="border-border"][class*="cursor-pointer"],
  html[data-motion="on"] [class*="rounded-"][class*="border-border"][class*="hover:bg-surface-muted"] {
    transition: translate 200ms var(--avm-ease), box-shadow 220ms var(--avm-ease), background-color 160ms var(--avm-ease), border-color 160ms var(--avm-ease), opacity 160ms ease, scale 160ms var(--avm-ease);
  }
  html[data-motion="on"] :is(a, button, [role="button"]):is([class*="rounded-[var(--radius-lg)]"], [class*="rounded-[var(--radius-xl)]"], [class*="rounded-2xl"])[class*="border-border"]:not([class*="inset-0"]):hover,
  html[data-motion="on"] [class*="rounded-"][class*="border-border"][class*="cursor-pointer"]:hover,
  html[data-motion="on"] [class*="rounded-"][class*="border-border"][class*="hover:bg-surface-muted"]:hover,
  html[data-motion="on"]:not(.avf-drag-on) .avf-card:not(.avf-dragging):not(.avf-ghost):hover {
    translate: 0 -2px;
    box-shadow: var(--avm-lift-shadow);
  }

  /* ---- row hover tint (tables and clickable list rows) ---- */
  html[data-motion="on"] tbody tr,
  html[data-motion="on"] [class*="divide-y"] > :is(a, button, [role="button"], [class*="cursor-pointer"]) {
    transition: background-color 160ms var(--avm-ease), background-image 160ms var(--avm-ease);
  }
  html[data-motion="on"] tbody tr:hover,
  html[data-motion="on"] [class*="divide-y"] > :is(a, button, [role="button"], [class*="cursor-pointer"]):hover {
    background-image: linear-gradient(var(--avm-tint), var(--avm-tint));
  }
}

/* ---- dropdown origin (the pop-in itself is a WAAPI animation in av-motion.js) ---- */
html[data-motion="on"] :is([role="listbox"], [role="menu"], .avf-cc-menu) {
  transform-origin: 50% 0;
}

/* ---- funnel / kanban drag feedback (av-funnel.js owns the drag logic; this is paint only) ---- */
html[data-motion="on"] .avf-card:not(.avf-ghost) {
  transition: translate 200ms var(--avm-ease), box-shadow 220ms var(--avm-ease), opacity 160ms ease, scale 160ms var(--avm-ease), transform 300ms;
}
html[data-motion="on"] .avf-card.avf-dragging {
  scale: .97;
}
html[data-motion="on"] .avf-col {
  transition: box-shadow 160ms var(--avm-ease), border-color 160ms var(--avm-ease), background-color 160ms var(--avm-ease);
}
html[data-motion="on"] .avf-col.avf-over {
  background-color: var(--avm-over-bg);
}
html[data-motion="on"] .avf-ghost {
  box-shadow: 0 22px 44px -10px rgba(0, 0, 0, .34) !important;
}

/* ---- modal scrim: light blur (static paint, no animation) ---- */
html[data-motion="on"] :is(button[class*="inset-0"][class*="bg-black/"], .avf-backdrop):not([style]) {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ---- bars: scale from the left edge while animating (JS drives the animation) ---- */
html[data-motion="on"] [data-avm-bar] {
  transform-origin: 0 50%;
}

/* ---- exit ghost of closed modals (created by av-motion.js, purely visual) ---- */
.avm-out,
.avm-out * {
  pointer-events: none !important;
}
html[data-motion="on"] .avm-out :is([role="dialog"], .avf-dialog) {
  animation: avm-pop-out 170ms var(--avm-ease) both !important;
}
@keyframes avm-pop-out {
  from { opacity: 1; scale: 1; translate: 0 0; }
  to   { opacity: 0; scale: .97; translate: 0 6px; }
}

/* ---- safety net: if the OS asks for reduced motion nothing above is active; make sure ghosts never linger ---- */
html:not([data-motion="on"]) .avm-out {
  display: none !important;
}