/* Category-page motion is scoped so product layout remains untouched. */
@keyframes category-heading-in {
  from {
    opacity: 0;
    transform: translateY(45px) skewY(2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) skewY(0);
  }
}

@keyframes category-label-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.category-page .eyebrow,
html.category-page .catalog h1,
html.category-page .result-count,
html.category-page .hero,
html.category-page .product-card {
  opacity: 0;
}

html.category-page .eyebrow,
html.category-page .result-count {
  animation: category-label-in 700ms cubic-bezier(0.22, 0.8, 0.28, 1)
    var(--category-intro-delay, 80ms) both;
}

html.category-page .catalog h1 {
  animation: category-heading-in var(--category-title-duration, 860ms)
    cubic-bezier(0.16, 1, 0.3, 1) 170ms both;
}

html.category-page .hero {
  clip-path: inset(10% 0 10% 0);
  transform: translateY(18px);
  transition:
    opacity var(--category-hero-duration, 920ms) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--category-hero-duration, 920ms) cubic-bezier(0.16, 1, 0.3, 1),
    clip-path var(--category-hero-duration, 920ms) cubic-bezier(0.16, 1, 0.3, 1);
}

html.category-page .hero img {
  transform: scale(1.07);
  transition: transform var(--category-hero-duration, 920ms)
    cubic-bezier(0.16, 1, 0.3, 1);
}

html.category-page .hero.category-motion-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

html.category-page .hero.category-motion-visible img {
  transform: scale(1);
}

html.category-page .product-card {
  transform: translateY(34px);
  transition:
    opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--category-card-delay, 0ms);
}

html.category-page .product-card.category-motion-visible {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  html.category-page .product-card-image img,
  html.category-page .product-info .category,
  html.category-page .product-info h2,
  html.category-page .arrow {
    transition:
      transform 340ms cubic-bezier(0.16, 1, 0.3, 1),
      border-color 240ms ease;
  }

  html.category-page .product-card:hover .product-image-wrap img {
    transform: translateY(-7px) scale(1.03);
  }

  html.category-page .product-card:hover .product-info .category {
    transform: translateY(-1px);
  }

  html.category-page .product-card:hover .product-info h2 {
    transform: translateY(-2px);
  }

  html.category-page .product-card:hover .arrow {
    transform: translateX(8px);
  }

  html.category-page .back-link:hover {
    transform: translateX(-4px);
  }

  html.category-page .back-link {
    transition:
      transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
      color 200ms ease;
  }
}

html.category-page[data-category="carrier"] {
  --category-title-duration: 950ms;
  --category-hero-duration: 1000ms;
}

html.category-page[data-category="tenda"] {
  --category-title-duration: 860ms;
  --category-hero-duration: 980ms;
}

html.category-page[data-category="tenda"] .hero {
  clip-path: inset(13% 0 13% 0);
}

html.category-page[data-category="tenda"] .hero img {
  transform: scale(1.09);
}

html.category-page[data-category="printilan"] {
  --category-title-duration: 760ms;
  --category-hero-duration: 850ms;
}

@media (prefers-reduced-motion: reduce) {
  html.category-page .eyebrow,
  html.category-page .catalog h1,
  html.category-page .result-count,
  html.category-page .hero,
  html.category-page .hero img,
  html.category-page .product-card,
  html.category-page .product-card-image img,
  html.category-page .product-info .category,
  html.category-page .product-info h2,
  html.category-page .arrow,
  html.category-page .back-link {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}