/* animations/menu/categories-zoom-hover.css */
/* Animate the BIG category frames themselves (no wrapper, no JS).
   Translation-only (no scale). */

@media (prefers-reduced-motion: reduce) {
  .category.blue-neon,
  .category.pink-neon {
    transition: none !important;
    transform: none !important;
  }
}

/* Base: do NOT move the categories before hover */
.category.blue-neon,
.category.pink-neon {
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The Character Series → slight left + down */
.category.blue-neon:hover,
.category.blue-neon:focus-within {
  transform: translate3d(-8px, 4px, 0);
}

/* The World of EISTH → slight right + down */
.category.pink-neon:hover,
.category.pink-neon:focus-within {
  transform: translate3d(8px, 4px, 0);
}