/* =============================================================
   categories.css — Carrossel de categorias
   ============================================================= */

/* ---- Seção ---- */
.categories-section {
  background: var(--color-categories-bg);
  padding: var(--spacing-8) var(--spacing-6);
  overflow: hidden;
  position: relative;
  margin-top: 0;
}

/* ---- Wrapper (overflow hidden para o carrossel) ---- */
.categories-section__wrapper {
  position: relative;
  overflow: hidden;
  /* margin: 0 var(--spacing-6); */
}

/* ---- Track (flex, move via translateX) ---- */
.categories-section__track {
  display: flex;
  gap: var(--spacing-2);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ---- Item ---- */
.categories-section__item {
  flex: 0 0 calc(25% - 0.375rem);
  min-width: 180px;
}

/* ---- Card ---- */
.categories-section__card {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  text-decoration: none;
  position: relative;
}

/* ---- Imagem do card ---- */
.categories-section__card-image {
  overflow: hidden;
  aspect-ratio: 3 / 5;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.categories-section__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--transition-slow);
}

.categories-section__card:hover .categories-section__card-image img,
.categories-section__card:focus-within .categories-section__card-image img {
  transform: scale(1.15);
}

/* ---- Nome sobre a imagem (overlay bottom) ---- */
.categories-section__card-name {
  position: absolute;
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: 300;
  color: var(--color-palette-off-white);
  line-height: 1.2;
  opacity: 0;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: opacity 300ms ease, transform 300ms ease;
}

/* Título aparece só no hover */
.categories-section__card:hover .categories-section__card-name,
.categories-section__card:focus-within .categories-section__card-name {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Scroll reveal ---- */
.categories-section.is-visible .categories-section__card-image {
  clip-path: inset(0 0 0 0);
}

/* Stagger por item */
.categories-section.is-visible .categories-section__item:nth-child(1) .categories-section__card-image {
  transition-delay: 0ms;
}

.categories-section.is-visible .categories-section__item:nth-child(2) .categories-section__card-image {
  transition-delay: 100ms;
}

.categories-section.is-visible .categories-section__item:nth-child(3) .categories-section__card-image {
  transition-delay: 200ms;
}

.categories-section.is-visible .categories-section__item:nth-child(4) .categories-section__card-image {
  transition-delay: 300ms;
}

.categories-section.is-visible .categories-section__item:nth-child(5) .categories-section__card-image {
  transition-delay: 400ms;
}

/* ---- Setas ---- */
.categories-section__arrow {
  position: absolute;
  top: 50%;
  /* em relação à imagem, não à seção inteira */
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.categories-section__arrow:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.65);
  transform: translateY(-50%) scale(1.08);
}

.categories-section__arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

.categories-section__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.categories-section__arrow--prev {
  left: var(--spacing-3);
}

.categories-section__arrow--next {
  right: var(--spacing-3);
}

.categories-section__arrow img {
  width: 24px;
  height: 24px;
  filter: brightness(0);
  opacity: 0.7;
}

/* ---- Responsividade ---- */
@media (max-width: 1023px) {
  .categories-section__item {
    flex: 0 0 calc(50% - 0.25rem);
  }
}

@media (hover: none) {
  .categories-section__card-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 480px) {
  .categories-section__item {
    flex: 0 0 100%;
  }
}

/* ---- prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .categories-section__track {
    transition: none;
  }

  .categories-section__card-image {
    clip-path: inset(0 0 0 0);
    transition: none;
  }

  .categories-section__card-name {
    transition: none;
  }

  .categories-section__card:hover .categories-section__card-name,
  .categories-section__card:focus-within .categories-section__card-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .categories-section__card-image img {
    transition: none;
  }
}