/* ============================================================ home-effects.css — camada de efeitos da HOME (index.html). Aditiva e escopada em .home-fx (no ). NÃO altera estrutura, fundo branco dos catálogos, lightbox, preços nem outras páginas (só é carregada no index). Tudo sob prefers-reduced-motion. Usa apenas tokens do :root de main.css. ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* rolagem suave entre seções/âncoras */ html.home-fx { scroll-behavior: smooth; } /* 1) Reveal suave dos cards de destaque da home (não têm .reveal nativo) */ .home-fx .jewel-card.fx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-silk), transform .8s var(--ease-silk); transition-delay: var(--fx-d, 0ms); will-change: opacity, transform; } .home-fx .jewel-card.fx-reveal.fx-in { opacity: 1; transform: none; will-change: auto; } /* 2) Micro-interação nos cards — enriquece o hover atual (-3px) com leveza + acento dourado */ .home-fx .jewel-card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(139,111,63,0.16), 0 0 0 1px rgba(201,169,97,0.30); } /* 2b) Micro-interação nos botões — lift sutil + brilho (.btn já tem transition:all) */ .home-fx .btn:hover { transform: translateY(-2px); } .home-fx .btn-primary:hover { box-shadow: 0 12px 30px rgba(201,169,97,0.30); } .home-fx .btn-outline:hover, .home-fx .btn-ghost:hover { box-shadow: 0 10px 24px rgba(10,9,8,0.08); } /* 3) Transição de saída — fade suave ao navegar p/ outra página */ html.home-fx.fx-leaving { opacity: 0; transition: opacity .22s var(--ease-out); } }