/* =========================================================================== SILVART'S — animations.css Animações de entrada, microinterações e respeito a prefers-reduced-motion. =========================================================================== */ /* --------------------------- 1. REVELAÇÃO AO ROLAR --------------------------- */ /* O elemento só fica escondido se o JS estiver ativo (classe no ). Assim, sem JS o conteúdo continua visível. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--reveal-delay, 0) * 90ms); will-change: opacity, transform; } .js .reveal.is-visible { opacity: 1; transform: none; } /* --------------------------- 2. FAIXA DE SERVIÇOS --------------------------- */ @keyframes ticker-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* A animação só roda quando o JS duplicou o grupo (loop sem emenda). */ .js .ticker__track { animation: ticker-scroll 38s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } /* ------------------------------- 3. HERO ------------------------------- */ @keyframes hero-symbol-in { from { opacity: 0; transform: translateX(40px) scale(0.96); } to { opacity: 0.09; transform: none; } } .hero__symbol { animation: hero-symbol-in 1.4s var(--ease) both; } @keyframes rule-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .hero__block { transform-origin: 50% 100%; animation: rule-grow 1s var(--ease) 0.35s both; } /* --------------------------- 4. MENU MOBILE --------------------------- */ @keyframes menu-item-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ------------------------------ 5. LIGHTBOX ------------------------------ */ @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lightbox-figure-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } } .lightbox { animation: lightbox-in 0.25s var(--ease); } .lightbox__figure { animation: lightbox-figure-in 0.35s var(--ease); } /* ------------------------------ 6. BOTÃO FAB ------------------------------ */ @keyframes fab-in { from { opacity: 0; transform: translateY(16px) scale(0.9); } to { opacity: 1; transform: none; } } .fab { animation: fab-in 0.4s var(--ease); } /* ========================================================================= 7. PREFERÊNCIA POR MENOS MOVIMENTO Desliga todo o movimento não essencial, mantendo o conteúdo visível. ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .ticker__track { animation: none; transform: none; } .hero__symbol { opacity: 0.09; transform: none; } .hero__block { transform: none; } }