[data-controller="show-buttons-on-change"] {
  .buttons-wrapper {
    display: none !important;
    /* Ensure starting state for animation */
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 200ms ease-out;
  }

  .buttons-wrapper.show {
    display: flex !important;
    /* Make the wrapper visible with a subtle fade + lift */
    opacity: 1;
    animation: bm-fade-in 750ms ease-out both;
  }
}

/* Global keyframes for the fade-in effect */
@keyframes bm-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  [data-controller="show-buttons-on-change"] .buttons-wrapper {
    transition: none !important;
    animation: none !important;
  }
}