/* neWave . fundacao de motion (carregar com ?v=1 nas paginas que usam motion).
   Contrato em refinamento-produtos/motion-spec.md, secao 1. API do JS em js/motion.js.
   Primitivas por atributo [data-mo]; o JS poe .mo-in uma vez ao entrar em vista.
   Sem a classe .js no <html> (JS ausente) ou com prefers-reduced-motion: reduce,
   tudo aparece no estado final, sem transicao. Os estados escondidos e as
   transicoes ficam so em "no-preference", e a transicao so no estado .mo-in:
   assim a classe .js chegando depois do primeiro paint nao faz fade-out. */

:root {
  --mo-rapido: 180ms;
  --mo-medio: 420ms;
  --mo-lento: 900ms;
  --mo-saida: cubic-bezier(.22, 1, .36, 1);  /* entradas */
  --mo-troca: cubic-bezier(.65, 0, .35, 1);  /* trocas de estado e morphs */
  /* altura do que fica fixo no topo; a pagina pode sobrescrever (ex.: subnav) */
  --altura-topo: 84px;
}

@media (prefers-reduced-motion: no-preference) {
  /* foco: prints e vinhetas. Estado final sem filter/transform (nenhuma camada sobra). */
  .js [data-mo="foco"]:not(.mo-in) { opacity: 0; filter: blur(8px); transform: scale(.98); }
  .js [data-mo="foco"].mo-in {
    transition: opacity var(--mo-lento) var(--mo-saida) var(--mo-atraso, 0ms),
                filter var(--mo-lento) var(--mo-saida) var(--mo-atraso, 0ms),
                transform var(--mo-lento) var(--mo-saida) var(--mo-atraso, 0ms);
  }

  /* mascara: titulos h2. O texto nunca e dividido (o i18n troca o texto).
     O recorte final e levemente maior que a caixa para nao cortar descendentes. */
  .js [data-mo="mascara"]:not(.mo-in) { clip-path: inset(0 0 100% 0); transform: translateY(.35em); }
  .js [data-mo="mascara"].mo-in {
    clip-path: inset(-.3em -.2em -.3em -.2em);
    transition: clip-path var(--mo-lento) var(--mo-saida) var(--mo-atraso, 0ms),
                transform var(--mo-lento) var(--mo-saida) var(--mo-atraso, 0ms);
  }

  /* traco: forma com pathLength="1" (path, line, circle...) ou um svg/g cujas formas filhas
     tem TODAS pathLength="1". "1 2" em vez de "1": o gap maior evita o ponto que o
     linecap redondo deixa no fim do caminho quando o traco esta escondido.
     Nada de [pathLength] como seletor: o Blink guarda o nome minusculo na invalidacao
     e nao reaplica o estilo quando o .js chega depois do primeiro paint. */
  .js [data-mo="traco"]:not(.mo-in):not(svg):not(g),
  .js [data-mo="traco"]:not(.mo-in) :is(path, line, polyline, polygon, circle, ellipse, rect) {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
  }
  .js [data-mo="traco"].mo-in:not(svg):not(g),
  .js [data-mo="traco"].mo-in :is(path, line, polyline, polygon, circle, ellipse, rect) {
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--mo-lento) var(--mo-saida) var(--mo-atraso, 0ms);
  }

  /* cena-slot preenchido aparece (vazio nao ocupa nada, ver abaixo) */
  .cena-slot:not(:empty) { animation: mo-slot var(--mo-medio) var(--mo-saida) both; }
  @keyframes mo-slot { from { opacity: 0; } to { opacity: 1; } }

  /* estado: crossfade por opacity; o inativo sai da arvore so ao fim do fade */
  [data-mo="estado"] > [data-estado] {
    transition: opacity var(--mo-medio) var(--mo-troca), visibility 0s linear var(--mo-medio);
  }
  [data-mo="estado"][data-estado-atual="1"] > [data-estado="1"],
  [data-mo="estado"][data-estado-atual="2"] > [data-estado="2"],
  [data-mo="estado"][data-estado-atual="3"] > [data-estado="3"],
  [data-mo="estado"][data-estado-atual="4"] > [data-estado="4"],
  [data-mo="estado"][data-estado-atual="5"] > [data-estado="5"],
  [data-mo="estado"][data-estado-atual="6"] > [data-estado="6"],
  [data-mo="estado"][data-estado-atual="7"] > [data-estado="7"],
  [data-mo="estado"][data-estado-atual="8"] > [data-estado="8"] {
    transition: opacity var(--mo-medio) var(--mo-troca), visibility 0s;
  }

  /* zoom contextual do print */
  .print-quadro > img,
  .print-quadro > .print-camada { transition: transform var(--mo-lento) var(--mo-troca); }
  .print-realce { transition: opacity var(--mo-medio) var(--mo-saida); }
}

