.brxe-iroha-burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.brxe-iroha-burger .burger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

/* ── Open (collapse → X) ── */
.brxe-iroha-burger.is-open:not(.is-closing) .burger-bar--top {
  animation: burger-top-open 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.brxe-iroha-burger.is-open:not(.is-closing) .burger-bar--mid {
  animation: burger-mid-open 0.4s ease forwards;
}
.brxe-iroha-burger.is-open:not(.is-closing) .burger-bar--bot {
  animation: burger-bot-open 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* ── Close (X → collapse → bars) ── */
.brxe-iroha-burger.is-closing .burger-bar--top {
  animation: burger-top-close 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.brxe-iroha-burger.is-closing .burger-bar--mid {
  animation: burger-mid-close 0.4s ease forwards;
}
.brxe-iroha-burger.is-closing .burger-bar--bot {
  animation: burger-bot-close 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

/* ── Keyframes ── */

/* Top bar: move down to center, then rotate 45° */
@keyframes burger-top-open {
  0%   { transform: translateY(0)     rotate(0deg); }
  45%  { transform: translateY(8px)  rotate(0deg); }
  100% { transform: translateY(8px)  rotate(45deg); }
}

/* Mid bar: shrink and fade out after bars have collapsed */
@keyframes burger-mid-open {
  0%   { transform: scaleX(1); opacity: 1; }
  35%  { transform: scaleX(1); opacity: 1; }
  55%  { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(0); opacity: 0; }
}

/* Bot bar: move up to center, then rotate -45° */
@keyframes burger-bot-open {
  0%   { transform: translateY(0)      rotate(0deg); }
  45%  { transform: translateY(-8px)  rotate(0deg); }
  100% { transform: translateY(-8px)  rotate(-45deg); }
}

/* Reverse: unrotate, then expand back to positions */
@keyframes burger-top-close {
  0%   { transform: translateY(8px)  rotate(45deg); }
  55%  { transform: translateY(8px)  rotate(0deg); }
  100% { transform: translateY(0)     rotate(0deg); }
}

@keyframes burger-mid-close {
  0%   { transform: scaleX(0); opacity: 0; }
  45%  { transform: scaleX(0); opacity: 0; }
  65%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

@keyframes burger-bot-close {
  0%   { transform: translateY(-8px)  rotate(-45deg); }
  55%  { transform: translateY(-8px)  rotate(0deg); }
  100% { transform: translateY(0)      rotate(0deg); }
}

/* ── Reduced motion: instant snap ── */
@media (prefers-reduced-motion: reduce) {
  .brxe-iroha-burger .burger-bar {
    animation: none !important;
  }
  .brxe-iroha-burger.is-open .burger-bar--top {
    transform: translateY(8px) rotate(45deg);
  }
  .brxe-iroha-burger.is-open .burger-bar--mid {
    opacity: 0;
    transform: scaleX(0);
  }
  .brxe-iroha-burger.is-open .burger-bar--bot {
    transform: translateY(-8px) rotate(-45deg);
  }
}