/* motion-patch.css */
[data-motion-patch="v1"] {
  --reveal-distance: 24px;
  --reveal-duration: 550ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger: 120ms;
  --row-stagger: 90ms;
}

[data-motion-patch="v1"] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: opacity, transform;
}

[data-motion-patch="v1"] [data-reveal][data-reveal-from="x"] {
  transform: translate3d(16px, 0, 0);
}

[data-motion-patch="v1"] [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Hover elevation for cards */
[data-motion-patch="v1"] [data-hover-elevate] {
  transition: transform 250ms var(--reveal-ease), box-shadow 250ms var(--reveal-ease), filter 250ms var(--reveal-ease);
}
[data-motion-patch="v1"] [data-hover-elevate]:hover {
  transform: translateZ(0) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}

/* Portfolio grayscale → color on hover */
[data-motion-patch="v1"] [data-logo-tile] img {
  filter: grayscale(100%);
  transition: filter 250ms var(--reveal-ease), transform 250ms var(--reveal-ease);
}
[data-motion-patch="v1"] [data-logo-tile]:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* Icon pop at the end of reveal */
[data-motion-patch="v1"] [data-icon-pop] {
  transform: scale(0.96);
  transition: transform 180ms var(--reveal-ease);
}
[data-motion-patch="v1"] [data-reveal].is-visible [data-icon-pop] {
  transform: scale(1);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-motion-patch="v1"] [data-reveal] {
    transition: none;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-motion-patch="v1"] [data-hover-elevate],
  [data-motion-patch="v1"] [data-logo-tile] img,
  [data-motion-patch="v1"] [data-icon-pop] {
    transition: none;
    transform: none;
    filter: none;
  }
}