/* estado: <div data-mo="estado" data-estado-atual="2"> com filhos [data-estado="n"] (1 a 8).
   Os filhos ocupam a mesma celula, entao a altura e a do maior (sem CLS). */
[data-mo="estado"] { display: grid; }
[data-mo="estado"] > [data-estado] { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
[data-mo="estado"][data-estado-atual="1"] > [data-estado="1"],
[data-mo="estado"][data-estado-atual="2"] > [data-estado="2"],
[data-mo="estado"][data-estado-atual="3"] > [data-estado="3"],
[data-mo="estado"][data-estado-atual="4"] > [data-estado="4"],
[data-mo="estado"][data-estado-atual="5"] > [data-estado="5"],
[data-mo="estado"][data-estado-atual="6"] > [data-estado="6"],
[data-mo="estado"][data-estado-atual="7"] > [data-estado="7"],
[data-mo="estado"][data-estado-atual="8"] > [data-estado="8"] { opacity: 1; visibility: visible; }

/* ciclo() poe .mo-pausado no elemento fora de vista, com aba oculta ou movimento reduzido */
.mo-pausado, .mo-pausado * { animation-play-state: paused !important; }

/* Cena sticky dirigida por rolagem nativa. O JS so poe .cena-sticky quando a tela
   comporta (minLargura/minAltura) e o movimento nao esta reduzido; fora disso o
   contentor tem altura natural. Nenhum ancestral pode ter overflow hidden/auto/scroll
   (overflow: clip nao atrapalha). */
.cena-palco { position: relative; }
[data-cena-rolagem].cena-sticky { height: var(--cena-altura, 240vh); }
[data-cena-rolagem].cena-sticky > .cena-palco { position: sticky; top: calc(var(--altura-topo) + 24px); }

/* Contentor de visual que ganha cena depois: vazio nao ocupa espaco */
.cena-slot:empty { display: none; }
.cena-slot:not(:empty) { display: block; min-width: 0; }

/* Print real. A proporcao vem do width/height do <img> (CLS zero). */
.print { position: relative; margin: 0; }
.print-quadro {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--page-line, #dce7e1);
  border-radius: 14px;
  background: var(--page-soft, #edf4ef);
  box-shadow: 0 1px 2px rgba(14, 38, 46, .06), 0 14px 34px -14px rgba(14, 38, 46, .24);
  transform: translateZ(0); /* mantem o raio recortando a imagem durante o zoom */
}
.print-quadro img, .print-quadro picture { display: block; width: 100%; height: auto; }
.print-camada { position: relative; }
.print-quadro > img,
.print-quadro > .print-camada { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%); }
/* zoom: no <img> direto, ou na .print-camada quando ha realces (realces andam junto) */
.print-quadro.zoom > img,
.print-quadro.zoom > .print-camada { transform: scale(var(--zoom, 1.35)); }
/* realce em PORCENTAGEM da caixa da imagem: style="left:60%;top:30%;width:18%;height:10%".
   Aceso com .on; so a partir de 1024px. */
.print-realce {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid var(--green, #32be49);
  border-radius: 6px;
  background: rgba(50, 190, 73, .12);
  opacity: 0;
  pointer-events: none;
}
.print-realce.on { opacity: 1; }
@media (max-width: 1023.98px) { .print-realce { display: none; } }
.print figcaption { margin-top: 12px; color: var(--page-muted, #536c65); font-size: .8125rem; line-height: 1.5; }
.page-section--dark .print figcaption { color: #b7c9c0; }

/* Video com botao de pausa visivel (WCAG 2.2.2) */
.mo-video { position: relative; display: block; }
.mo-video > video { display: block; width: 100%; height: auto; border-radius: 14px; background: #0e262e; }
.mo-video-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(14, 38, 46, .78);
  color: #fff;
  cursor: pointer;
  transition: background var(--mo-rapido) ease;
}
.mo-video-btn:focus-visible { outline: 2px solid #82c89a; outline-offset: 2px; }
.mo-video-btn .mo-ic-play, .mo-video-btn.is-paused .mo-ic-pause { display: none; }
.mo-video-btn.is-paused .mo-ic-play { display: block; }
@media (hover: hover) and (pointer: fine) { .mo-video-btn:hover { background: rgba(14, 38, 46, .94); } }