/* __KIKI_CAT_CARD_FX__ 色铺满；箭头右→左；字变白右移；藏图标 */
.category-grid .category-card {
  --kiki-card-ease: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
  z-index: 0;
  min-height: 104px;
  box-shadow: 0 0 0 2px var(--cat-color), 0 4px 16px #0000000a !important;
  transition:
    box-shadow 0.6s var(--kiki-card-ease),
    transform 0.6s var(--kiki-card-ease) !important;
}

.category-grid .category-card:hover,
.category-grid .category-card:focus-within {
  transform: none !important;
  box-shadow: 0 0 0 12px transparent !important;
}

.category-grid .category-card:active {
  scale: 0.98;
}

.category-grid .category-card__circle {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--cat-color);
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  pointer-events: none;
  transition:
    transform 0.6s var(--kiki-card-ease),
    opacity 0.6s var(--kiki-card-ease);
}

.category-grid .category-card:hover .category-card__circle,
.category-grid .category-card:focus-within .category-card__circle {
  opacity: 1;
  transform: scale(1);
}

.category-grid .category-card__ico {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  max-width: 72px;
  overflow: hidden;
  transition:
    opacity 0.6s var(--kiki-card-ease),
    max-width 0.6s var(--kiki-card-ease);
}

.category-grid .category-card:hover .category-card__ico,
.category-grid .category-card:focus-within .category-card__ico {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

.category-grid .category-card strong {
  position: absolute !important;
  top: 50%;
  left: 88px;
  z-index: 1;
  flex: none !important;
  width: max-content;
  margin: 0;
  color: #0f172a !important;
  white-space: nowrap;
  transform: translateY(-50%);
  transition:
    left 0.6s var(--kiki-card-ease),
    color 0.6s var(--kiki-card-ease);
}

.category-grid .category-card:hover strong,
.category-grid .category-card:focus-within strong {
  left: calc(100% - 132px);
  color: #fff !important;
}

.category-grid .category-card__arr {
  position: absolute;
  top: 50%;
  left: calc(100% - 48px);
  z-index: 1;
  font-size: 24px;
  line-height: 1;
  color: var(--cat-color);
  pointer-events: none;
  transform: translateY(-50%);
  transition:
    left 0.6s var(--kiki-card-ease),
    color 0.6s var(--kiki-card-ease);
}

.category-grid .category-card:hover .category-card__arr,
.category-grid .category-card:focus-within .category-card__arr {
  left: 24px;
  color: #fff;
}

.category-grid .category-card__arrow,
.category-grid .category-card__arr--in,
.category-grid .category-card__arr--out {
  display: none !important;
}

html[data-vp="phone"] .category-grid .category-card {
  min-height: 96px;
}

html[data-vp="phone"] .category-grid .category-card strong {
  left: 50%;
  transform: translate(-50%, -50%);
}

html[data-vp="phone"] .category-grid .category-card:hover strong,
html[data-vp="phone"] .category-grid .category-card:focus-within strong {
  left: auto;
  right: 8px;
  transform: translateY(-50%);
}

html[data-vp="phone"] .category-grid .category-card__arr {
  left: calc(100% - 22px);
  font-size: 18px;
}

html[data-vp="phone"] .category-grid .category-card:hover .category-card__arr,
html[data-vp="phone"] .category-grid .category-card:focus-within .category-card__arr {
  left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .category-grid .category-card,
  .category-grid .category-card__circle,
  .category-grid .category-card__ico,
  .category-grid .category-card strong,
  .category-grid .category-card__arr {
    transition: color 0.2s ease, opacity 0.2s ease !important;
  }

  .category-grid .category-card:hover .category-card__circle,
  .category-grid .category-card:focus-within .category-card__circle {
    transform: scale(1);
  }

  .category-grid .category-card:hover strong,
  .category-grid .category-card:focus-within strong,
  .category-grid .category-card:hover .category-card__arr,
  .category-grid .category-card:focus-within .category-card__arr {
    left: 88px;
  }

  .category-grid .category-card:hover .category-card__arr,
  .category-grid .category-card:focus-within .category-card__arr {
    left: 24px;
  }

  .category-grid .category-card:hover strong,
  .category-grid .category-card:focus-within strong {
    left: calc(100% - 132px);
  }
}