/* Identidade de movimento "Respiro" (docs/MOTION.md). Carregado por todas as paginas.
   Mudou aqui = subir o ?v= em todas (o nginx guarda .css por 30 dias).

   Duas regras que seguram o resto:
   - Entrada parte de opacity:.01, nunca de 0: com 0 o elemento sai do LCP ate o fim da
     animacao (medido na bio: 5,3 s -> 1,9 s).
   - Entrada e revelacao mexem em `translate`/`scale` (propriedades separadas) e as de
     carregamento usam fill `backwards`: assim o `transform` fica livre para o hover
     (.m-lift, .m-card) e o `translate` volta livre para o botao magnetico depois da entrada. */

:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);      /* respiro: sai rapido, pousa devagar */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);   /* ambiente e progresso */
  --m-fast: 240ms;
  --m-base: 800ms;
  --m-slow: 1200ms;
  --m-stagger: 80ms;
  --m-rise: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
[id] { scroll-margin-top: 88px; }

/* ---------- Entrada no carregamento: CSS puro, nao depende do JS ---------- */
@keyframes m-rise    { from { opacity: .01; translate: 0 var(--m-rise); } }
@keyframes m-fade    { from { opacity: .01; } }
@keyframes m-scale   { from { opacity: .01; scale: .94; } }
@keyframes m-word    { from { opacity: .01; translate: 0 .42em; filter: blur(6px); } }
@keyframes m-curtain { from { clip-path: inset(100% 0 0 0 round 20px); } to { clip-path: inset(0 0 0 0 round 20px); } }
@keyframes m-settle  { from { scale: 1.12; } }
@keyframes m-line    { from { scale: 0 1; } }
@keyframes m-sun     { from { opacity: .01; scale: .55; } }
@keyframes m-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }

[data-m-load]            { animation: m-rise var(--m-base) var(--m-ease) backwards; animation-delay: var(--m-d, 0ms); }
[data-m-load="fade"]     { animation-name: m-fade; }
[data-m-load="scale"]    { animation-name: m-scale; }
[data-m-load="curtain"]  { animation: m-curtain var(--m-slow) var(--m-ease) backwards; animation-delay: var(--m-d, 0ms); }
[data-m-load="curtain"] img { animation: m-settle 1600ms var(--m-ease) backwards; animation-delay: var(--m-d, 0ms); }
[data-m-load="sun"]      { animation: m-sun var(--m-slow) var(--m-ease) backwards, m-breathe 9s var(--m-ease-io) infinite;
                           animation-delay: var(--m-d, 0ms), calc(var(--m-d, 0ms) + var(--m-slow)); }

/* Titulo palavra a palavra: cada palavra e um <span class="m-w" style="--i:N"> no HTML. */
.m-words .m-w {
  display: inline-block;
  animation: m-word 1000ms var(--m-ease) backwards;
  animation-delay: calc(var(--m-d, 0ms) + var(--i, 0) * 42ms);
}

/* Sol que respira (sem entrada). */
.m-breathe { animation: m-breathe 9s var(--m-ease-io) infinite; }

/* ---------- Revelar no scroll: o JS poe .m-in quando o elemento entra na tela ---------- */
/* So esconde com JS ativo (.m-js no <html>) e sem a trava de seguranca (.m-off).
   A lista de transicao tambem cobre transform/box-shadow/border-color com atraso 0, para o
   hover de um .m-card que tambem tenha data-m continuar suave. */
.m-js:not(.m-off) [data-m] {
  --m-delay: calc(var(--m-d, 0ms) + var(--m-i, 0) * var(--m-stagger));
  opacity: .01;
  translate: 0 var(--m-rise);
  transition-property: opacity, translate, scale, clip-path, transform, box-shadow, border-color;
  transition-duration: var(--m-base), var(--m-base), var(--m-base), var(--m-slow), 420ms, 420ms, 420ms;
  transition-timing-function: var(--m-ease);
  transition-delay: var(--m-delay), var(--m-delay), var(--m-delay), var(--m-delay), 0ms, 0ms, 0ms;
}
.m-js:not(.m-off) [data-m="fade"]  { translate: none; }
.m-js:not(.m-off) [data-m="scale"] { translate: none; scale: .96; }
.m-js:not(.m-off) [data-m="line"]  { opacity: 1; translate: none; scale: 0 1; transform-origin: left center;
                                     transition-duration: var(--m-base), var(--m-base), var(--m-slow), var(--m-slow), 420ms, 420ms, 420ms; }
.m-js:not(.m-off) [data-m="mask"]  { opacity: 1; translate: none; clip-path: inset(100% 0 0 0 round 20px); }
.m-js:not(.m-off) [data-m="mask"] img { scale: 1.12; transition: scale 1600ms var(--m-ease); transition-delay: var(--m-delay); }
/* Revelado no primeiro quadro com a pagina no topo (tela alta): ANIMACAO, nao transicao, e espera a entrada
   do topo (+700ms). O Chrome as vezes nao cria a transicao de quem muda de classe no primeiro quadro (medido nas
   landings em 1920x1080: "Para quem e" aceso sem fade antes do titulo, 7 de 10 cargas); a animacao sempre roda. */
