:root {
  --mi-button-active-duration: 90ms;
  --mi-button-return-duration: 240ms;
  --mi-card-active-duration: 100ms;
  --mi-card-return-duration: 260ms;
  --mi-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mi-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --mi-glow-x: 50%;
  --mi-glow-y: 50%;
}

.mi-button,
.mi-3d-card {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  transform-style: preserve-3d;
  will-change: transform;
}

.mi-button {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform var(--mi-button-return-duration) var(--mi-ease-soft), box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.mi-button.mi-button--active {
  transition: transform var(--mi-button-active-duration) var(--mi-ease-out), box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.mi-ripple {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0.4;
  transform: translate3d(0, 0, 0) scale(0);
  animation: mi-ripple 0.5s var(--mi-ease-out) forwards;
}

@keyframes mi-ripple {
  from { opacity: 0.4; transform: translate3d(0, 0, 0) scale(0); }
  to { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
}

.mi-3d-card {
  position: relative;
  overflow: hidden;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0);
  transition: transform var(--mi-card-return-duration) var(--mi-ease-soft), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.mi-3d-card.mi-3d-card--hovered {
  transition: transform var(--mi-card-active-duration) var(--mi-ease-out), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.mi-card-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 220ms ease;
  background: radial-gradient(circle at var(--mi-glow-x, 50%) var(--mi-glow-y, 50%), rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0) 52%);
}

.light .mi-card-glow {
  background: radial-gradient(circle at var(--mi-glow-x, 50%) var(--mi-glow-y, 50%), rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 22%, rgba(0, 0, 0, 0) 52%);
}

.mi-3d-card.mi-3d-card--hovered > .mi-card-glow {
  opacity: 1;
}

.micro-interactions-disabled .mi-button,
.micro-interactions-disabled .mi-3d-card {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}

.micro-interactions-disabled .mi-card-glow,
.micro-interactions-disabled .mi-ripple {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mi-button, .mi-3d-card, .mi-card-glow, .mi-ripple {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  .mi-card-glow, .mi-ripple { display: none !important; }
}