/* =================================================================
   Motion library — purposeful, lightweight, reduced-motion safe
   --------------------------------------------------------------------
   Where each animation belongs (per animation dribble.txt brief):
   - Page entry        → .main keyframe (in nav.css)
   - Section reveal    → .reveal[data-reveal] via IntersectionObserver
   - Hover lift        → .card--interactive, .btn (in their files)
   - Button press      → 3D depth compression (in buttons.css)
   - KPI count-up      → .kpi__value with [data-count]
   - Table row stagger → .table tbody tr:nth-child via animation-delay
   - Filter chip       → .chip:has(input:checked) (in forms.css)
   - Modal fade+scale  → .modal animation (in modal.css)
   - Toast slide       → .toast animation (in modal.css)
   - Loaders/skeleton  → .skeleton class
   - Status change     → .badge--pulse for SLA breach (in badges.css)
   - Nav transition    → sidebar slide on mobile
   - Empty state       → .empty-state__art breathing
   ================================================================= */

/* Section-reveal — scroll into view */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--motion-slow) var(--ease-silk),
              transform var(--motion-slow) var(--ease-silk);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bar-reveal — scaleX(0) → scaleX(1). Used on horizontal data bars
   where the bar's WIDTH carries information; we keep the inline width
   value (proportional to data) and animate the FILL via transform so
   the proportions feel earned as you scroll. */
.reveal-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 720ms var(--ease-silk);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform;
}
.reveal-bar.is-visible {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-bar { transform: none; transition: none; }
}

/* Stagger inside containers */
.stagger > * {
  animation: stagger-in 600ms var(--ease-silk) backwards;
}
.stagger > *:nth-child(1) { animation-delay:  40ms; }
.stagger > *:nth-child(2) { animation-delay:  80ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 160ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 240ms; }
.stagger > *:nth-child(7) { animation-delay: 280ms; }
.stagger > *:nth-child(8) { animation-delay: 320ms; }
.stagger > *:nth-child(9) { animation-delay: 360ms; }
.stagger > *:nth-child(10){ animation-delay: 400ms; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Table row reveal stagger */
.table tbody tr {
  animation: row-in 360ms var(--ease-silk) backwards;
}
.table tbody tr:nth-child(1)  { animation-delay:  20ms; }
.table tbody tr:nth-child(2)  { animation-delay:  40ms; }
.table tbody tr:nth-child(3)  { animation-delay:  60ms; }
.table tbody tr:nth-child(4)  { animation-delay:  80ms; }
.table tbody tr:nth-child(5)  { animation-delay: 100ms; }
.table tbody tr:nth-child(6)  { animation-delay: 120ms; }
.table tbody tr:nth-child(7)  { animation-delay: 140ms; }
.table tbody tr:nth-child(8)  { animation-delay: 160ms; }
.table tbody tr:nth-child(9)  { animation-delay: 180ms; }
.table tbody tr:nth-child(10) { animation-delay: 200ms; }
.table tbody tr:nth-child(n+11) { animation-delay: 220ms; }

@keyframes row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loader — soft champagne shimmer */
.skeleton {
  display: block;
  border-radius: var(--r-md);
  background: linear-gradient(90deg,
    var(--ivory-100) 0%,
    var(--ivory-200) 40%,
    var(--ivory-100) 80%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  min-height: 1em;
}
.skeleton--line { height: 1em; margin: 0.25em 0; }
.skeleton--card { height: 100px; }
.skeleton--circle { border-radius: 50%; }

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Empty-state breathing */
.empty-state__art {
  animation: breathe 4s var(--ease-silk) infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* Status change — flash highlight on row update */
.row-flash {
  animation: row-flash 1.6s var(--ease-silk);
}
@keyframes row-flash {
  0%   { background: var(--rose-50); }
  100% { background: transparent; }
}

/* Page entry inline overrides (fine-grained per-section) */
.page-fade-in { animation: page-fade-in 520ms var(--ease-silk); }
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Number flip-counter — used when KPIs update */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Chart draw-in — for Phase 4 line/area charts. SVG path stroke-dash trick. */
.chart-line {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  animation: chart-draw 1400ms var(--ease-silk) 240ms forwards;
}
.chart-area {
  opacity: 0;
  transform-origin: bottom;
  transform: scaleY(0);
  animation: chart-fill 900ms var(--ease-silk) 800ms forwards;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fill { to { opacity: 0.55; transform: scaleY(1); } }

/* Layered parallax hero — three depth planes drift on scroll via CSS only */
.parallax-layer {
  will-change: transform;
  animation: parallax-drift 18s var(--ease-silk) infinite alternate;
}
.parallax-layer--slow  { animation-duration: 24s; }
.parallax-layer--fast  { animation-duration: 14s; }
@keyframes parallax-drift {
  from { transform: translate3d(-6px, -4px, 0); }
  to   { transform: translate3d(6px, 4px, 0); }
}

/* Custom loader — a softly orbiting trio (NOT a generic CSS spinner) */
.orbit-loader {
  position: relative;
  width: 56px;
  height: 56px;
  display: inline-block;
}
.orbit-loader::before,
.orbit-loader::after,
.orbit-loader span {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: orbit-spin 1.8s var(--ease-silk) infinite;
}
.orbit-loader::before { border-top-color: var(--rose-500);      animation-delay: 0s; }
.orbit-loader span    { border-top-color: var(--champagne-400); animation-delay: 0.3s; transform: scale(0.78); }
.orbit-loader::after  { border-top-color: var(--mauve-700);     animation-delay: 0.6s; transform: scale(0.56); }
@keyframes orbit-spin {
  to { transform: rotate(360deg) scale(var(--scale, 1)); }
}

/* Sparkle — used on success states, never decorative-only */
.sparkle {
  position: relative;
  display: inline-block;
}
.sparkle::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: radial-gradient(circle, rgba(230, 197, 118, 0.5), transparent 60%);
  border-radius: 50%;
  animation: sparkle-pulse 1.6s var(--ease-silk) infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes sparkle-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50%      { opacity: 0.85; transform: scale(1.05); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .stagger > *, .table tbody tr, .empty-state__art, .page-fade-in,
  .parallax-layer, .sparkle::after { animation: none; }
  .skeleton { animation: none; background: var(--ivory-100); }
  .orbit-loader::before, .orbit-loader::after, .orbit-loader span { animation-duration: 0.01ms; }
  .chart-line { stroke-dashoffset: 0; }
  .chart-area { opacity: 0.55; transform: scaleY(1); }
}