/**
 * BE Icon Morph — Circle → Icon on .inventory hover
 * Pure CSS transitions, no JS required.
 */

/* Circle — default visible */
.inventory .be-icon .be-circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

/* Icon paths — default hidden */
.inventory .be-icon .be-path {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.35s ease;
}

/* Staggered entrance delays */
.inventory .be-icon .be-path-b    { transition-delay: 0.05s; }
.inventory .be-icon .be-path-bolt { transition-delay: 0.12s; }
.inventory .be-icon .be-path-e    { transition-delay: 0.18s; }

/* ---- Hover: circle out, icon in ---- */
.inventory:hover .be-icon .be-circle {
  transform: scale(0);
  opacity: 0;
}

.inventory:hover .be-icon .be-path {
  opacity: 1;
  transform: scale(1);
}

/* Reverse stagger on mouse-leave (E collapses first, B last) */
.inventory:not(:hover) .be-icon .be-path-e    { transition-delay: 0s; }
.inventory:not(:hover) .be-icon .be-path-bolt { transition-delay: 0.06s; }
.inventory:not(:hover) .be-icon .be-path-b    { transition-delay: 0.12s; }