/* Main action microinteractions. Decorative effects never intercept input. */
[data-micro] {
  --micro-x: 0px; --micro-y: 0px; --micro-scale: 1;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 44px; min-width: 44px; border-radius: 999px;
  transform: translate(var(--micro-x), var(--micro-y)) scale(var(--micro-scale));
  transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease;
  touch-action: manipulation;
}
[data-micro]:hover { transform: translate(var(--micro-x), var(--micro-y)) scale(var(--micro-scale)); }
[data-micro]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle 85px at var(--micro-glow-x, 50%) var(--micro-glow-y, 50%), currentColor, transparent 100%);
  opacity: 0; transition: opacity 220ms ease;
}
[data-micro][data-micro="button"] {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 58px; padding: 8px 8px 8px 25px; white-space: normal;
}
[data-micro] .micro-circle {
  display: inline-grid; place-items: center; flex: 0 0 auto; align-self: center;
  width: 42px; height: 42px; border-radius: 50%; background: #ff3e3e; color: #fff;
  pointer-events: none;
}
[data-micro] .micro-circle .micro-arrow {
  display: block; width: 23px; height: 23px; flex-shrink: 0; color: inherit;
  transform-origin: center; transition: transform 350ms cubic-bezier(.2,.7,.25,1);
}
[data-micro]:focus-visible { outline: 3px solid var(--focus, var(--accent, var(--green, currentColor))); outline-offset: 4px; }
[data-micro]:not(:disabled):not([aria-disabled="true"]):focus-visible::before { opacity: .13; }
[data-micro]:not(:disabled):not([aria-disabled="true"]):focus-visible .micro-arrow { transform: rotate(45deg); }
[data-micro="card"] { border-radius: 24px; }
[data-micro].nav-button, [data-micro].header-cta, [data-micro].nav-cta {
  min-height: 44px; gap: 12px; padding: 6px 6px 6px 16px;
}
[data-micro].nav-button .micro-circle, [data-micro].header-cta .micro-circle, [data-micro].nav-cta .micro-circle { width: 32px; height: 32px; }
[data-micro].nav-button .micro-arrow, [data-micro].header-cta .micro-arrow, [data-micro].nav-cta .micro-arrow { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-micro]:not(:disabled):not([aria-disabled="true"]):hover::before { opacity: .13; }
  [data-micro]:not(:disabled):not([aria-disabled="true"]):hover .micro-arrow { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-micro]:not(:disabled):not([aria-disabled="true"]):active { --micro-scale: .97; }
}
[data-micro]:disabled, [data-micro][aria-disabled="true"] { transform: none; }
[data-micro]:disabled::before, [data-micro][aria-disabled="true"]::before { opacity: 0; }
[data-micro]:disabled .micro-circle, [data-micro][aria-disabled="true"] .micro-circle { background: #777; }
@media (prefers-reduced-motion: reduce) {
  [data-micro], [data-micro]::before, [data-micro] .micro-circle .micro-arrow { transition: none; transform: none; }
  [data-micro]:hover { transform: none; }
  [data-micro] .micro-circle .micro-arrow { transform: none !important; }
}