/* Animações do site (v340): topo dos produtos em movimento e entrada suave dos blocos ao rolar a página.
   Tudo é desligado para quem pede menos movimento no sistema (prefers-reduced-motion). */

/* topo do produto: grade que desliza, brilho que respira, card e ícone flutuando */
.ph::before { animation: ph-brilho 10s ease-in-out infinite alternate; will-change: transform; }
.ph::after { animation: ph-grade 28s linear infinite; }
.ph__card { will-change: transform; }
.ph__icone { animation: ph-icone 4.2s ease-in-out infinite; }
.ph__card::before { animation: ph-moldura 6.5s ease-in-out infinite; }
.ph__txt > * { animation: ph-entra .7s cubic-bezier(.2, .7, .2, 1) both; }
.ph__txt > :nth-child(2) { animation-delay: .06s; }
.ph__txt > :nth-child(3) { animation-delay: .12s; }
.ph__txt > :nth-child(4) { animation-delay: .2s; }
.ph__txt > :nth-child(5) { animation-delay: .28s; }
.ph__txt > :nth-child(6) { animation-delay: .36s; }
.ph__card { animation: ph-flutua 6.5s ease-in-out infinite, ph-entra-card .8s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes ph-grade { to { background-position: 46px 46px, 46px 46px; } }
@keyframes ph-brilho { from { transform: translate3d(-3%, 2%, 0) scale(1); } to { transform: translate3d(3%, -3%, 0) scale(1.12); } }
@keyframes ph-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ph-icone { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
@keyframes ph-moldura { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(4px, 5px); } }
@keyframes ph-entra { from { opacity: 0; transform: translateY(18px); } }
@keyframes ph-entra-card { from { opacity: 0; transform: translateY(26px) scale(.97); } }

/* blocos que aparecem ao rolar (a classe é posta pelo js/sh-animar.js e sai quando termina) */
.rv { opacity: 0; }
.rv--in { animation: rv-entra .65s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--rv-d, 0ms); }
@keyframes rv-entra { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ph::before, .ph::after, .ph__card, .ph__icone, .ph__card::before, .ph__txt > * { animation: none !important; }
  .rv { opacity: 1 !important; }
  .rv--in { animation: none !important; }
}
