/* motion-kit.css — hover/focus polish to pair with motion-kit.js.
 * These are opt-in classes; they inherit the site's own colors and fonts,
 * so they blend into any existing design system.
 */

/* Buttons / CTAs — subtle lift on hover, press-down on click */
.mk-lift {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.mk-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }
.mk-lift:active { transform: translateY(0); transition-duration: 0.1s; }

/* Cards — gentle raise + shadow deepen */
.mk-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mk-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10); }

/* Links — underline slides in */
.mk-link { position: relative; text-decoration: none; }
.mk-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mk-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Images — slow zoom inside a cropped frame */
.mk-zoom-frame { overflow: hidden; }
.mk-zoom-frame img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.mk-zoom-frame:hover img { transform: scale(1.05); }

/* Keyboard focus stays visible (accessibility checklist item) */
.mk-lift:focus-visible,
.mk-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Kill all of it for users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .mk-lift, .mk-card, .mk-link::after, .mk-zoom-frame img {
    transition: none !important;
  }
  .mk-lift:hover, .mk-card:hover, .mk-zoom-frame:hover img {
    transform: none !important;
  }
}