/*
 * Purpose: MIT starter — two working motion utilities (page enter + card lift)
 * Last modified: 2026-09-09 | Author: Teknoled-G | Completeness: 100
 * Copy this file into the project. Full kit (stagger, chips, TS, token bridge) is the plugin.
 */

:root {
  --motion-duration-fast: 120ms;
  --motion-duration-normal: 200ms;
  --motion-duration-page: 420ms;
  --motion-easing-productive: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-easing-gentle: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-elevation-hover: 0 20px 48px rgba(0, 0, 0, 0.16);
}

@keyframes ui-motion-page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-ui-motion] .ui-motion-page-enter {
  animation: ui-motion-page-enter var(--motion-duration-page) var(--motion-easing-gentle) both;
}

[data-ui-motion] .ui-motion-object-interactive {
  transition:
    transform var(--motion-duration-normal) var(--motion-easing-productive),
    box-shadow 220ms var(--motion-easing-productive);
}

[data-ui-motion] .ui-motion-object-interactive:hover,
[data-ui-motion] .ui-motion-object-interactive:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--motion-elevation-hover);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-normal: 0ms;
    --motion-duration-page: 0ms;
  }

  [data-ui-motion] .ui-motion-page-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  [data-ui-motion] .ui-motion-object-interactive,
  [data-ui-motion] .ui-motion-object-interactive:hover,
  [data-ui-motion] .ui-motion-object-interactive:focus-within {
    transform: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --motion-elevation-hover: 0 20px 48px rgba(0, 0, 0, 0.55);
  }
}