/* category-showcase component */

.home-category-showcase {
  padding: 9px 0 5px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.category-showcase-scroll {
  display: grid;
  grid-template-columns: repeat(11, minmax(92px, 1fr));
  align-items: start;
  gap: 8px;
  padding: 14px 12px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 12px;
  scrollbar-width: none;
}

.category-showcase-scroll::-webkit-scrollbar {
  display: none;
}

.showcase-item {
  display: flex;
  min-width: 92px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.showcase-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 84px;
  height: 84px;
  flex: 0 0 84px;
  place-items: center;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, #ff1a35, #ff8a00, #a46cff) border-box;
  border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease;
}

.showcase-item.has-glow .showcase-visual::before {
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, #ff1744, #ff8a00, #ec1cff, #745cff, #ff1744);
  content: "";
  filter: blur(7px);
  inset: -5px;
  opacity: .42;
  animation: category-glow 2.8s ease-in-out infinite;
}

.showcase-item.has-glow:hover .showcase-visual::before,
.showcase-item.has-glow:focus-visible .showcase-visual::before {
  opacity: .82;
  animation-duration: 1.15s;
}

.showcase-item.has-glow-static .showcase-visual {
  box-shadow: 0 0 0 4px rgb(236 0 98 / 8%), 0 7px 19px rgb(236 0 98 / 22%);
}

.showcase-item.has-glow-static .showcase-visual::before {
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, #ff1744, #ff7a00 48%, #e40072);
  content: "";
  filter: blur(8px);
  inset: -5px;
  opacity: .58;
}

.showcase-item.has-glow-static > strong {
  color: #d90052;
  font-weight: 700;
}

.showcase-item.has-glow-static:hover .showcase-visual::before,
.showcase-item.has-glow-static:focus-visible .showcase-visual::before {
  opacity: .82;
}

@keyframes category-glow {
  0%, 100% {
    filter: blur(7px) hue-rotate(0deg);
    opacity: .3;
    transform: scale(.97) rotate(0deg);
  }
  50% {
    filter: blur(9px) hue-rotate(35deg);
    opacity: .62;
    transform: scale(1.07) rotate(180deg);
  }
}

.ring-pink {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, #ff345f, #f43bb4, #8b70ff) border-box;
}

.ring-orange {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(145deg, #ff3b20, #ffa000, #ff396d) border-box;
}

.showcase-item:hover .showcase-visual {
  box-shadow: 0 7px 18px rgb(235 0 25 / 15%);
  transform: translateY(-3px);
}

.showcase-item.is-promoted .showcase-visual {
  box-shadow: 0 3px 12px rgb(237 0 23 / 9%);
}

.showcase-item.is-promoted .showcase-visual::after {
  position: absolute;
  z-index: 3;
  right: -5px;
  bottom: 4px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5a00, var(--brand-red));
  box-shadow: 0 3px 9px rgb(237 0 23 / 30%);
  color: #fff;
  content: "✦";
  font-size: 10px;
}

.showcase-item.is-promoted > strong {
  color: #d90018;
  font-weight: 700;
}

.showcase-item.is-promoted:hover .showcase-visual,
.showcase-item.is-promoted:focus-visible .showcase-visual {
  animation: campaign-hover .65s cubic-bezier(.2, .8, .2, 1) both;
}

.showcase-item.is-promoted:hover .discount-badge,
.showcase-item.is-promoted:focus-visible .discount-badge {
  animation: promo-badge-bounce .55s ease both;
}

.showcase-item.is-promoted:hover .showcase-visual::after,
.showcase-item.is-promoted:focus-visible .showcase-visual::after {
  animation: promo-star-spin .7s ease both;
}

.showcase-item.is-promo-active .showcase-visual {
  animation: campaign-burst 1.15s cubic-bezier(.2, .8, .2, 1) both;
}

.showcase-item.is-promo-active .discount-badge {
  animation: promo-badge-pop 1.15s ease both;
}

.showcase-item.is-promo-active .showcase-visual::after {
  animation: promo-star-pop 1.15s ease both;
}

@keyframes campaign-hover {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    box-shadow: 0 0 0 7px rgb(237 0 23 / 10%), 0 12px 24px rgb(237 0 23 / 22%);
    transform: translateY(-6px) scale(1.07) rotate(-2deg);
  }
  70% {
    transform: translateY(-4px) scale(1.04) rotate(1deg);
  }
  100% {
    box-shadow: 0 0 0 4px rgb(237 0 23 / 7%), 0 9px 20px rgb(237 0 23 / 18%);
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes campaign-burst {
  0%, 100% {
    box-shadow: 0 3px 12px rgb(237 0 23 / 9%);
    transform: scale(1);
  }
  28% {
    box-shadow: 0 0 0 9px rgb(237 0 23 / 9%), 0 10px 24px rgb(237 0 23 / 20%);
    transform: scale(1.08) rotate(-2deg);
  }
  48% {
    transform: scale(1.03) rotate(2deg);
  }
  68% {
    box-shadow: 0 0 0 5px rgb(255 98 0 / 8%), 0 8px 18px rgb(237 0 23 / 15%);
    transform: scale(1.06) rotate(0);
  }
}

@keyframes promo-badge-bounce {
  0%, 100% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-5px) rotate(-5deg) scale(1.12); }
  70% { transform: translateY(-2px) rotate(3deg); }
}

@keyframes promo-badge-pop {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.22) rotate(-6deg); }
  48% { transform: scale(.97) rotate(3deg); }
  68% { transform: scale(1.12) rotate(0); }
}

@keyframes promo-star-spin {
  0% { transform: rotate(0) scale(1); }
  55% { transform: rotate(210deg) scale(1.25); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes promo-star-pop {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.4) rotate(90deg); }
  55% { transform: scale(.9) rotate(210deg); }
  75% { transform: scale(1.2) rotate(300deg); }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-item.is-promoted .showcase-visual,
  .showcase-item.is-promoted .discount-badge,
  .showcase-item.is-promoted .showcase-visual::after {
    animation: none !important;
  }

  .showcase-item.has-glow .showcase-visual::before {
    animation: none;
    opacity: .4;
  }
}

.showcase-item strong {
  color: #27272a;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.product-sprite {
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-image: url("../img/home/category-products.png");
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: 900% auto;
}

.showcase-media--image {
  width: 74px;
  height: 74px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: contain;
}

.showcase-media--icon {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.product-1 { background-position-x: 0; }
.product-2 { background-position-x: 12.5%; }
.product-3 { background-position-x: 25%; }
.product-4 { background-position-x: 37.5%; }
.product-5 { background-position-x: 50%; }
.product-6 { background-position-x: 62.5%; }
.product-7 { background-position-x: 75%; }
.product-8 { background-position-x: 87.5%; }
.product-9 { background-position-x: 100%; }

.discount-badge {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: -6px;
  min-width: 35px;
  padding: 3px 6px;
  border-radius: 10px 10px 10px 2px;
  background: var(--brand-red);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.badge-orange {
  background: #ff6200;
}

.badge-pink {
  background: #ec0062;
}

.showcase-action .showcase-visual {
  width: 82px;
  height: 82px;
  background: #fff;
}

.showcase-action .showcase-media--icon {
  filter: invert(14%) sepia(99%) saturate(6348%) hue-rotate(350deg) brightness(101%);
}

.showcase-action:last-child .showcase-media--icon {
  width: 50px;
  height: 50px;
}