/* ========================================================================== Meat Express — motion.css Transições de componentes, scroll reveal e keyframes. Regra: só opacity, transform e stroke-dashoffset. Nada de height/width. O reveal depende de (motion.js): sem JS, tudo visível. prefers-reduced-motion desliga tudo (bloco no final). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Easings compartilhados -------------------------------------------------------------------------- */ :root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ~ power3.out */ --dur-fast: 0.4s; } /* -------------------------------------------------------------------------- 2. Transições de componentes (hover, focus, estados) -------------------------------------------------------------------------- */ /* Botões: preenchimento e cor do texto */ .btn { transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .btn::before { transition: transform var(--dur-fast) var(--ease-out); } .btn--submit .btn__label, .btn--submit .btn__spinner, .btn--submit .btn__done { transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast); } .btn--submit[data-state="done"] .check-svg path { animation: draw-check 0.6s var(--ease-out) 0.15s forwards; } .spinner-ring { transform-origin: 50% 50%; animation: spin 1.4s linear infinite; } /* Header */ .header { transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out), border-color 0.6s var(--ease-out); } .nav__link { transition: color var(--dur-fast) var(--ease-out); } /* Callouts do hero: anel de pulso no ponto dourado */ .callout__dot::after { animation: callout-pulse 2s ease-out infinite; } .nav__indicator { transition: transform 0.5s var(--ease-out); } .menu-toggle__lines span { transition: transform 0.4s var(--ease-out); } /* Menu mobile: fundo + itens em stagger vindo de baixo */ .mobile-menu { transition: opacity 0.4s var(--ease-out), visibility 0.4s; } .mobile-menu__list > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); } .mobile-menu.is-open .mobile-menu__list > * { opacity: 1; transform: translateY(0); } .mobile-menu.is-open .mobile-menu__list > *:nth-child(1) { transition-delay: 0.08s; } .mobile-menu.is-open .mobile-menu__list > *:nth-child(2) { transition-delay: 0.13s; } .mobile-menu.is-open .mobile-menu__list > *:nth-child(3) { transition-delay: 0.18s; } .mobile-menu.is-open .mobile-menu__list > *:nth-child(4) { transition-delay: 0.23s; } .mobile-menu.is-open .mobile-menu__list > *:nth-child(5) { transition-delay: 0.28s; } .mobile-menu.is-open .mobile-menu__list > *:nth-child(6) { transition-delay: 0.33s; } .mobile-menu.is-open .mobile-menu__list > *:nth-child(7) { transition-delay: 0.40s; } /* Produtos: zoom 1.05 em 1s + borda dourada */ .product .media { transition: border-color 0.5s var(--ease-out); } .product .media img { transition: transform 1s var(--ease-out); } /* FAQ */ .faq__q { transition: color var(--dur-fast) var(--ease-out); } .faq__icon { transition: transform 0.4s var(--ease-out); } .faq__a { transition: grid-template-rows 0.45s var(--ease-out); } /* Formulário */ .field__input { transition: border-color var(--dur-fast) var(--ease-out); } .field__label { transition: top var(--dur-fast) var(--ease-out), font-size var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .field__line { transition: transform 0.5s var(--ease-out), background-color var(--dur-fast); } .field__help { transition: opacity var(--dur-fast) var(--ease-out); } .consent__box { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .consent__box path { transition: stroke-dashoffset 0.5s var(--ease-out) 0.1s; } .form { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); } .form.is-sent { opacity: 0; transform: translateY(-16px); pointer-events: none; } .form__success { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out) 0.3s, transform 0.8s var(--ease-out) 0.3s; } .form__success.is-visible { opacity: 1; transform: translateY(0); } /* WhatsApp flutuante */ .wa-float { transition: transform 0.7s var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } /* Sociais e links */ .social { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .footer__col a, .footer__bottom a, .signup__contact a, .consent a, .mobile-menu__link { transition: color var(--dur-fast) var(--ease-out); } /* -------------------------------------------------------------------------- 3. Scroll reveal (motion.js adiciona .reveal / .is-visible) Só opacity e transform. O opacity: 0 depende de : sem JavaScript, tudo fica visível. -------------------------------------------------------------------------- */ :root { --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); --reveal-dur: 700ms; } html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* Títulos de seção: deslocamento um pouco maior */ html.js .reveal--title { transform: translateY(32px); } html.js .reveal.is-visible { opacity: 1; transform: none; } /* Linhas decorativas douradas: expandem da esquerda */ html.js .reveal--line { transform: scaleX(0); transform-origin: left center; transition: transform 800ms var(--reveal-ease); transition-delay: var(--reveal-delay, 0ms); will-change: transform; } html.js .reveal--line.is-visible { transform: scaleX(1); } /* Callouts do hero (desktop): ponto → linha → card, atrasos a partir de --d */ html.js .reveal-callout .callout__dot { transform: scale(0); transition: transform 300ms var(--reveal-ease); transition-delay: var(--d, 0ms); } html.js .reveal-callout.callout-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 400ms var(--reveal-ease); transition-delay: calc(var(--d, 0ms) + 300ms); } html.js .reveal-callout .callout__card { opacity: 0; transform: translateY(12px); transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease); transition-delay: calc(var(--d, 0ms) + 700ms); } html.js .reveal-callout.is-visible .callout__dot { transform: scale(1); } html.js .reveal-callout.is-visible.callout-line { stroke-dashoffset: 0; } html.js .reveal-callout.is-visible .callout__card { opacity: 1; transform: none; } /* Mobile: sem ponto e sem linha, o card faz só o fade em cascata */ @media (max-width: 1023px) { html.js .reveal-callout .callout__card { transition-delay: var(--d, 0ms); } } /* Anel de pulso do ponto só depois que ele apareceu */ .callout__dot::after { animation-delay: calc(var(--d, 0ms) + 300ms); } /* Anéis dos passos se desenham quando o bloco entra */ .step__ring circle { transition: stroke-dashoffset 1.2s var(--reveal-ease); transition-delay: calc(var(--reveal-delay, 0ms) + 200ms); } .step.is-visible .step__ring circle { stroke-dashoffset: 0; } /* -------------------------------------------------------------------------- 4. Keyframes (só os que ainda são usados) -------------------------------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes draw-check { to { stroke-dashoffset: 0; } } @keyframes callout-pulse { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } } /* -------------------------------------------------------------------------- 5. prefers-reduced-motion — tudo visível, sem transição -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; } .spinner-ring, .callout__dot::after { animation: none !important; } html.js .reveal, html.js .reveal--line, html.js .reveal-callout .callout__dot, html.js .reveal-callout .callout__card { opacity: 1 !important; transform: none !important; transition: none !important; } html.js .reveal-callout.callout-line { stroke-dashoffset: 0 !important; transition: none !important; } .step__ring circle { stroke-dashoffset: 0 !important; } .wa-float { transform: scale(1); } }