/**
 * Products page category-card motion — HelixMed products page only.
 * Scoped to `.vt-products-page .vt-products-section`.
 * Does not alter homepage motion tokens or behavior.
 */

.vt-products-page .vt-products-section {
  --vt-products-cat-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vt-products-cat-reveal-y: 16px;
  --vt-products-cat-reveal-y-mobile: 8px;
  --vt-products-cat-reveal-duration: 500ms;
  --vt-products-cat-stagger: 80ms;
  --vt-products-cat-stagger-mobile: 50ms;
  --vt-products-cat-hover-duration: 250ms;
  --vt-products-cat-image-zoom-duration: 300ms;
  --vt-products-cat-image-scale: 1.02;
  --vt-products-cat-hover-bg: var(--vt-products-primary, var(--vt-color-brand-dark, #0a518e));
  --vt-products-cat-hover-fg: #ffffff;
}

/* Reveal wrapper: fade-up only here; card shell keeps hover background. */
.vt-products-page .vt-products-section .vt-product-category-card__reveal {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
}

.vt-products-page .vt-products-section .vt-product-category-card__reveal > .vt-product-category-card__link {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/* Reveal base — only after JS enables `.vt-motion-enabled`                   */
/* -------------------------------------------------------------------------- */

.vt-products-page.vt-motion-enabled .vt-products-section [data-vt-reveal="category-card"] {
  opacity: 0;
  transform: translate3d(0, var(--vt-products-cat-reveal-y), 0);
  transition:
    opacity var(--vt-products-cat-reveal-duration) var(--vt-products-cat-reveal-ease),
    transform var(--vt-products-cat-reveal-duration) var(--vt-products-cat-reveal-ease);
  transition-delay:
    calc(var(--vt-products-cat-reveal-index, 0) * var(--vt-products-cat-stagger)),
    calc(var(--vt-products-cat-reveal-index, 0) * var(--vt-products-cat-stagger));
}

.vt-products-page.vt-motion-enabled .vt-products-section [data-vt-reveal="category-card"].is-revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

/* -------------------------------------------------------------------------- */
/* Hover / focus — fine pointer only; delays stay off hover props             */
/* -------------------------------------------------------------------------- */

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) {
  transition: background-color var(--vt-products-cat-hover-duration) ease;
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__body {
  background-color: transparent;
  transition: background-color var(--vt-products-cat-hover-duration) ease;
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__title {
  transition: color var(--vt-products-cat-hover-duration) ease;
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__image {
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--vt-products-cat-image-zoom-duration) ease;
  transition-delay: 0ms;
}

/* Neutralize shared brand-title hover from components.css on coarse/touch pointers. */
.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__link:hover .vt-product-category-card__title {
  color: #1e293b;
}

@media (hover: hover) and (pointer: fine) {
  .vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home):hover {
    background-color: var(--vt-products-cat-hover-bg);
  }

  .vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home):hover .vt-product-category-card__body {
    background-color: var(--vt-products-cat-hover-bg);
  }

  .vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home):hover .vt-product-category-card__title,
  .vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__link:hover .vt-product-category-card__title {
    color: var(--vt-products-cat-hover-fg);
  }

  /* Zoom targets the rendered <img>; link:hover covers the full card hit area. */
  .vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__link:hover .vt-product-category-card__image {
    transform: scale(var(--vt-products-cat-image-scale, 1.02));
  }
}

/* Keyboard focus-visible: same fill as hover, keep outline clear. */
.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__link:focus-visible {
  outline: 2px solid var(--vt-color-focus, #3785c5);
  outline-offset: 2px;
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home):has(.vt-product-category-card__link:focus-visible) {
  background-color: var(--vt-products-cat-hover-bg);
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home):has(.vt-product-category-card__link:focus-visible) .vt-product-category-card__body {
  background-color: var(--vt-products-cat-hover-bg);
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__link:focus-visible .vt-product-category-card__title {
  color: var(--vt-products-cat-hover-fg);
}

.vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home):has(.vt-product-category-card__link:focus-visible) .vt-product-category-card__image {
  transform: scale(var(--vt-products-cat-image-scale, 1.02));
}

/* -------------------------------------------------------------------------- */
/* Mobile: shorter travel, tighter stagger                                    */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .vt-products-page .vt-products-section {
    --vt-products-cat-reveal-y: var(--vt-products-cat-reveal-y-mobile);
    --vt-products-cat-stagger: var(--vt-products-cat-stagger-mobile);
  }
}

/* -------------------------------------------------------------------------- */
/* Reduced motion — show immediately, no travel / zoom / timed hover          */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vt-products-page .vt-products-section {
    --vt-products-cat-reveal-y: 0px;
    --vt-products-cat-reveal-y-mobile: 0px;
    --vt-products-cat-stagger: 0ms;
    --vt-products-cat-stagger-mobile: 0ms;
    --vt-products-cat-hover-duration: 0ms;
    --vt-products-cat-image-zoom-duration: 0ms;
    --vt-products-cat-image-scale: 1;
  }

  .vt-products-page.vt-motion-enabled .vt-products-section [data-vt-reveal="category-card"],
  .vt-products-page.vt-motion-enabled .vt-products-section [data-vt-reveal="category-card"].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .vt-products-page .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__image {
    transform: none !important;
    transition: none;
  }
}

.vt-products-page.vt-motion-reduced.vt-motion-enabled .vt-products-section [data-vt-reveal="category-card"],
.vt-products-page.vt-motion-reduced.vt-motion-enabled .vt-products-section [data-vt-reveal="category-card"].is-revealed {
  opacity: 1;
  transform: none;
  transition: none;
}

.vt-products-page.vt-motion-reduced .vt-products-section .vt-product-category-card:not(.vt-product-category-card--home) .vt-product-category-card__image {
  transform: none !important;
  transition: none;
}