/* ========================================================================== Oficina · Movimento — motion.css v0.2 plataforma (13/11/2026) v0.2: + secção «plataforma» (.o-marcacao, .o-progresso__barra.m-avanca, .o-vazio__pega) e pseudo-elementos no movimento reduzido. CSS reutilizável na plataforma, sem build. Depende dos tokens de cor da marca (--anot, --feito, --t-*); traz fallbacks para funcionar sozinho. Regra de ouro: o estilo base de cada elemento É o estado final. As animações só correm dentro de .m-on (ou no próprio elemento .m-on) e usam fill-mode "both": sem .m-on, sem JS ou com movimento reduzido, vê-se sempre o estado final, legível. Repetir: tirar .m-on, forçar reflow (el.offsetWidth), voltar a pôr .m-on. Atrasos: style="--m-atraso:200ms" (herda para os filhos do grupo). ========================================================================== */ /* --- propriedades animáveis (tracejado → sólido, cor da marcação, trilho) */ @property --m-vazio { syntax: ""; inherits: true; initial-value: 4px; } @property --m-cor { syntax: ""; inherits: true; initial-value: #C8341C; } @property --m-trilho { syntax: ""; inherits: true; initial-value: #2438C7; } /* --- tokens ------------------------------------------------------------- */ :root{ /* durações */ --m-instante: 150ms; /* feedback direto: hover, premir, foco */ --m-curto: 250ms; /* troca de estado: etiqueta, botão, pega */ --m-medio: 400ms; /* entrada de um elemento, desenhar a marcação */ --m-longo: 800ms; /* sequência curta: concluir, régua, iteração */ --m-assinatura: 1600ms; /* só o logótipo, uma vez por sessão */ /* curvas (nomes da marca) */ --e-assenta: cubic-bezier(.2, .8, .2, 1); /* entra e pousa: o padrão */ --e-traco: cubic-bezier(.65, 0, .35, 1); /* desenhar um traço/revelar */ --e-estalo: cubic-bezier(.34, 1.56, .64, 1);/* a pega: único ressalto */ --e-sai: cubic-bezier(.4, 0, 1, 1); /* sair de cena, sem demora */ --e-regua: linear; /* marcas, formigas, loops */ /* tracejado da marcação: traço 6, vazio 4 (o vazio vai a 0 = feito) */ --m-traco: 6px; } /* --- keyframes (o "to" omitido = estilo base = estado final) ------------- */ @keyframes m-entra { from { opacity: 0; transform: translateY(8px); } } @keyframes m-aparece { from { opacity: 0; } } @keyframes m-sai { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } } @keyframes m-assenta { from { opacity: 0; transform: translate(var(--m-desloc, 8px), var(--m-desloc, 8px)) scale(1.04); } } @keyframes m-camada { from { opacity: 0; transform: translate(calc(-1 * var(--m-desloc, 40px)), calc(-1 * var(--m-desloc, 40px))); } } @keyframes m-sombra { from { box-shadow: 0 0 0 0 transparent; } } @keyframes m-estala { from { transform: scale(0); } } @keyframes m-revela { from { clip-path: inset(0 100% 0 0); } } @keyframes m-traca { from { stroke-dashoffset: 1; } } @keyframes m-escala-x { from { transform: scaleX(0); } } @keyframes m-escala-y { from { transform: scaleY(0); } } @keyframes m-prime { 50% { transform: scale(.96); } } @keyframes m-fecha { from { --m-vazio: 4px; } to { --m-vazio: 0px; } } @keyframes m-conclui { from { --m-vazio: 4px; --m-cor: var(--anot, #C8341C); } to { --m-vazio: 0px; --m-cor: var(--feito, #1D6B45); } } @keyframes m-abana { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } } @keyframes m-formiga { to { stroke-dashoffset: -10; } } @keyframes m-ronda { 0%, 16% { transform: translate(0, 0); } 25%, 41% { transform: translate(-22px, 0); } 50%, 66% { transform: translate(-22px, -22px); } 75%, 91% { transform: translate(0, -22px); } 100% { transform: translate(0, 0); } } @keyframes m-trilho-cor { 0%, 18% { --m-trilho: var(--t-make, #2438C7); } 25%, 43% { --m-trilho: var(--t-git, #0E6670); } 50%, 68% { --m-trilho: var(--t-a11y, #7A2E8A); } 75%, 93% { --m-trilho: var(--t-dados, #8A5A00); } 100% { --m-trilho: var(--t-make, #2438C7); } } @keyframes m-trilho-cod { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-1lh); } 50%, 68% { transform: translateY(-2lh); } 75%, 93% { transform: translateY(-3lh); } 100% { transform: translateY(-4lh); } } /* --- utilitários (correm dentro de .m-on) -------------------------------- */ :where(.m-on) .m-entra, .m-entra.m-on { animation: m-entra var(--m-curto) var(--e-assenta) var(--m-atraso, 0ms) both; } :where(.m-on) .m-aparece, .m-aparece.m-on { animation: m-aparece var(--m-curto) var(--e-assenta) var(--m-atraso, 0ms) both; } :where(.m-on) .m-assenta, .m-assenta.m-on { animation: m-assenta var(--m-medio) var(--e-assenta) var(--m-atraso, 0ms) both; } :where(.m-on) .m-estala, .m-estala.m-on { animation: m-estala var(--m-curto) var(--e-estalo) var(--m-atraso, 0ms) both; } :where(.m-on) .m-revela, .m-revela.m-on { animation: m-revela var(--m-medio) var(--e-traco) var(--m-atraso, 0ms) both; } :where(.m-on) .m-traco, .m-traco.m-on { animation: m-traca var(--m-medio) var(--e-traco) var(--m-atraso, 0ms) both; } :where(.m-on) .m-prime, .m-prime.m-on { animation: m-prime var(--m-instante) var(--e-assenta) var(--m-atraso, 0ms) both; } :where(.m-on) .m-abana, .m-abana.m-on { animation: m-abana var(--m-medio) var(--e-assenta) var(--m-atraso, 0ms) both; } :where(.m-on) .m-cresce, .m-cresce.m-on { animation: m-escala-x var(--m-medio) var(--e-assenta) var(--m-atraso, 0ms) both; } .m-cresce { transform-origin: left center; } :where(.m-on) .m-camada, .m-camada.m-on { animation: m-camada var(--m-medio) var(--e-assenta) var(--m-atraso, 0ms) both; } :where(.m-on) .m-camada-final, .m-camada-final.m-on { animation: m-camada var(--m-medio) var(--e-assenta) var(--m-atraso, 0ms) both, m-sombra var(--m-curto) var(--e-assenta) calc(var(--m-atraso, 0ms) + var(--m-medio)) both; } /* SVG: o traço desenha-se (precisa de pathLength="1") */ .m-traco { stroke-dasharray: 1; stroke-dashoffset: 0; } /* SVG: transformações à volta do próprio elemento */ .m-estala, .m-assenta, .m-abana, .m-prime { transform-box: fill-box; transform-origin: center; } /* troca de estado (antes → depois) no mesmo sítio: definir --m-troca */ .m-troca { display: grid; } .m-troca > * { grid-area: 1 / 1; } .m-antes { opacity: 0; visibility: hidden; } :where(.m-on) .m-antes { animation: m-sai var(--m-curto) var(--e-sai) var(--m-troca, 0ms) both; } :where(.m-on) .m-depois { animation: m-aparece var(--m-curto) var(--e-assenta) var(--m-troca, 0ms) both; } /* --- componente: a marcação --------------------------------------------- (dentro de um anfitrião com position:relative) R-01 · campo novo + .is-feito (sólido) · .m-fecha (anima tracejado → sólido) + .is-concluida (sólido verde) · .m-conclui (anima para concluído) */ .m-marcacao { position: absolute; inset: -8px; pointer-events: none; --m-cor: var(--anot, #C8341C); --m-vazio: 4px; } .m-marcacao.is-feito { --m-vazio: 0px; } .m-marcacao.is-concluida { --m-vazio: 0px; --m-cor: var(--feito, #1D6B45); } .m-aresta { position: absolute; display: block; background: repeating-linear-gradient(var(--m-ang, 90deg), var(--m-cor) 0 var(--m-traco), transparent var(--m-traco) calc(var(--m-traco) + var(--m-vazio))); } .m-cima { top: 0; left: 0; right: 0; height: 2px; transform-origin: left center; } .m-baixo { bottom: 0; left: 0; right: 0; height: 2px; transform-origin: right center; --m-ang: 270deg; } .m-dir { top: 0; bottom: 0; right: 0; width: 2px; transform-origin: center top; --m-ang: 180deg; } .m-esq { top: 0; bottom: 0; left: 0; width: 2px; transform-origin: center bottom; --m-ang: 0deg; } .m-pega { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; background: var(--m-cor); } .m-etq { position: absolute; left: -1px; bottom: 100%; margin-bottom: 6px; background: var(--m-cor); color: var(--m-etq-fg, #fff); font: 600 .75rem/1 var(--f-mono, ui-monospace, monospace); padding: 5px 7px; white-space: nowrap; } /* etiqueta que troca de texto: cada texto leva o seu fundo (largura certa) */ .m-etq.m-troca { background: none; padding: 0; justify-items: start; } .m-etq.m-troca > * { background: var(--m-cor); padding: 5px 7px; } :where(.m-on) .m-desenha .m-cima { animation: m-escala-x calc(var(--m-medio) / 4) linear var(--m-atraso, 0ms) both; } :where(.m-on) .m-desenha .m-dir { animation: m-escala-y calc(var(--m-medio) / 4) linear calc(var(--m-atraso, 0ms) + var(--m-medio) / 4) both; } :where(.m-on) .m-desenha .m-baixo { animation: m-escala-x calc(var(--m-medio) / 4) linear calc(var(--m-atraso, 0ms) + var(--m-medio) / 2) both; } :where(.m-on) .m-desenha .m-esq { animation: m-escala-y calc(var(--m-medio) / 4) linear calc(var(--m-atraso, 0ms) + var(--m-medio) * 3 / 4) both; } :where(.m-on) .m-desenha .m-pega { animation: m-estala var(--m-curto) var(--e-estalo) calc(var(--m-atraso, 0ms) + var(--m-medio)) both; } :where(.m-on) .m-desenha .m-etq { animation: m-entra var(--m-curto) var(--e-assenta) calc(var(--m-atraso, 0ms) + var(--m-medio) + 100ms) both; } :where(.m-on) .m-marcacao.m-fecha { animation: m-fecha var(--m-medio) var(--e-traco) var(--m-fecho, 0ms) both; } :where(.m-on) .m-marcacao.m-conclui { animation: m-conclui var(--m-medio) var(--e-traco) var(--m-fecho, 0ms) both; } /* --- componente: a carregar (único loop permitido) ------------------------ A carregar… */ .m-carrega { display: inline-flex; align-items: center; gap: 10px; } .m-carrega svg { width: 32px; height: 32px; flex: none; overflow: visible; } .m-carrega-r { fill: none; stroke: var(--anot, #C8341C); stroke-width: 2; stroke-dasharray: 6 4; } .m-carrega-p { fill: var(--anot, #C8341C); } .m-carrega .m-carrega-r { animation: m-formiga var(--m-longo) var(--e-regua) infinite; } .m-carrega .m-carrega-p { animation: m-ronda calc(var(--m-assinatura) * 2) var(--e-assenta) infinite; } .m-pausa, .m-pausa * { animation-play-state: paused !important; } /* --- componente: régua (transição de secção / separador) ------------------
*/ .m-regua { position: relative; height: 22px; } .m-regua-fita { position: absolute; inset: 0; border-bottom: 1px solid var(--linha-forte, #A9AFBA); background-image: repeating-linear-gradient(90deg, var(--linha-forte, #A9AFBA) 0 1px, transparent 1px 80px), repeating-linear-gradient(90deg, var(--linha-forte, #A9AFBA) 0 1px, transparent 1px 8px); background-size: 100% 14px, 100% 6px; background-position: 0 100%, 0 100%; background-repeat: repeat-x; } .m-regua-marca { position: absolute; bottom: -1px; left: var(--m-pos, 0%); width: 2px; height: 22px; background: var(--anot, #C8341C); } .m-regua-marca::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; background: var(--anot, #C8341C); } :where(.m-on) .m-regua-fita, .m-regua.m-on .m-regua-fita { animation: m-revela var(--m-longo) var(--e-traco) var(--m-atraso, 0ms) both; } @keyframes m-regua-anda { from { left: 0; } } :where(.m-on) .m-regua-marca, .m-regua.m-on .m-regua-marca { animation: m-regua-anda var(--m-longo) var(--e-assenta) calc(var(--m-atraso, 0ms) + 200ms) both; } /* --- componente: trilhos (o símbolo muda de cor e de código) -------------- Use --m-trilho em stroke/fill/border; .m-trilho-cod com 5 linhas (FM GT AC DT FM). */ .m-trilhos { --m-trilho: var(--t-make, #2438C7); } :where(.m-on) .m-trilhos, .m-trilhos.m-on { animation: m-trilho-cor calc(var(--m-assinatura) * 2) var(--e-assenta) var(--m-atraso, 0ms) both; } .m-trilho-cod { display: block; height: 1lh; overflow: hidden; white-space: nowrap; } .m-trilho-cod > span { display: block; transform: translateY(-4lh); } :where(.m-on) .m-trilho-cod > span { animation: m-trilho-cod calc(var(--m-assinatura) * 2) var(--e-estalo) var(--m-atraso, 0ms) both; } /* --- plataforma: componentes do contrato (o-*) ---------------------------- A marcação do contrato (.o-marcacao) desenha o tracejado com 4 fundos em ::before; a pega é ::after; a etiqueta é .o-marcacao__etiqueta. .m-desenha desenha (cima → dir → baixo → esq), estala a pega, entra a etiqueta .m-fecha tracejado → sólido (mesma cor) .m-conclui tracejado vermelhão → sólido verde (usar com .o-marcacao--feito) */ @keyframes o-desenha { 0% { background-size: 0 2px, 2px 0, 0 2px, 2px 0; } 25% { background-size: 100% 2px, 2px 0, 0 2px, 2px 0; } 50% { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0; } 75% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0; } 100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; } } :where(.m-on) .o-marcacao.m-desenha::before, .o-marcacao.m-desenha.m-on::before { animation: o-desenha var(--m-medio) linear var(--m-atraso, 0ms) both; } :where(.m-on) .o-marcacao.m-desenha::after, .o-marcacao.m-desenha.m-on::after { animation: m-estala var(--m-curto) var(--e-estalo) calc(var(--m-atraso, 0ms) + var(--m-medio)) both; } :where(.m-on) .o-marcacao.m-desenha .o-marcacao__etiqueta, .o-marcacao.m-desenha.m-on .o-marcacao__etiqueta { animation: m-entra var(--m-curto) var(--e-assenta) calc(var(--m-atraso, 0ms) + var(--m-medio) + 100ms) both; } :where(.m-on) .o-marcacao.m-fecha, .o-marcacao.m-fecha.m-on { animation: m-fecha var(--m-medio) var(--e-traco) var(--m-fecho, 0ms) both; } :where(.m-on) .o-marcacao.m-conclui, .o-marcacao.m-conclui.m-on { animation: m-conclui var(--m-medio) var(--e-traco) var(--m-fecho, 0ms) both; } .o-marcacao::after { transform-origin: center; } /* barra de progresso: avança do valor anterior para o atual (lição concluída) */ @keyframes o-avanca { from { width: var(--valor-antes, 0%); } } :where(.m-on) .o-progresso__barra.m-avanca, .o-progresso__barra.m-avanca.m-on { animation: o-avanca var(--m-longo) var(--e-assenta) calc(var(--m-atraso, 0ms) + 200ms) both; } /* estado concluído: o visto estala */ :where(.m-on) .o-estado--feito.m-estala::before, .o-estado--feito.m-estala.m-on::before { animation: m-estala var(--m-curto) var(--e-estalo) var(--m-atraso, 0ms) both; } .o-estado--feito.m-estala { animation: none !important; } /* pega do estado vazio (svg: ) */ .o-vazio__pega { transform-box: fill-box; transform-origin: center; } /* --- interação base (hover/foco) ---------------------------------------- */ @media (prefers-reduced-motion: no-preference){ .m-hover { transition: box-shadow var(--m-instante) var(--e-assenta), border-color var(--m-instante) var(--e-assenta), background-color var(--m-instante) var(--e-assenta); } } /* --- movimento reduzido: tudo parado no estado final ---------------------- */ @media (prefers-reduced-motion: reduce){ :root { --m-instante: 0ms; --m-curto: 0ms; --m-medio: 0ms; --m-longo: 0ms; --m-assinatura: 0ms; } .m-on, .m-on *, .m-carrega *, .m-regua *, .m-trilhos, .m-trilhos *, .m-on::before, .m-on::after, .m-on *::before, .m-on *::after { animation: none !important; transition: none !important; } .m-antes { visibility: hidden !important; opacity: 0 !important; } }