/* ===========================================
   Shop-by-Category hero grid — active tile state
   Pairs with template-parts/category-grid.php and
   assets/src/js/category-grid.js.
   =========================================== */

/* Base tile: ensure we have a positioning context for the glow ring. */
.gensou-cat-tile {
  position: relative;
  outline: none;
  transition: transform 200ms ease, filter 200ms ease;
}

/* Active state — applied server-side via `is-active` class. */
.gensou-cat-tile.is-active {
  transform: translateY(-2px);
}

/* Invert the icon bubble: white background, maroon icon + glowing ring. */
.gensou-cat-tile.is-active .gensou-cat-tile__icon {
  background: #ffffff !important;
  color: var(--color-primary) !important;
  box-shadow:
    0 0 0 3px var(--color-primary),
    0 8px 22px rgba(167, 20, 76, 0.25);
}

/* For image-thumbnail tiles: add a maroon ring + lift shadow. */
.gensou-cat-tile.is-active .gensou-cat-tile__thumb {
  box-shadow:
    0 0 0 3px var(--color-primary),
    0 10px 24px rgba(167, 20, 76, 0.28);
}

/* Title goes maroon + bolder weight when active. */
.gensou-cat-tile.is-active .gensou-cat-tile__title {
  color: var(--color-primary) !important;
  font-weight: 700;
}

/* Subtle focus-visible affordance for keyboard users. */
.gensou-cat-tile:focus-visible {
  box-shadow: 0 0 0 3px rgba(167, 20, 76, 0.35);
  border-radius: 12px;
}

/* Reduce motion preference — drop the lift animation. */
@media (prefers-reduced-motion: reduce) {
  .gensou-cat-tile,
  .gensou-cat-tile.is-active {
    transform: none !important;
    transition: none !important;
  }
}

/* ===========================================
   Shop archive 3-card hero (Fish / Plants / Products)
   Glow when the card matches the current category archive.
   Pairs with archive-product.php's $gensou_card_active() helper.
   =========================================== */

.gensou-cat-card.is-active {
  box-shadow:
    0 0 0 4px #ffffff,
    0 0 0 8px var(--color-primary),
    0 18px 40px rgba(167, 20, 76, 0.35);
  transform: translateY(-3px);
  animation: gensou-cat-card-glow 2.4s ease-in-out infinite;
}

@keyframes gensou-cat-card-glow {
  0%, 100% {
    box-shadow:
      0 0 0 4px #ffffff,
      0 0 0 8px var(--color-primary),
      0 18px 40px rgba(167, 20, 76, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 4px #ffffff,
      0 0 0 10px var(--color-primary),
      0 22px 50px rgba(167, 20, 76, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gensou-cat-card.is-active {
    animation: none;
    transform: none;
  }
}