/* Motion — respects prefers-reduced-motion */

@keyframes mesh-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(3%, 2%) rotate(1deg); }
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stroke-draw {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

.page-enter {
  animation: fade-slide-up 200ms ease-out;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-raised) 50%,
    var(--surface) 100%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.signature-stroke {
  stroke: var(--accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: stroke-draw 2.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mesh-bg::before {
    animation: none;
  }

  .card:hover,
  .kpi-card:hover {
    transform: none;
  }
}