:root {
  --mm-motion-accent: var(--brand-400, #e5a912);
  --mm-motion-accent-rgb: 229, 169, 18;
}

.mm-reveal-target {
  will-change: transform, opacity, filter;
}

/* mmRevealQueued() (public/js/motion.js) hides every queued target with this
   class before the reveal wave releases it, one (or a small batch) at a
   time, on a fixed cadence — see docs/motion.md "Queue". */
.mm-queued {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mm-queued { visibility: hidden; }
}

.mm-alley-host {
  position: relative;
}

.mm-alley-grid {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(var(--mm-alley-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mm-alley-rows), minmax(0, 1fr));
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  perspective: 260px;
}

.mm-alley-tile {
  min-width: 0;
  min-height: 0;
  background: var(--mm-alley-color, #111827);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08), inset 0 0 12px rgba(0, 0, 0, .14);
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.mm-motion-effect-glow {
  animation: mm-motion-glow 900ms cubic-bezier(.2,.75,.2,1) both;
}

.mm-motion-effect-pulse {
  animation: mm-motion-pulse 620ms cubic-bezier(.2,.8,.2,1) both;
}

.mm-motion-effect-hit {
  animation: mm-motion-hit 760ms cubic-bezier(.2,.8,.2,1) both;
}

.mm-motion-confetti {
  position: absolute;
  z-index: 80;
  width: var(--mm-confetti-size, 5px);
  height: calc(var(--mm-confetti-size, 5px) * .42);
  border-radius: 1px;
  background: var(--mm-confetti-color, var(--mm-motion-accent));
  pointer-events: none;
  animation: mm-motion-confetti 760ms cubic-bezier(.2,.65,.2,1) both;
}

@keyframes mm-motion-glow {
  0% { box-shadow: 0 0 0 0 rgba(var(--mm-motion-accent-rgb), 0); }
  32% { box-shadow: 0 0 0 2px rgba(var(--mm-motion-accent-rgb), .42), 0 0 34px rgba(var(--mm-motion-accent-rgb), .24); }
  100% { box-shadow: 0 0 0 0 rgba(var(--mm-motion-accent-rgb), 0); }
}

@keyframes mm-motion-pulse {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.018); }
}

@keyframes mm-motion-hit {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.3); box-shadow: inset 0 0 0 1px rgba(var(--mm-motion-accent-rgb), .55), 0 0 28px rgba(var(--mm-motion-accent-rgb), .2); }
  100% { filter: brightness(1); }
}

@keyframes mm-motion-confetti {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--mm-confetti-x), var(--mm-confetti-y)) rotate(var(--mm-confetti-r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-reveal-target,
  .mm-motion-effect-glow,
  .mm-motion-effect-pulse,
  .mm-motion-effect-hit,
  .mm-motion-confetti,
  .mm-alley-tile {
    animation: none !important;
    transition: none !important;
  }
}