/* =========================================================
   Animação de entrada dos produtos na HOME (scroll reveal)
   Aditivo: só afeta body.home-page. Não altera markup.
   Cada card surge suave + a imagem dá um leve zoom-in ao
   aparecer, dando "vida" ao produto. Respeita reduced-motion
   e o hover-zoom (scale 1.05) que já existe em premium-v2.css.
   ========================================================= */
@media (prefers-reduced-motion: no-preference){

  /* só os grids estáticos de produto — NÃO os carrosséis (swiper) */
  body.home-page .section .grid .card{
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity   .7s cubic-bezier(.22,.61,.36,1),
      transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }
  body.home-page .section .grid .card.in{
    opacity: 1;
    transform: none;
  }

  /* a imagem começa um pouco "aproximada" e relaxa pro tamanho
     normal quando o card entra — efeito premium de foco */
  body.home-page .section .grid .card .media img{
    transition: transform .9s cubic-bezier(.22,.61,.36,1);
  }
  body.home-page .section .grid .card:not(.in) .media img{
    transform: scale(1.12);
  }
  body.home-page .section .grid .card.in .media img{
    transform: scale(1);
  }
  /* hover continua mandando depois de revelado (mantém o 1.05) */
  body.home-page .section .grid .card.in:hover .media img{
    transform: scale(1.05);
  }
}
