/* =========================================================================
   JARDIM ENCANTADO PRESERVADOS — css/catalogo.css  (dono: A7)
   Seção #composicoes: grade de 6 cartões premium com efeito "vitrine".
   Mobile-first. Prefixo de classe: .cat-  · NÃO redefine .secao/.glass/.btn.
   Só transform/opacity/filter são animados. Blur (vitrine) só no desktop.
   Anatomia do cartão (empilhamento):
     .glass (painel)  →  .cat-card__moldura (fundo atmosférico, recortado)
     →  .cat-card__sombra (elipse sob o produto)  →  .cat-card__recorte (por cima,
     vazando o topo)  →  .cat-card__corpo (nome, descrição, preço, CTA).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. LAYOUT DA SEÇÃO E CABEÇALHO
   ------------------------------------------------------------------------- */
.secao--catalogo {
  gap: clamp(2.5rem, 5vw, 4rem);
}

.cat-cabecalho {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 1.6vw, 1.3rem);
}

.cat-cabecalho__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
/* pequeno traço técnico antes do rótulo (linha fina, sem enfeite gratuito) */
.cat-cabecalho__rotulo::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3rem);
  height: 1px;
  background: var(--je-glass-border);
}

.cat-cabecalho__titulo {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  max-width: 16ch;
}

.cat-cabecalho__apoio {
  color: var(--je-white-60);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  max-width: 54ch;
}

/* -------------------------------------------------------------------------
   2. GRADE — mobile 1 col · tablet 2 col · desktop 3 col
   ------------------------------------------------------------------------- */
.cat-grade {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 5vw, 3.75rem);
  /* espaço superior para o recorte que vaza o topo do 1º cartão não ser cortado */
  padding-top: clamp(2rem, 4vw, 3.25rem);
  /* perspectiva compartilhada: dá profundidade real ao tilt e ao translateZ do recorte */
  perspective: 1200px;
}

@media (min-width: 768px) {
  .cat-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cat-grade { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------------------
   3. CARTÃO — painel de vidro (.glass vem do base.css)
   ------------------------------------------------------------------------- */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  /* recorte precisa vazar o topo → nunca recortar o cartão */
  overflow: visible;
  transform-style: preserve-3d;
  /* transição base do próprio cartão (elevação/sombra/borda na vitrine) */
  transition:
    filter var(--dur-media, .45s) var(--je-ease),
    opacity var(--dur-media, .45s) var(--je-ease),
    box-shadow var(--dur-media, .45s) var(--je-ease),
    border-color var(--dur-media, .45s) var(--je-ease);
}

/* Realce de foco por teclado no CTA → destaca o cartão inteiro */
.cat-card:focus-within {
  border-color: rgba(98, 217, 155, .4);
  box-shadow:
    0 0 40px -12px var(--je-glow),
    0 24px 60px -30px rgba(5, 15, 10, .8);
}

/* -------------------------------------------------------------------------
   4. PALCO / MOLDURA / FUNDO ATMOSFÉRICO
   ------------------------------------------------------------------------- */
.cat-card__palco {
  position: relative;
  aspect-ratio: 4 / 5;
  margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
  transform-style: preserve-3d;
}

/* Moldura: recorta o fundo com raio; o recorte fica FORA dela (vaza). */
.cat-card__moldura {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--je-radius-sm);
  background: var(--je-green-950);
  box-shadow: inset 0 0 0 1px var(--je-glass-border);
}

.cat-card__fundo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* leve zoom p/ permitir parallax interno sem mostrar bordas vazias */
  transform: scale(1.06);
  transition: transform var(--dur-cine, .8s) var(--je-ease);
  will-change: transform;
}

/* Sombra elíptica suave SOB o produto (radial-gradient, não drop-shadow pesado) */
.cat-card__sombra {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 66%;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(5, 15, 10, .55) 0%,
    rgba(5, 15, 10, .32) 45%,
    rgba(5, 15, 10, 0) 72%);
  filter: blur(2px);
  transition:
    transform var(--dur-media, .45s) var(--je-ease),
    opacity var(--dur-media, .45s) var(--je-ease);
  pointer-events: none;
}

/* Recorte transparente do produto POR CIMA, vazando ~12% acima do topo.
   translateZ eleva o recorte no espaço 3D → parallax entre fundo e produto no tilt. */
