/**
 * Global motion layer — transitions & reveals only.
 * Does not alter colors, typography, spacing, or layout.
 */

:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --motion-duration-fast: 200ms;
  --motion-duration-md: 320ms;
  --motion-duration-slow: 480ms;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Scroll-driven section reveals (class toggled by global-motion.js) */
.motion-reveal-target {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-out),
    transform var(--motion-duration-slow) var(--motion-ease-soft);
}

.motion-reveal-target.motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Sticky / docked navigation chrome */
nav[class*="sticky"],
nav[class*="fixed"],
nav.docked {
  transition:
    border-color var(--motion-duration-md) var(--motion-ease-out),
    background-color var(--motion-duration-md) var(--motion-ease-out),
    box-shadow var(--motion-duration-md) var(--motion-ease-out),
    backdrop-filter var(--motion-duration-md) var(--motion-ease-out);
}

nav a[href] {
  transition-property: color, background-color, opacity, transform, box-shadow;
  transition-duration: var(--motion-duration-md);
  transition-timing-function: var(--motion-ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  nav ul a[href]:hover {
    transform: translateY(-1px);
  }
}

/* Primary pill CTAs & filled buttons (shared Tailwind patterns) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.inline-flex.items-center.justify-center.rounded-full,
  button.inline-flex.items-center.justify-center.rounded-full {
    transition-property: transform, box-shadow, opacity, background-color, border-color, color, filter;
    transition-duration: var(--motion-duration-md);
    transition-timing-function: var(--motion-ease-out);
  }

  a.inline-flex.items-center.justify-center.rounded-full:hover,
  button.inline-flex.items-center.justify-center.rounded-full:hover {
    transform: translateY(-2px);
  }

  /* Purple primary fills — soft glow, same hue family as existing UI */
  a[class*="8b3dff"]:hover {
    box-shadow:
      0 14px 42px rgba(139, 61, 255, 0.28),
      0 0 36px rgba(139, 61, 255, 0.18);
  }

  /* Gradient CTAs — premium brightness without replacing gradients */
  a[class*="bg-gradient-to-r"]:hover {
    filter: brightness(1.06);
    box-shadow: 0 18px 48px rgba(96, 40, 180, 0.22);
  }

  /* Material / semantic primary container (legal & system pages) */
  a.bg-primary-container:hover,
  a[class*="bg-primary-container"]:hover {
    box-shadow:
      0 12px 36px rgba(155, 81, 224, 0.28),
      0 0 32px rgba(155, 81, 224, 0.2);
  }
}

/* Home: service tabs */
.service-tab {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--motion-duration-md);
  transition-timing-function: var(--motion-ease-out);
}

/* Home & landing: elevated cards */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-card,
  .about-ai-card,
  .service-card[data-service-card],
  article.benefit-card,
  article.how-work-card {
    transition-property: transform, box-shadow, border-color;
    transition-duration: var(--motion-duration-md);
    transition-timing-function: var(--motion-ease-out);
  }

  .about-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 32px 96px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(190, 160, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .about-ai-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 34px 100px rgba(72, 60, 200, 0.22),
      0 0 0 1px rgba(160, 140, 255, 0.12);
  }

  .service-card[data-service-card]:hover {
    transform: translateY(-3px);
    box-shadow:
      0 28px 72px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(200, 175, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.12);
  }

  article.benefit-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 34px 96px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(210, 190, 255, 0.12);
  }

  article.how-work-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 36px 100px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(190, 175, 255, 0.11);
  }
}

/* Footer micro-interactions (timing only — preserves existing motion deltas) */
.eds-footer-nav a {
  transition:
    color var(--motion-duration-md) var(--motion-ease-out),
    transform var(--motion-duration-md) var(--motion-ease-out);
}

.eds-social-row a {
  transition:
    background-color var(--motion-duration-md) var(--motion-ease-out),
    transform var(--motion-duration-md) var(--motion-ease-out),
    box-shadow var(--motion-duration-md) var(--motion-ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .eds-social-row a:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  }
}

/* Form controls — subtle focus/hover polish without layout shifts */
@media (prefers-reduced-motion: no-preference) {
  input[type="text"],
  input[type="email"],
  textarea,
  select {
    transition:
      border-color var(--motion-duration-md) var(--motion-ease-out),
      box-shadow var(--motion-duration-md) var(--motion-ease-out),
      background-color var(--motion-duration-md) var(--motion-ease-out);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  button[type="submit"],
  button.rounded-full:not(:disabled) {
    transition-property: transform, box-shadow, opacity, background-color, border-color, color;
    transition-duration: var(--motion-duration-md);
    transition-timing-function: var(--motion-ease-out);
  }

  button[type="submit"]:hover:not(:disabled),
  button.rounded-full:hover:not(:disabled) {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .motion-reveal-target {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .about-card:hover,
  .about-ai-card:hover,
  .service-card[data-service-card]:hover,
  article.benefit-card:hover,
  article.how-work-card:hover,
  a.inline-flex.items-center.justify-center.rounded-full:hover,
  button.inline-flex.items-center.justify-center.rounded-full:hover {
    transform: none;
  }
}