/* =========================================================
   Categories motion — matched to Products section style
   (products.html .category-track .g-card animations)
   ========================================================= */

body.page-home .home-collection {
  position: relative;
  isolation: isolate;
}

body.page-home .home-collection .wrap,
body.page-home .home-collection .home-cats-viewport {
  position: relative;
  z-index: 1;
}

/* Soft gold dust (subtle, products-adjacent ambience) */
body.page-home .home-collection-dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.page-home .home-collection-dust span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 162, 74, 0.4);
  opacity: 0.3;
  animation: homeCatDustFloat var(--d, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

body.page-home .home-collection-dust span:nth-child(odd) {
  width: 2px;
  height: 2px;
}

@keyframes homeCatDustFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.2;
  }
  50% {
    transform: translate3d(var(--dx, 4px), var(--dy, -8px), 0);
    opacity: 0.4;
  }
}

/* ---------- Heading entrance (like product section opens) ---------- */
body.page-home .home-collection .section-head {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-home .home-collection.cats-inview .section-head {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Card base — product-style transition ---------- */
body.page-home .home-collection .home-cat {
  opacity: 0;
  transform: translateY(12px);
  transition:
    transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) !important;
}

/* Product-style image entrance */
@keyframes homeCatImgEntrance {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.page-home .home-collection .home-cat-media {
  position: relative;
  overflow: hidden;
}

body.page-home .home-collection .home-cat-media img {
  opacity: 0;
  transform: translateY(12px);
  transition: transform 0.5s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)) !important;
  will-change: transform, opacity;
}

body.page-home .home-collection.cats-inview .home-cat {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.12s + var(--cat-i, 0) * 0.08s);
}

body.page-home .home-collection.cats-inview .home-cat-media img {
  animation: homeCatImgEntrance 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.18s + var(--cat-i, 0) * 0.08s);
}

body.page-home .home-collection.cats-ready .home-cat {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s !important;
}

body.page-home .home-collection.cats-ready .home-cat-media img {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

/* Focus (marquee center) — same lift language as product hover, slightly stronger */
body.page-home .home-collection.cats-ready .home-cat.is-focus {
  transform: translateY(-4px) scale(1.04);
  z-index: 4;
  border-color: rgba(200, 162, 74, 0.5);
  box-shadow:
    0 16px 38px rgba(200, 162, 74, 0.16),
    0 6px 16px rgba(34, 34, 34, 0.04);
}

body.page-home .home-collection.cats-ready .home-cat.is-focus .home-cat-media img {
  transform: scale(1.03);
}

/* ---------- Hover — match products.html category-track ---------- */
@media (hover: hover) and (pointer: fine) {
  body.page-home .home-collection.cats-ready .home-cat:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(200, 162, 74, 0.5) !important;
    box-shadow:
      0 16px 38px rgba(200, 162, 74, 0.16),
      0 6px 16px rgba(34, 34, 34, 0.04) !important;
    z-index: 6;
  }

  body.page-home .home-collection.cats-ready .home-cat.is-focus:hover {
    transform: translateY(-6px) scale(1.04) !important;
  }

  body.page-home .home-collection.cats-ready .home-cat:hover .home-cat-media img {
    transform: scale(1.05) !important;
  }

  body.page-home .home-collection.cats-ready .home-cat:hover .home-cat-label {
    transform: translateY(-2px);
  }

  /* Soft light sweep — luxury product photography feel */
  body.page-home .home-collection.cats-ready .home-cat:hover .home-cat-media::after {
    animation: homeCatShimmer 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

body.page-home .home-cat-media::after {
  content: "";
  position: absolute;
  inset: -20% -40%;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 252, 245, 0.1) 44%,
    rgba(255, 255, 255, 0.22) 50%,
    rgba(255, 252, 245, 0.1) 56%,
    transparent 64%
  );
  transform: translate3d(-120%, 0, 0) skewX(-14deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

@keyframes homeCatShimmer {
  0% {
    opacity: 0;
    transform: translate3d(-120%, 0, 0) skewX(-14deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(120%, 0, 0) skewX(-14deg);
  }
}

body.page-home .home-cat-label {
  transition:
    transform 0.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
    letter-spacing 0.4s ease;
}

/* Keep infinite marquee running */
body.page-home .home-cats-track.is-marquee {
  animation-play-state: running !important;
}

@media (max-width: 960px) {
  body.page-home .home-collection.cats-ready .home-cat.is-focus {
    transform: translateY(-2px) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .home-collection .section-head,
  body.page-home .home-collection .home-cat,
  body.page-home .home-collection .home-cat-media img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  body.page-home .home-collection-dust,
  body.page-home .home-cat-media::after {
    display: none !important;
  }

  body.page-home .home-collection.cats-ready .home-cat:hover,
  body.page-home .home-collection.cats-ready .home-cat.is-focus:hover {
    transform: none !important;
  }
}