.cat-card__recorte {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 90%;
  height: 102%;
  object-fit: contain;
  object-position: bottom center;
  transform: translateX(-50%) translateZ(38px);
  transform-origin: 50% 100%;
  transition: transform var(--dur-media, .45s) var(--je-ease);
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(5, 15, 10, .38));
}

/* -------------------------------------------------------------------------
   5. CORPO DO CARTÃO — nome, descrição, preço, CTA
   ------------------------------------------------------------------------- */
.cat-card__corpo {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 0 clamp(.2rem, .6vw, .5rem) clamp(.3rem, .6vw, .5rem);
  margin-top: auto;
}

.cat-card__nome {
  font-family: var(--je-font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.08;
  color: var(--je-white);
}

.cat-card__desc {
  color: var(--je-white-60);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 34ch;
}

.cat-card__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: .55rem;
}

.cat-card__preco {
  color: var(--je-accent);
}

/* CTA — herda .btn.btn--fantasma; garante alvo tátil ≥44px */
.cat-card__cta {
  min-height: 44px;
  padding-block: .75em;
  font-size: .85rem;
  touch-action: manipulation;
}

/* -------------------------------------------------------------------------
   6. EFEITO VITRINE — HOVER DESKTOP (ponteiro fino)
   O tilt (rotateX/rotateY) é aplicado pelo js/catalogo.js via gsap.quickTo.
   Aqui: elevação do recorte, sombra mais profunda, glow, atenuação dos irmãos.
   ------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {

  /* Cartão em foco = borda/brilho intensificam */
  .cat-card:hover {
    border-color: rgba(98, 217, 155, .45);
    box-shadow:
      0 0 56px -10px var(--je-glow),
      0 40px 80px -34px rgba(5, 15, 10, .9);
    z-index: 2;                 /* fica acima dos irmãos atenuados */
  }

  /* Recorte sobe, cresce e ganha sombra projetada mais profunda */
  .cat-card:hover .cat-card__recorte {
    transform: translateX(-50%) translateZ(60px) translateY(-8px) scale(1.04);
    filter: drop-shadow(0 30px 40px rgba(5, 15, 10, .5));
  }

  /* Sombra sob o produto acompanha (mais larga e suave = produto elevado) */
  .cat-card:hover .cat-card__sombra {
    transform: translateX(-50%) scale(1.12);
    opacity: .85;
  }

  /* Parallax interno leve do fundo */
  .cat-card:hover .cat-card__fundo {
    transform: scale(1.12);
  }

  /* Irmãos escurecem e desfocam (vitrine) enquanto um cartão está em foco */
  .cat-grade:hover .cat-card:not(:hover) {
    filter: brightness(.55) blur(2px);
    opacity: .82;
    transition:
      filter var(--dur-media, .45s) var(--je-ease),
      opacity var(--dur-media, .45s) var(--je-ease);
  }
}

/* -------------------------------------------------------------------------
   7. TOUCH / MOBILE — sem tilt; cartão central da viewport recebe destaque
   Classes alternadas por js/catalogo.js (IntersectionObserver + centro).
   ------------------------------------------------------------------------- */
.cat-card.is-destaque {
  border-color: rgba(98, 217, 155, .4);
  box-shadow:
    0 0 44px -12px var(--je-glow),
    0 30px 64px -34px rgba(5, 15, 10, .85);
}
.cat-card.is-destaque .cat-card__recorte {
  transform: translateX(-50%) translateZ(0) translateY(-6px) scale(1.03);
}
.cat-card.is-destaque .cat-card__sombra {
  transform: translateX(-50%) scale(1.1);
  opacity: .8;
}
.cat-card.is-atenuado {
  opacity: .72;
}

/* Feedback tátil no press do CTA e do cartão */
.cat-card__cta:active { transform: scale(.97); }

