/* APEX360 Motion & Interaction Engine — Release 17.0 Commercial Launch Polish */
/* =================================================== */

/* ─── 1. MOTION TOKENS ─── */
:root {
  --motion-duration-short: 150ms;
  --motion-duration-medium: 300ms;
  --motion-duration-long: 500ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-stagger: 60ms;
  --motion-scale-hover: 1.03;
  --motion-scale-active: 0.97;
  --motion-lift: -3px;
}

/* ─── 2. STYLE-AWARE OVERRIDES ─── */
[data-style="apple_minimal"] {
  --motion-duration-short: 200ms;
  --motion-duration-medium: 400ms;
  --motion-duration-long: 700ms;
  --motion-ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-spring-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-stagger: 80ms;
  --motion-scale-hover: 1.02;
  --motion-lift: -2px;
}
[data-style="modern_saas"] {
  --motion-duration-short: 100ms;
  --motion-duration-medium: 200ms;
  --motion-duration-long: 350ms;
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-spring-soft: cubic-bezier(0, 0, 0.2, 1);
  --motion-stagger: 40ms;
  --motion-scale-hover: 1.02;
  --motion-lift: -2px;
}
[data-style="microsoft_fluent"] {
  --motion-duration-short: 150ms;
  --motion-duration-medium: 250ms;
  --motion-duration-long: 400ms;
  --motion-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-stagger: 50ms;
}
[data-style="bold_colourful"] {
  --motion-duration-short: 200ms;
  --motion-duration-medium: 350ms;
  --motion-duration-long: 600ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-spring-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --motion-stagger: 100ms;
  --motion-scale-hover: 1.05;
  --motion-lift: -6px;
}

/* ─── 3. DS BUTTON MICRO-INTERACTIONS ─── */
.ds-btn, .apex-btn, [class*="btn"] {
  transition: opacity var(--motion-duration-medium) var(--motion-ease-out),
              transform var(--motion-duration-short) var(--motion-ease-out),
              background-color var(--motion-duration-short) ease,
              box-shadow var(--motion-duration-short) ease,
              border-color var(--motion-duration-short) ease;
}
.apex-stagger-grid .ds-btn,
.apex-stagger-grid .apex-btn {
  opacity: 0;
  transform: scale(0.95);
}
.apex-stagger-grid.apex-visible .ds-btn,
.apex-stagger-grid.apex-visible .apex-btn {
  opacity: 1;
  transform: scale(1);
}
.ds-btn:hover, .apex-btn:hover {
  transform: translateY(-1px);
}
.ds-btn:active, .apex-btn:active {
  transform: scale(var(--motion-scale-active));
}

/* ─── 4. DS CARD MICRO-INTERACTIONS ─── */
.exec-card, .ds-kpi-card, .ds-glass, .apex-card {
  transition: opacity var(--motion-duration-long) var(--motion-ease-out),
              transform var(--motion-duration-long) var(--motion-ease-out),
              box-shadow var(--motion-duration-medium) ease,
              border-color var(--motion-duration-medium) ease;
}
.exec-card:hover, .ds-kpi-card:hover, .ds-glass:hover {
  transform: translateY(var(--motion-lift));
}
.exec-card:active, .ds-kpi-card:active {
  transform: translateY(-1px) scale(0.98);
}

/* ─── 5. ICON MICRO-INTERACTIONS ─── */
.ds-btn i, .exec-card i, .ds-kpi-card i, [class*="badge"] i, a i {
  transition: transform var(--motion-duration-short) var(--motion-ease-out);
}
.ds-btn:hover i {
  transform: scale(1.15);
}
.exec-card:hover i.fa-arrow-right,
.ds-btn:hover i.fa-arrow-right,
a:hover i.fa-arrow-right {
  transform: translateX(3px);
}
.exec-card:hover i.fa-external-link-alt,
a:hover i.fa-external-link {
  transform: translate(2px, -2px);
}

/* ─── 6. KPI COUNT-UP ─── */
.apex-count, .ds-kpi-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-duration-medium) ease;
}

