/* ============================================================================ motion.css — motion sutil do site público (Início/Sobre/Planos/Entrar). Carregar depois de landing.css. Tudo aqui dentro de prefers-reduced-motion: no-preference — é reforço puro, nunca a única fonte de acessibilidade: os elementos já nascem visíveis no HTML/CSS base. A classe .js (setada por um script inline síncrono no , não pelo módulo landing.js) é o que autoriza o estado inicial oculto do reveal. Sem JS, essa classe nunca existe → [data-reveal] nunca fica oculto. ============================================================================ */ @media (prefers-reduced-motion: no-preference) { :root { --reveal-dur: 420ms; } /* -------------------------------------------------------- scroll reveal --- */ .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); transition-delay: calc(var(--reveal-i, 0) * 60ms); } .js [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* --------------------------------------------------------- hover botão --- */ .btn { transition: opacity var(--transition), background var(--transition), border-color var(--transition), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn--primary:hover:not(:disabled), .btn--secondary:hover:not(:disabled), .btn-google:hover:not(:disabled) { opacity: 1; } .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active:not(:disabled) { transform: scale(0.98); } /* link puro (secundário do hero): sem elevação, é texto */ .lp-hero-full .btn--ghost:hover { transform: none; box-shadow: none; } /* --------------------------------------------------------- hover card ---- */ .feature, .pain-card, .plan-card { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .feature:hover, .pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--border-strong); } .plan-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .feature__icon { transition: transform var(--dur-fast) var(--ease-out); } .feature:hover .feature__icon { transform: scale(1.06); } .segment-chip { transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .segment-chip:hover { transform: scale(1.04); border-color: var(--border-strong); } /* -------------------------------------------------------- nav underline -- */ .landing-nav a, .landing-footer__links a { position: relative; } .landing-nav a::after, .landing-footer__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease-out); } .landing-nav a:hover::after, .landing-nav a:focus-visible::after, .landing-nav a[aria-current="page"]::after, .landing-footer__links a:hover::after, .landing-footer__links a:focus-visible::after { transform: scaleX(1); } /* -------------------------------------------------------------- faq icon - */ summary.faq__q::after { transition: transform var(--dur-fast) var(--ease-out); } /* faq__a: grid-template-rows 0fr→1fr em vez de animar height (evita layout thrash — só transform-adjacent, sem reflow por frame). landing.js alterna a classe .is-open com defasagem de frame p/ garantir o estado "de"/"para" antes de disparar a transição (details alterna display:none nativamente, então o "from" precisa já estar pintado). Guardado por .js: sem esse módulo (ou com reduced-motion), o
nativo abre/fecha instantâneo e nunca fica preso em 0fr. */ .js .faq__a { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--reveal-dur) var(--ease-out); } /* .faq-js (setada pelo landing.js) separa o caminho JS do fallback nativo: enquanto o JS controla a animação, só .is-open expande — o atributo [open] nativo não pode competir e travar a transição de fechamento (ele só some no transitionend, depois de .is-open já ter sido removida). Sem o módulo, .faq-js nunca existe e [open] assume sozinho. */ .faq-js .faq__item.is-open .faq__a { grid-template-rows: 1fr; } html:not(.faq-js) .faq__item[open] .faq__a { grid-template-rows: 1fr; } /* ------------------------------------------------------ solution cards -- */ /* cascata da lista de bullets, junto com o reveal do card (mesma classe .is-visible que o observer já aplica ao artigo com [data-reveal]) */ .js .solution-card__list li { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .js .solution-card__list li:nth-child(1) { transition-delay: 100ms; } .js .solution-card__list li:nth-child(2) { transition-delay: 160ms; } .js .solution-card__list li:nth-child(3) { transition-delay: 220ms; } .js .solution-card.is-visible .solution-card__list li { opacity: 1; transform: translateY(0); } @media (min-width: 900px) { /* no desktop as duas colunas entram das bordas em vez do card inteiro como bloco; --reverse inverte o lado (texto/mídia trocados de lugar) */ .js .solution-card[data-reveal] { opacity: 1; transform: none; transition: none; } .js .solution-card__body, .js .solution-card__media { opacity: 0; transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); } .js .solution-card__body { transform: translateX(-24px); } .js .solution-card__media { transform: translateX(24px); transition-delay: 80ms; } .js .solution-card--reverse .solution-card__body { transform: translateX(24px); } .js .solution-card--reverse .solution-card__media { transform: translateX(-24px); } .js .solution-card.is-visible .solution-card__body, .js .solution-card.is-visible .solution-card__media { opacity: 1; transform: translateX(0); } } /* hover eleva a mídia; gated por (hover: hover) — em touch, :hover gruda depois do tap e travaria a mídia elevada sem esse filtro */ .solution-card__media { transition: transform var(--dur-fast) var(--ease-out); } @media (hover: hover) and (pointer: fine) { /* empatada em especificidade com a regra is-visible acima e declarada depois, então vence mesmo após o reveal terminar */ .js .solution-card:hover .solution-card__media { transform: translateY(-4px); } } }