.m-js:not(.m-off) [data-m].m-1q {
  transition-property: transform, box-shadow, border-color;
  transition-duration: 420ms; transition-delay: 0ms;
  animation: m-rise var(--m-base) var(--m-ease) backwards;
  animation-delay: calc(var(--m-d, 0ms) + var(--m-i, 0) * var(--m-stagger) + 700ms);
}
.m-js:not(.m-off) [data-m="fade"].m-1q  { animation-name: m-fade; }
.m-js:not(.m-off) [data-m="scale"].m-1q { animation-name: m-scale; }
.m-js:not(.m-off) [data-m="line"].m-1q  { animation-name: m-line; animation-duration: var(--m-slow); }
.m-js:not(.m-off) [data-m="mask"].m-1q  { animation-name: m-curtain; animation-duration: var(--m-slow); }
.m-js:not(.m-off) [data-m="mask"].m-1q img { transition: none; animation: m-settle 1600ms var(--m-ease) backwards;
                                             animation-delay: calc(var(--m-d, 0ms) + var(--m-i, 0) * var(--m-stagger) + 700ms); }
.m-js:not(.m-off) [data-m].m-in { opacity: 1; translate: none; scale: none; }
.m-js:not(.m-off) [data-m="mask"].m-in { clip-path: inset(0 0 0 0 round 20px); }
.m-js:not(.m-off) [data-m="mask"].m-in img { scale: none; }

/* Palavras que acendem com o scroll (faixa da citacao). O JS quebra o texto em .m-sw. */
.m-sw { transition: opacity 260ms linear; }
.m-off .m-sw { opacity: 1 !important; transition: none !important; }

/* Linha de progresso (passos): o JS escreve --p de 0 a 1 no container [data-m-progress]. */
[data-m-progress] .m-progress-bar { transform-origin: top center; }
.m-js:not(.m-off) [data-m-progress] .m-progress-bar { scale: 1 var(--p, 0); }

/* ---------- Microinteracoes ---------- */
.m-lift { transition: transform var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease), background-color var(--m-fast) ease, color var(--m-fast) ease, border-color var(--m-fast) ease, translate 420ms var(--m-ease); }
.m-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(38, 35, 32, .35); }
.m-lift:active { transform: none; transition-duration: 80ms; }
.m-card { transition: transform 420ms var(--m-ease), box-shadow 420ms var(--m-ease), border-color 420ms ease; }
.m-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(38, 35, 32, .35); }
.m-arrow svg, .m-arrow .seta { display: inline-block; transition: transform var(--m-fast) var(--m-ease); }
.m-arrow:hover svg, .m-arrow:hover .seta { transform: translateX(4px); }
.m-zoom { overflow: hidden; }
.m-zoom img { transition: transform 900ms var(--m-ease); }
.m-zoom:hover img { transform: scale(1.04); }
/* Botao magnetico: o JS escreve --mx/--my (so ponteiro fino, sem movimento reduzido). */
[data-m-magnet] { translate: var(--mx, 0px) var(--my, 0px); }
/* Sublinhado que cresce (links de navegacao). .is-active = secao atual (scrollspy do JS). */
.m-ul { position: relative; }
.m-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 420ms var(--m-ease); }
.m-ul:hover::after, .m-ul.is-active::after { transform: scaleX(1); }
/* Cabecalho: o JS poe .is-scrolled depois de 8px de scroll. */
[data-m-header] { transition: box-shadow 420ms var(--m-ease), background-color 420ms ease; }
[data-m-header].is-scrolled { box-shadow: 0 10px 30px -22px rgba(38, 35, 32, .45); }

/* Transicao entre paginas do mesmo host (Chrome 126+, Safari 18.2+; os outros ignoram). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: m-vt-out 260ms var(--m-ease) both; }
::view-transition-new(root) { animation: m-vt-in 520ms var(--m-ease) both; }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in  { from { opacity: .01; translate: 0 12px; } }

/* ---------- Movimento reduzido e impressao: tudo visivel, nada se mexe ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-m-load], [data-m-load] img, .m-words .m-w, .m-breathe, [data-m], [data-m] img { animation: none !important; }
  .m-js [data-m], .m-js [data-m] img { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; transition: none !important; }
  [data-m-magnet] { translate: none !important; }
  .m-lift, .m-card, .m-zoom img, .m-arrow svg, .m-arrow .seta { transition: none !important; }
  .m-lift:hover, .m-card:hover, .m-zoom:hover img, .m-arrow:hover svg, .m-arrow:hover .seta { transform: none !important; }
  .m-js [data-m-progress] .m-progress-bar { scale: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
@media print {
  [data-m-load], [data-m-load] img, .m-words .m-w, [data-m], [data-m] img { animation: none !important; }
  .m-js [data-m], .m-js [data-m] img { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; transition: none !important; }
  .m-js [data-m-progress] .m-progress-bar { scale: none !important; }
  .m-sw { opacity: 1 !important; transition: none !important; }
  [data-m-parallax] { translate: none !important; }
}