/* ─── 7. PROGRESS BARS ─── */
.apex-progress-track {
  overflow: hidden;
}
.apex-progress-fill {
  width: 0%;
  transition: width 0.8s var(--motion-ease-out);
}

/* ─── 8. TOOLTIP ─── */
.apex-tooltip {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--motion-duration-short) var(--motion-ease-out),
              transform var(--motion-duration-short) var(--motion-ease-out);
  pointer-events: none;
}
.apex-tooltip.apex-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 9. MODAL ─── */
.apex-modal-overlay {
  opacity: 0;
  transition: opacity var(--motion-duration-medium) ease;
}
.apex-modal-overlay.apex-visible {
  opacity: 1;
}
.apex-modal-content {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition: opacity var(--motion-duration-medium) var(--motion-ease-out),
              transform var(--motion-duration-medium) var(--motion-spring-soft);
}
.apex-modal-overlay.apex-visible .apex-modal-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ─── 10. NOTIFICATION SLIDE ─── */
.apex-notification {
  transform: translateX(120%);
  transition: transform var(--motion-duration-medium) var(--motion-spring-soft),
              opacity var(--motion-duration-medium) ease;
  opacity: 0;
}
.apex-notification.apex-visible {
  transform: translateX(0);
  opacity: 1;
}
.apex-notification.apex-dismissing {
  transform: translateX(120%);
  opacity: 0;
}

/* ─── 11. DROPDOWN FADE + SCALE ─── */
.apex-dropdown {
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transition: opacity var(--motion-duration-short) var(--motion-ease-out),
              transform var(--motion-duration-short) var(--motion-ease-out);
  pointer-events: none;
}
.apex-dropdown.apex-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* ─── 12. TABLE ROW HIGHLIGHT ─── */
tr[onmouseover] {
  transition: background-color var(--motion-duration-short) ease;
}

/* ─── 13. STAGGER ENTRY SYSTEM ─── */
.apex-stagger-fade > * {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity var(--motion-duration-long) var(--motion-ease-out),
              transform var(--motion-duration-long) var(--motion-ease-out);
}
.apex-stagger-fade.apex-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 14. SKELETON LOADING ─── */
.apex-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 6px);
}
body.theme-ai-futuristic .apex-skeleton {
  background: linear-gradient(
    90deg,
    rgba(79,124,255,0.04) 25%,
    rgba(79,124,255,0.08) 50%,
    rgba(79,124,255,0.04) 75%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 15. SUCCESS/ERROR FLASH ─── */
.apex-flash {
  animation: flash-slide-in 0.3s var(--motion-ease-out) forwards;
}
@keyframes flash-slide-in {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.apex-flash.apex-dismissing {
  animation: flash-slide-out 0.2s var(--motion-ease-in) forwards;
}
@keyframes flash-slide-out {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-10px); opacity: 0; }
}

/* ─── 16. EMPTY STATE ─── */
.apex-empty-state {
  opacity: 0;
  transform: translateY(20px);
  animation: empty-state-enter 0.4s var(--motion-ease-out) 0.1s forwards;
}
@keyframes empty-state-enter {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── 17. SUCCESS INDICATOR ─── */
.apex-success-check {
  animation: success-pop 0.4s var(--motion-spring-soft) forwards;
}
@keyframes success-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ─── 18. FLOATING HELP ─── */
.apex-help-btn {
  animation: help-pulse 2.5s ease-in-out infinite;
}
@keyframes help-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
}
.apex-help-panel {
  transform: translateY(100%);
  transition: transform var(--motion-duration-medium) var(--motion-ease-out);
}
.apex-help-panel.apex-visible {
  transform: translateY(0);
}

/* ─── 19. REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    --motion-duration-short: 0ms !important;
    --motion-duration-medium: 0ms !important;
    --motion-duration-long: 0ms !important;
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .exec-card:hover,
  .ds-kpi-card:hover,
  .ds-glass:hover,
  .ds-btn:hover,
  .apex-btn:hover {
    transform: none !important;
  }
  .apex-skeleton {
    animation: none !important;
    background: rgba(255,255,255,0.04) !important;
  }
}