/**
 * SYNAI Motion System 1.1.0
 * Intentional, accessible motion tokens and utilities.
 */
:root {
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 150ms;
  --motion-duration-short: 200ms;
  --motion-duration-standard: 300ms;
  --motion-duration-long: 500ms;
  --motion-duration-narrative: 800ms;
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance-xs: 4px;
  --motion-distance-sm: 8px;
  --motion-distance-md: 16px;
  --motion-distance-lg: 32px;
  --motion-scale-hover: 1.02;
  --motion-lift-hover: -4px;
}

/* Generic transition utility. Keep the property list narrow to avoid layout work. */
.motion-transition,
.button,
.text-link,
.home-unit-card,
.home-feature-card,
.home-case-card,
.home-insight-card,
.synai-card,
.synai-icon-link {
  transition:
    color var(--motion-duration-short) var(--motion-ease-out),
    background-color var(--motion-duration-short) var(--motion-ease-out),
    border-color var(--motion-duration-short) var(--motion-ease-out),
    box-shadow var(--motion-duration-standard) var(--motion-ease-standard),
    opacity var(--motion-duration-short) var(--motion-ease-out),
    transform var(--motion-duration-standard) var(--motion-ease-emphasized);
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
}

.home-unit-card:hover,
.home-unit-card:focus-visible,
.home-feature-card:hover,
.home-feature-card:focus-within,
.home-case-card:hover,
.home-case-card:focus-within,
.home-insight-card:hover,
.home-insight-card:focus-within,
.synai-card:hover,
.synai-card:focus-within {
  transform: translateY(var(--motion-lift-hover));
}

.synai-icon-link:hover .synai-icon,
.synai-icon-link:focus-visible .synai-icon,
.button:hover .synai-icon,
.button:focus-visible .synai-icon {
  transform: translateX(var(--motion-distance-xs));
}

.synai-icon {
  transition: transform var(--motion-duration-short) var(--motion-ease-out), color var(--motion-duration-short) var(--motion-ease-out);
  transform-origin: center;
}

/* Reveal patterns. Content remains visible without JavaScript. */
.has-motion [data-motion] {
  opacity: 0;
  transform: translateY(var(--motion-distance-md));
}

.has-motion [data-motion="fade"] {
  transform: none;
}

.has-motion [data-motion="slide-left"] {
  transform: translateX(var(--motion-distance-lg));
}

.has-motion [data-motion="slide-right"] {
  transform: translateX(calc(var(--motion-distance-lg) * -1));
}

.has-motion [data-motion="scale"] {
  transform: scale(0.98);
}

.has-motion [data-motion].is-motion-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--motion-duration-long) var(--motion-ease-out),
    transform var(--motion-duration-long) var(--motion-ease-emphasized);
  transition-delay: var(--motion-delay, 0ms);
}

/* Optional stagger token set by JS or template markup. */
[data-motion-delay="1"] { --motion-delay: 70ms; }
[data-motion-delay="2"] { --motion-delay: 140ms; }
[data-motion-delay="3"] { --motion-delay: 210ms; }
[data-motion-delay="4"] { --motion-delay: 280ms; }
[data-motion-delay="5"] { --motion-delay: 350ms; }
[data-motion-delay="6"] { --motion-delay: 420ms; }

/* Overlay and menu transitions. */
.site-overlay,
.modal-backdrop,
.synai-modal {
  transition: opacity var(--motion-duration-standard) var(--motion-ease-standard), visibility var(--motion-duration-standard) linear;
}

.mobile-panel,
.mega-menu,
.dropdown-menu {
  transition:
    opacity var(--motion-duration-standard) var(--motion-ease-standard),
    transform var(--motion-duration-standard) var(--motion-ease-emphasized),
    visibility var(--motion-duration-standard) linear;
}

/* Loading and progress helpers. */
@keyframes synai-spin {
  to { transform: rotate(360deg); }
}

@keyframes synai-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.motion-spinner {
  animation: synai-spin 800ms linear infinite;
}

.motion-skeleton {
  animation: synai-pulse 1200ms var(--motion-ease-standard) infinite;
}

/* Respect operating-system preferences. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-short: 0ms;
    --motion-duration-standard: 0ms;
    --motion-duration-long: 0ms;
    --motion-duration-narrative: 0ms;
  }

  html:focus-within { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .has-motion [data-motion],
  .has-motion [data-motion].is-motion-visible {
    opacity: 1;
    transform: none;
  }
}