/* Micro-animations — respects prefers-reduced-motion */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes modalSpring {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastSlideOut {
  to {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
  }
}

@keyframes navIndicator {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleY(0.4);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
}

@keyframes navPulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes chartBarGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes ringDraw {
  from { stroke-dashoffset: var(--ring-circ); }
  to { stroke-dashoffset: var(--ring-offset); }
}

@keyframes loginShellIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shimmerBadge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes notifItemIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion-enabled .content-inner.page-enter {
    animation: pageEnter var(--anim-base) var(--ease-out) both;
  }

  .motion-enabled .anim-fade-up {
    opacity: 0;
    animation: fadeUp var(--anim-slow) var(--ease-out) both;
    animation-delay: calc(var(--anim-i, 0) * 45ms);
  }

  /* Buttons */
  .motion-enabled .btn {
    transition: transform var(--anim-fast) var(--ease-out),
                box-shadow var(--anim-fast) ease,
                background var(--transition),
                color var(--transition),
                border-color var(--transition);
  }

  .motion-enabled .btn:hover {
    transform: translateY(-1px);
  }

  .motion-enabled .btn:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 80ms;
  }

  .motion-enabled .btn-primary:hover {
    box-shadow: var(--shadow-green), var(--shadow-gold);
  }

  .motion-enabled .btn-icon:active,
  .motion-enabled .topbar-icon-btn:active {
    transform: scale(0.92);
  }

  /* Cards */
  .motion-enabled .card,
  .motion-enabled .task-card,
  .motion-enabled .kanban-card {
    transition: transform var(--anim-base) var(--ease-out),
                box-shadow var(--anim-base) var(--ease-out),
                border-color var(--transition);
  }

  .motion-enabled .card:hover,
  .motion-enabled .task-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .motion-enabled .kanban-card:hover {
    transform: translateY(-2px) rotate(0.5deg);
  }

  /* Sidebar */
  .motion-enabled .sidebar-item {
    transition: background var(--transition), color var(--transition), transform var(--anim-fast) var(--ease-out);
  }

  .motion-enabled .sidebar-item:active {
    transform: scale(0.98);
  }

  .motion-enabled .sidebar-item.active::before {
    animation: navIndicator var(--anim-base) var(--ease-spring) both;
  }

  .motion-enabled .sidebar-item.nav-pulse {
    animation: navPulse 320ms var(--ease-out);
  }

  html[dir="rtl"].motion-enabled .sidebar-item.active::before {
    animation-name: navIndicator;
  }

  /* Filter pills & tabs */
  .motion-enabled .filter-pill,
  .motion-enabled .tab,
  .motion-enabled .calendar-view-tab {
    transition: all var(--anim-base) var(--ease-out);
  }

  .motion-enabled .filter-pill:active,
  .motion-enabled .tab:active {
    transform: scale(0.96);
  }

  .motion-enabled .filter-pill.active {
    transform: scale(1.02);
  }

  /* Tables */
  .motion-enabled .data-table tbody tr {
    transition: background var(--transition);
  }

  .motion-enabled .data-table tbody tr:hover {
    background: var(--surface-soft);
  }

  .motion-enabled .avatar {
    transition: transform var(--anim-base) var(--ease-spring);
  }

  .motion-enabled .data-table tbody tr:hover .avatar {
    transform: scale(1.08);
  }

  /* Status badges */
  .motion-enabled .status-badge {
    transition: transform var(--anim-fast) var(--ease-out);
  }

  .motion-enabled tr:hover .status-badge {
    transform: scale(1.04);
  }

  /* Modals */
  .motion-enabled .modal.open .modal-backdrop {
    animation: fadeIn 220ms ease both;
  }

  .motion-enabled .modal.open .modal-dialog {
    animation: modalSpring 340ms var(--ease-spring) both;
  }

  /* Toasts */
  .motion-enabled .toast {
    animation: toastSlideIn 320ms var(--ease-spring) both;
  }

  .motion-enabled .toast.toast-out {
    animation: toastSlideOut 220ms var(--ease-out) forwards;
  }

  html[dir="rtl"].motion-enabled .toast {
    animation-name: toastSlideInRtl;
  }

  html[dir="rtl"].motion-enabled .toast.toast-out {
    animation-name: toastSlideOutRtl;
  }

  @keyframes toastSlideInRtl {
    from { opacity: 0; transform: translateX(-24px) scale(0.96); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes toastSlideOutRtl {
    to { opacity: 0; transform: translateX(-24px) scale(0.96); }
  }

  /* Notifications dropdown */
  .motion-enabled .notif-dropdown.open .notif-item {
    animation: notifItemIn 280ms var(--ease-out) both;
  }

  .motion-enabled .notif-dropdown.open .notif-item:nth-child(1) { animation-delay: 0ms; }
  .motion-enabled .notif-dropdown.open .notif-item:nth-child(2) { animation-delay: 40ms; }
  .motion-enabled .notif-dropdown.open .notif-item:nth-child(3) { animation-delay: 80ms; }
  .motion-enabled .notif-dropdown.open .notif-item:nth-child(4) { animation-delay: 120ms; }
  .motion-enabled .notif-dropdown.open .notif-item:nth-child(5) { animation-delay: 160ms; }

  /* Charts */
  .motion-enabled .anim-chart-bar {
    transform: scaleY(0);
    transform-origin: bottom;
    animation: chartBarGrow 650ms var(--ease-out) both;
    animation-delay: calc(var(--bar-i, 0) * 55ms);
  }

  .motion-enabled .bar-chart-mini .bar {
    transform: scaleY(0);
    transform-origin: bottom;
    animation: chartBarGrow 500ms var(--ease-out) both;
    animation-delay: calc(var(--bar-i, 0) * 40ms);
  }

  .motion-enabled .anim-progress-ring {
    animation: ringDraw 900ms var(--ease-out) both;
  }

  /* Login */
  .motion-enabled .login-screen.anim-login-enter .login-shell {
    animation: loginShellIn 600ms var(--ease-out) both;
  }

  /* Search results */
  .motion-enabled .search-results.open .search-result-item {
    animation: fadeUp 280ms var(--ease-out) both;
  }

  .motion-enabled .search-results.open .search-result-item:nth-child(1) { animation-delay: 0ms; }
  .motion-enabled .search-results.open .search-result-item:nth-child(2) { animation-delay: 35ms; }
  .motion-enabled .search-results.open .search-result-item:nth-child(3) { animation-delay: 70ms; }
  .motion-enabled .search-results.open .search-result-item:nth-child(4) { animation-delay: 105ms; }
  .motion-enabled .search-results.open .search-result-item:nth-child(5) { animation-delay: 140ms; }

  /* Form inputs focus glow */
  .motion-enabled .form-input:focus,
  .motion-enabled .form-select:focus,
  .motion-enabled .search-input:focus {
    transition: border-color var(--transition), box-shadow var(--anim-base) var(--ease-out);
  }

  /* Empty state */
  .motion-enabled .empty-state {
    animation: fadeUp var(--anim-slow) var(--ease-out) both;
    animation-delay: 120ms;
  }

  /* Sidebar promo */
  .motion-enabled .promo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .motion-enabled .promo-btn:active {
    transform: scale(0.97);
  }

  /* Action menu buttons in tables */
  .motion-enabled .action-menu-btn {
    transition: transform var(--anim-fast) var(--ease-out), background var(--transition);
  }

  .motion-enabled .action-menu-btn:hover {
    transform: scale(1.08);
  }

  .motion-enabled .action-menu-btn:active {
    transform: scale(0.95);
  }
}

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