/* ============================================================ animations.css — Estados iniciais para animação GSAP/anime.js GSAP cuida das transições; aqui apenas garantimos que elementos começam invisíveis para evitar flash antes de o JS carregar. Princípio: se o usuário PEDE menos movimento OU se o JS falhar, tudo precisa permanecer visível e funcional. Por isso usamos .js como gatilho (set no via JS no head) E damos fallback em prefers-reduced-motion. ============================================================ */ /* Quando JS carrega, escondemos os elementos animáveis. Sem JS, eles ficam visíveis (degradação graciosa). */ .js [data-anim="fade-up"], .js [data-anim="fade"], .js [data-anim="reveal"], .js [data-anim="stagger"] > *, .js [data-anim="hero-title"], .js [data-anim="hero-sub"], .js [data-anim="hero-cta"] > *, .js [data-anim="counter"] { opacity: 0; will-change: transform, opacity; } .js [data-anim="fade-up"], .js [data-anim="reveal"], .js [data-anim="stagger"] > *, .js [data-anim="hero-sub"] { transform: translateY(24px); } .js [data-anim="hero-cta"] > * { transform: translateY(8px) scale(0.96); } .js [data-anim="hero-title"] .word, .js [data-anim="hero-title"] .char { opacity: 0; transform: translateY(24px); display: inline-block; } /* ============================================================ Estado "is-in-view" (caso o desenvolvedor de página queira usar uma alternativa CSS-only com IntersectionObserver simples, além das timelines GSAP). Animations.js prioriza GSAP. ============================================================ */ .is-in-view[data-anim="fade-up"], .is-in-view[data-anim="reveal"], .is-in-view[data-anim="hero-sub"] { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .is-in-view[data-anim="stagger"] > * { opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } /* ============================================================ Loops auxiliares (CSS — usar apenas como complemento ao JS) ============================================================ */ @keyframes mbm-pulse { /* glow Petróleo MBM (#1C788C / RGB 28,120,140) — alinhado ao tokens-v2 */ 0%, 100% { box-shadow: 0 0 0 0 rgba(28, 120, 140, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(28, 120, 140, 0); } } .anim-pulse { animation: mbm-pulse 2.4s var(--ease-out) infinite; } @keyframes mbm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .anim-marquee-track { display: flex; gap: var(--sp-8); width: max-content; animation: mbm-marquee 28s linear infinite; } /* ============================================================ prefers-reduced-motion: tudo visível, sem animação. Inclusive remove animações decorativas (pulse, marquee). ============================================================ */ @media (prefers-reduced-motion: reduce) { .js [data-anim], .js [data-anim] *, .js [data-anim="hero-title"] .word, .js [data-anim="hero-title"] .char { opacity: 1 !important; /* documentado: força visibilidade quando o usuário pede menos motion */ transform: none !important; transition: none !important; animation: none !important; } .anim-pulse, .anim-marquee-track { animation: none !important; } }