/**
 * Micro-interactions — The Doctor Agency ERP (MEGA-BUNDLE 3, Task 3.7)
 *
 * Slow, confident, luxurious. Never rushed.
 * Respects `prefers-reduced-motion` — everything disables cleanly.
 *
 * Bonuses:
 *   B1 Scroll-driven fade-in (observer hooks into data-reveal)
 *   B5 Page transition choreography (body.page-leaving)
 *   B6 Icon animations (bell shake / sync rotate)
 */

:root {
  --transition-fast:  150ms;
  --transition-base:  300ms;
  --transition-slow:  500ms;
  --ease-luxury:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:        cubic-bezier(0.4, 0, 1, 1);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Universal smooth transitions for theme-swappable surfaces                   */
/* ══════════════════════════════════════════════════════════════════════════ */
body,
.sidebar,
.header,
.card,
.sp-panel,
.ff-panel,
.dashboard-widget,
.panel-card {
  transition:
    background-color var(--transition-base) var(--ease-luxury),
    color            var(--transition-base) var(--ease-luxury),
    border-color     var(--transition-base) var(--ease-luxury);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Buttons — lift + shadow + background darken                                */
/* ══════════════════════════════════════════════════════════════════════════ */
button:not([disabled]),
.btn,
.sp-btn,
.sp-btn.primary,
.ff-btn,
.cf-btn,
.sr-retry-btn {
  transition:
    transform        var(--transition-base) var(--ease-luxury),
    box-shadow       var(--transition-base) var(--ease-luxury),
    background-color var(--transition-base) var(--ease-luxury),
    border-color     var(--transition-base) var(--ease-luxury);
}
button:not([disabled]):hover,
.btn:hover,
.sp-btn:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
button:not([disabled]):active,
.btn:active,
.sp-btn:active {
  transform: translateY(0);
  transition-duration: var(--transition-fast);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Cards — hover shadow + border accent                                       */
/* ══════════════════════════════════════════════════════════════════════════ */
.card:hover,
.sp-card:hover,
.ff-card:hover,
.cf-card:hover,
.dashboard-widget:hover,
.panel-card:hover {
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,0.35));
  border-color: var(--color-accent-muted, rgba(245, 158, 11, 0.4));
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Links — underline expands from center                                      */
/* ══════════════════════════════════════════════════════════════════════════ */
a.luxury-link {
  position: relative;
  text-decoration: none;
  color: inherit;
}
a.luxury-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--transition-base) var(--ease-luxury), left var(--transition-base) var(--ease-luxury);
}
a.luxury-link:hover::after {
  width: 100%;
  left: 0;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Focus rings — gold, visible, accessibility-forward                         */
/* ══════════════════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline: 2px solid var(--color-accent, #F59E0B);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible,
.sp-btn:focus-visible,
.nav-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.32);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Page transitions — fade in on first render (Bonus B5 prep)                 */
/* ══════════════════════════════════════════════════════════════════════════ */
@keyframes luxFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.content-area,
[data-page-root] {
  animation: luxFadeIn 400ms var(--ease-entrance);
}
body.page-leaving .content-area {
  animation: luxFadeOut 200ms var(--ease-exit) forwards;
}
@keyframes luxFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-4px); }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Dotted loader (confident, not frantic)                                     */
/* ══════════════════════════════════════════════════════════════════════════ */
.lux-loader {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.lux-loader > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent, #F59E0B);
  animation: luxDots 1.4s var(--ease-luxury) infinite both;
}
.lux-loader > span:nth-child(2) { animation-delay: 0.18s; }
.lux-loader > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes luxDots {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Bonus B1 — Scroll-driven fade-in (JS hooks add/remove .visible)            */
/* ══════════════════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-entrance), transform 600ms var(--ease-entrance);
}
[data-reveal].visible {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Bonus B6 — Icon animations (bell shake on new notification / sync spin)    */
/* ══════════════════════════════════════════════════════════════════════════ */
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70% { transform: rotate(-8deg); }
  20%, 40%, 60%, 80% { transform: rotate(8deg); }
}
.icon-bell-shake { animation: bellShake 0.8s ease-in-out; }

@keyframes syncSpin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
.icon-sync-spinning { animation: syncSpin 1.2s linear infinite; }

@keyframes drawCheck {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}
.icon-check-draw path {
  stroke-dasharray: 24;
  animation: drawCheck 400ms var(--ease-entrance) forwards;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Reduced motion — respect user preference                                    */
/* ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}