/*
Vitrine 3D de produtos em destaque, logo abaixo do hero da Home (pedido do
Ricardo, 24/07/2026). Recriação em CSS puro + GSAP/ScrollTrigger (ver
motion.js) do efeito "Hero Parallax" da Aceternity UI, que originalmente é
React + framer-motion: mesmo efeito visual (3 fileiras de produto,
deslizando em direções opostas conforme rola, com tilt 3D que endireita),
sem trocar a arquitetura do tema (CSS puro, sem framework, decisão já
fechada em 21/07/2026). Aqui é só estrutura/aparência; a animação de
scroll vive em motion.js.
*/
.vitrine-3d{
    height: 300vh;
    position: relative;
    perspective: 1000px;
    /* "overflow: hidden" removido daqui (segundo fix do diretor,
       24/07/2026, achado do validador): qualquer ancestral com overflow
       diferente de "visible" entre um elemento sticky e a viewport real
       quebra o sticky (a especificacao do CSS faz o sticky "grudar" no
       scrollport desse ancestral em vez da tela, e como este wrapper nao
       rola de verdade, o elemento sticky vira static na pratica). A
       contencao horizontal das fileiras (evitar barra de rolagem
       lateral na pagina) agora fica em "body" (02-base.css), que nao
       tem esse mesmo efeito colateral por ser o proprio contexto raiz
       de rolagem. */
}
.vitrine-3d__pin{
    /* Sexto fix do diretor (24/07/2026, causa raiz real achada pelo
       validador): o pin do ScrollTrigger e a animacao de "endireitar"
       (rotationX/rotationZ/y/opacity) estavam os DOIS controlando o
       MESMO elemento (".vitrine-3d__cena"). O GSAP usa a propriedade
       "y" internamente pra manter o elemento pinado grudado na tela
       enquanto a pagina rola (contrapondo o scroll); minha propria
       animacao TAMBEM mexia em "y" nesse mesmo elemento (parte do
       efeito de assentar vindo de cima) — os dois brigavam pela mesma
       propriedade, e depois que minha animacao terminava (~30% do
       percurso), o valor de "y" ficava congelado, o pin perdia a
       compensacao de scroll e o elemento saia rolando normal junto
       com a pagina pelo resto do percurso (o vao vazio que apareceu em
       4 rodadas seguidas de validacao).

       Correcao: separar em dois elementos. Este wrapper
       (".vitrine-3d__pin") e o UNICO alvo do pin nativo do
       ScrollTrigger (motion.js), sem nenhuma outra animacao mexendo
       nele. A altura/centralizacao que antes ficava em ".cena" mudou
       pra ca. */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.vitrine-3d__cena{
    /* So esta div recebe a animacao de assentar (rotationX/rotationZ/
       y/opacity, ver motion.js), livre de qualquer disputa com o pin,
       que agora vive inteiramente no wrapper pai (".vitrine-3d__pin"). */
    position: relative;
    padding-block: var(--espaco-lg);
    transform-style: preserve-3d;
    will-change: transform;
}
.vitrine-3d__fileira{
    display: flex;
    gap: var(--espaco-md);
    margin-bottom: var(--espaco-md);
    padding-inline: var(--espaco-lg);
    will-change: transform;
}
.vitrine-3d__fileira--2{
    flex-direction: row;
}
.vitrine-3d__fileira--1,
.vitrine-3d__fileira--3{
    flex-direction: row-reverse;
}
.vitrine-3d__card{
    /* Altura calculada em vh (nao vw) de proposito: com a cena agora
       fixa em 100vh (pin acima), as 3 fileiras + espacamento precisam
       caber numa unica tela, entao o limite real e a ALTURA da janela,
       nao a largura. */
    position: relative;
    flex-shrink: 0;
    width: clamp(160px, 20vw, 300px);
    height: clamp(100px, 16vh, 190px);
    border-radius: var(--raio-lg);
    overflow: hidden;
    box-shadow: var(--sombra-lg);
    display: block;
}
.vitrine-3d__img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    background: var(--cor-linho-2);
}
.vitrine-3d__overlay{
    position: absolute;
    inset: 0;
    background: var(--cor-cacau);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.vitrine-3d__card:hover .vitrine-3d__overlay,
.vitrine-3d__card:focus-visible .vitrine-3d__overlay{
    opacity: 0.55;
}
.vitrine-3d__titulo{
    position: absolute;
    left: var(--espaco-md);
    bottom: var(--espaco-md);
    right: var(--espaco-md);
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: var(--texto-md);
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.vitrine-3d__card:hover .vitrine-3d__titulo,
.vitrine-3d__card:focus-visible .vitrine-3d__titulo{
    opacity: 1;
    transform: translateY(0);
}
.vitrine-3d__card:focus-visible{
    outline: 2px solid var(--cor-branco);
    outline-offset: 4px;
}

@media (max-width: 600px){
    /* Efeito 3D mantido tambem no mobile (decisao explicita do Ricardo,
       24/07/2026), so as dimensoes sao recalibradas pra caber numa tela
       estreita sem o cartao ficar maior que a propria viewport. */
    .vitrine-3d{ height: 220vh; }
    .vitrine-3d__cena{
        padding-block: var(--espaco-md);
    }
    .vitrine-3d__card{
        width: clamp(120px, 46vw, 180px);
        height: clamp(80px, 14vh, 150px);
    }
    .vitrine-3d__fileira{
        gap: var(--espaco-sm);
        margin-bottom: var(--espaco-sm);
        padding-inline: var(--espaco-md);
    }
    /* Titulo sempre visivel no mobile: hover nao existe em touch, sem isso
       o nome do produto nunca apareceria pra quem navega no celular. */
    .vitrine-3d__titulo{
        opacity: 1;
        transform: none;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    }
    .vitrine-3d__overlay{
        opacity: 0.35;
    }
}