/* Interactive category cards used only by the top-level home page. */

#categories1 .category-card.category-card--animated {
  isolation: isolate;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(94, 22, 22, .1);
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1),
              box-shadow 260ms ease,
              background-color 260ms ease;
}

#categories1 .category-card.category-card--animated::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 18%,
    rgba(255, 231, 173, 0) 38%,
    rgba(255, 231, 173, .42) 49%,
    rgba(255, 231, 173, 0) 60%,
    transparent 82%
  );
  transform: translateX(-130%);
  transition: transform 560ms cubic-bezier(.16, 1, .3, 1);
}

#categories1 .category-card.category-card--animated:hover,
#categories1 .category-card.category-card--animated:focus-visible {
  background-color: #fffaf0;
  box-shadow: 0 18px 38px rgba(94, 22, 22, .2);
  transform: translateY(-7px);
}

#categories1 .category-card.category-card--animated:hover::after,
#categories1 .category-card.category-card--animated:focus-visible::after {
  transform: translateX(130%);
}

#categories1 .category-card.category-card--animated:active {
  transform: translateY(-2px);
  transition-duration: 120ms;
}

#categories1 .category-card.category-card--animated:focus-visible {
  outline: 3px solid #8c0000;
  outline-offset: 4px;
}

#categories1 .category-card.category-card--animated .category-product {
  z-index: 1;
  scale: 1;
  filter: drop-shadow(0 8px 10px rgba(68, 34, 15, .12));
  transition: scale 360ms cubic-bezier(.16, 1, .3, 1),
              filter 360ms ease;
}

#categories1 .category-card.category-card--animated:hover .category-product,
#categories1 .category-card.category-card--animated:focus-visible .category-product {
  scale: 1.065;
  filter: drop-shadow(0 14px 15px rgba(68, 34, 15, .22));
}

#categories1 .category-card.category-card--animated .category-title {
  z-index: 2;
  translate: 0 0;
  transition: color 220ms ease, translate 260ms cubic-bezier(.16, 1, .3, 1);
}

#categories1 .category-card.category-card--animated .category-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: #d09c50;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1);
}

#categories1 .category-card.category-card--animated:hover .category-title,
#categories1 .category-card.category-card--animated:focus-visible .category-title {
  color: #6f0000;
  translate: 0 -3px;
}

#categories1 .category-card.category-card--animated:hover .category-title::after,
#categories1 .category-card.category-card--animated:focus-visible .category-title::after {
  transform: scaleX(1);
}

#categories1 .category-card.category-card--animated.is-category-ready {
  animation: category-card-arrive 480ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--category-card-delay, 0ms);
}

@keyframes category-card-arrive {
  from {
    opacity: .2;
    clip-path: inset(0 0 100% 0 round 16px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 16px);
    filter: blur(0);
  }
}

@media (max-width: 500px) {
  #categories1 .category-card.category-card--animated:hover,
  #categories1 .category-card.category-card--animated:focus-visible {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #categories1 .category-card.category-card--animated {
    animation: none !important;
    transition-duration: .01ms !important;
    transform: none !important;
  }

  #categories1 .category-card.category-card--animated::after {
    display: none;
  }

  #categories1 .category-card.category-card--animated .category-product,
  #categories1 .category-card.category-card--animated .category-title,
  #categories1 .category-card.category-card--animated .category-title::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }

  #categories1 .category-card.category-card--animated .category-product {
    scale: 1 !important;
  }

  #categories1 .category-card.category-card--animated .category-title {
    translate: 0 0 !important;
  }
}