/* -------------------------------------------------------------------------
   8. MOVIMENTO REDUZIDO — desliga tilt/vitrine (mantém legibilidade total)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cat-card__fundo { transform: none; }
  .cat-card__recorte { transform: translateX(-50%); }

  .cat-grade:hover .cat-card:not(:hover) {
    filter: none;
    opacity: 1;
  }
  .cat-card:hover .cat-card__recorte,
  .cat-card.is-destaque .cat-card__recorte {
    transform: translateX(-50%);
  }
  .cat-card.is-atenuado { opacity: 1; }
}

/* =========================================================================
   9. VITRINE EM FAIXAS DESLIZANTES (marquee) — duas linhas em sentidos
   opostos, lentas por padrão, pausam no hover, com botão "Acelerar".
   Velocidade CONSTANTE (px/s) definida por js/catalogo.js via --cat-dur,
   independente de quantos cards houver. Os cards mantêm o design original.
   ========================================================================= */
.cat-vitrine {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* Barra de controle (botão de velocidade), alinhada à direita */
.cat-vitrine__controles {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
}
.cat-velocidade {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 44px;
  padding: .5em 1.1em;
  font-family: var(--je-font-ui);
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--je-white-60);
  background: var(--je-glass);
  border: 1px solid var(--je-glass-border);
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--dur-micro,.22s), border-color var(--dur-micro,.22s);
}
.cat-velocidade:hover,
.cat-velocidade:focus-visible { color: var(--je-white); border-color: var(--je-accent); }
.cat-velocidade__ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--je-accent);
  box-shadow: 0 0 10px var(--je-glow);
}
.cat-vitrine.is-rapido .cat-velocidade__ponto { animation: cat-pisca 1s steps(2) infinite; }
@keyframes cat-pisca { 50% { opacity: .3; } }

/* Cada faixa: janela que corta a trilha longa. O padding-top acomoda o
   recorte que vaza o topo do card (não some com overflow: hidden). */
.cat-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  /* esmaece as bordas laterais (entra/sai suave) */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cat-marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  will-change: transform;
  animation: cat-desliza var(--cat-dur, 70s) linear infinite;
}
/* faixa de baixo corre no sentido oposto */
.cat-marquee--base .cat-marquee__track { animation-direction: reverse; }
/* botão "Acelerar" troca para a duração rápida */
.cat-vitrine.is-rapido .cat-marquee__track { animation-duration: var(--cat-dur-rapido, 28s); }
/* pausa ao passar o mouse ou focar um card dentro da faixa */
.cat-marquee:hover .cat-marquee__track,
.cat-marquee:focus-within .cat-marquee__track { animation-play-state: paused; }

/* largura fixa dos cards dentro da faixa (não encolhem) */
.cat-marquee__track > .cat-card {
  flex: 0 0 clamp(240px, 74vw, 312px);
}

@keyframes cat-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* trilha = 2× conjunto → loop perfeito */
}

/* Movimento reduzido: sem auto-scroll; vira rolagem horizontal manual. */
@media (prefers-reduced-motion: reduce) {
  .cat-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .cat-marquee__track { animation: none; }
}

/* =========================================================================
   10. CARD DE FOTO — variante "Nossos trabalhos" (portfólio real)
   Reaproveita o shell .cat-card (vidro + sizing do marquee); troca a
   anatomia de produto por uma FOTO 4:5 emoldurada + legenda.
   ========================================================================= */
.cat-card--foto {
  overflow: hidden;              /* a foto respeita o raio do card */
  gap: 0;
}

.trab-foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--je-radius-sm);
  overflow: hidden;
  background: var(--je-green-950);
  box-shadow: inset 0 0 0 1px var(--je-glass-border);
  margin-bottom: clamp(.9rem, 1.6vw, 1.25rem);
}
.trab-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform var(--dur-cine, .8s) var(--je-ease);
  will-change: transform;
}
/* leve zoom quando o card está em foco (faixa pausa no hover) */
.cat-card--foto:hover .trab-foto img { transform: scale(1.08); }

/* Etiqueta do tipo de trabalho (Corporativo, Neon, Ativação…) */
.trab-tag {
  position: absolute;
  top: .7rem;
  left: .7rem;
  padding: .34em .7em;
  font-size: .5rem;
  letter-spacing: .2em;
  color: var(--je-white);
  background: rgba(5, 15, 10, .55);
  border: 1px solid var(--je-glass-border);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* CTA da seção (abaixo das faixas) */
.cat-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

@media (prefers-reduced-motion: reduce) {
  .cat-card--foto:hover .trab-foto img { transform: scale(1.02); }
}