/* ==========================================================================
   OSY IMPLEMENTOS — movimento.css
   O vocabulário visual das animações. O motor está em js/animacoes.js.

   Tudo aqui é enfeite por cima de conteúdo que já está legível sem ele:
   nenhum bloco depende de animação para aparecer, e o último trecho do
   arquivo desliga o conjunto para quem pediu menos movimento.
   ========================================================================== */

/* ====================================================== 0. ABERTURA
   A marca em tela cheia antes do conteúdo, só na home.

   A saída é daqui, não do JavaScript: `abertura-sai` esconde a camada no
   tempo certo mesmo que a JS falhe, não carregue ou dê erro no meio. Nenhum
   visitante fica preso numa tela vazia por causa de uma animação.

   O conteúdo da página está no DOM e é pintado por baixo: a camada cobre,
   não substitui. Leitor de tela e robô de busca não são afetados.       */
.abertura {
  position: fixed;
  inset: 0;
  z-index: var(--z-abertura);
  /* O fundo é o campo de cor da marca com profundidade: navy sólido, um
     halo teal no centro para a assinatura não flutuar num vazio chapado, e
     a cunha diagonal da pág. 31 do Brand Book entrando pelo canto — o mesmo
     grafismo que varre as seções do site.                                */
  background:
    radial-gradient(120% 88% at 50% 46%, rgba(31, 122, 140, 0.28) 0%, rgba(31, 122, 140, 0) 62%),
    var(--navy);
  display: grid;
  place-items: center;
  animation: abertura-sai 3s var(--suave) forwards;
}
/* a cunha, por cima do campo e por baixo da assinatura */
.abertura::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/grafismos/cunha-teal.png") top right / auto 78% no-repeat;
  opacity: 0.5;
  animation: abertura-cunha 2.4s var(--suave) forwards;
}
@keyframes abertura-cunha {
  from { opacity: 0; transform: translate3d(34px, -34px, 0); }
  to   { opacity: 0.5; transform: none; }
}
.abertura__cena { position: relative; display: block; width: 100%; height: 100%; }

@media (max-width: 767px) {
  .abertura::before { background-size: auto 46%; opacity: 0.42; }
}


@keyframes abertura-sai {
  0%, 82% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Quem pediu menos movimento entra direto no conteúdo. */
@media (prefers-reduced-motion: reduce) {
  .abertura { display: none; }
}

/* ================================================== 1. CENA DO HERO
   Canvas com a estrada em perspectiva e a malha de nós. Fica entre a
   mídia de fundo e o véu, para o texto continuar com contraste cheio.  */
.cena {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: cena-entra 1.6s var(--suave) 0.25s forwards;
}
@keyframes cena-entra { to { opacity: 1; } }

/* ============================================ 2. PROGRESSO DE LEITURA
   Fita fina no topo. Some no começo da página, onde não informa nada. */
.progresso-leitura {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-progresso);
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--medio);
}
.progresso-leitura.ativa { opacity: 1; }
.progresso-leitura i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--teal-claro));
}

/* ================================================= 3. CUNHA DE SEÇÃO
   A cunha diagonal é o grafismo oficial da marca (Brand Book, pág. 31)
   e é como os backgrounds entregues são construídos: campo de cor com a
   cunha no canto superior direito. Aqui ela entra varrendo.            */
.cunha-secao {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: var(--cunha-largura, clamp(180px, 26vw, 460px));
  aspect-ratio: 1100 / 1883;
  max-height: 100%;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  opacity: 0;
  transform: translate3d(26px, -26px, 0);
  transition: opacity 1s var(--suave), transform 1.1s var(--suave);
}
.cunha-dentro > .cunha-secao { opacity: 1; transform: none; }

.cunha-secao--teal  { background-image: url("../img/grafismos/cunha-teal.png"); }
.cunha-secao--navy  { background-image: url("../img/grafismos/cunha-navy.png"); }
.cunha-secao--bone  { background-image: url("../img/grafismos/cunha-bone.png"); }
.cunha-secao--areia { background-image: url("../img/grafismos/cunha-areia.png"); }
/* Os outros dois colorways vieram na mesma pasta e estavam sem uso. O verde
   água abre os fundos claros sem repetir o bone; o amarelo é a cor de ênfase
   do Brand Book e entra uma vez só por página, no máximo.                 */
.cunha-secao--verde-agua { background-image: url("../img/grafismos/cunha-verde-agua.png"); }
.cunha-secao--amarela    { background-image: url("../img/grafismos/cunha-amarela.png"); }

/* O CANTO. A arte entregue nasce no canto superior direito; girar e espelhar
   é o que evita que sete seções seguidas tenham o mesmo desenho no mesmo
   lugar. Usa `rotate`/`scale` como propriedades próprias, não dentro de
   `transform`: assim o giro convive com a varredura de entrada, que é quem
   escreve `transform`. Como a ordem de aplicação é translate → rotate →
   scale → transform, a varredura acontece já no referencial girado e cada
   cunha entra puxada para o seu canto, não sempre para o mesmo.           */
[data-cunha-canto="superior-esquerdo"] > .cunha-secao {
  right: auto;
  left: 0;
  scale: -1 1;
}
[data-cunha-canto="inferior-esquerdo"] > .cunha-secao {
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  rotate: 180deg;
}
[data-cunha-canto="inferior-direito"] > .cunha-secao {
  top: auto;
  bottom: 0;
  scale: 1 -1;
}

/* a seção precisa conter a cunha e manter o conteúdo por cima dela */
[data-cunha] { position: relative; overflow: hidden; }
/* `clip` corta igual a `hidden` mas não vira caixa de rolagem — e é isso que
   permite `position: sticky` lá dentro (a barra do guia no celular). Com
   `hidden`, o sticky fica preso e não gruda em nada.                       */
@supports (overflow: clip) { [data-cunha] { overflow: clip; } }
[data-cunha] > .shell { position: relative; z-index: var(--z-conteudo); }

/* ------------------------------------------- MARCA D'ÁGUA DA SEÇÃO
   O símbolo em contorno de fio, o mesmo `simbolo-wireframe.png` da pasta de
   grafismos, ampliado e cortado pela borda. Serve para a faixa larga e vazia
   — o fechamento em teal, a faixa de apoio em navy — onde a cunha, que é uma
   peça de canto, não tem o que preencher.

   É pseudo-elemento e não `background-image` da própria seção porque assim a
   opacidade fica ajustável aqui, sem precisar de um segundo arquivo com a
   transparência embutida. Cortado pela direita de propósito: grafismo que
   sangra lê como textura; inteiro e centralizado, lê como logotipo solto.

   Não use junto com `data-cunha` na mesma seção — as duas peças brigam pelo
   mesmo canto e o resultado fica carregado, que é o oposto do pedido.     */
[data-marca] { position: relative; overflow: hidden; }
@supports (overflow: clip) { [data-marca] { overflow: clip; } }
[data-marca] > .shell { position: relative; z-index: var(--z-conteudo); }
[data-marca]::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-140px, -6vw, -40px);
  width: clamp(240px, 34vw, 560px);
  aspect-ratio: 1100 / 830;
  transform: translateY(-50%);
  background: url("../img/grafismos/simbolo-wireframe.png") no-repeat center / contain;
  opacity: 0.55;
  pointer-events: none;
}
/* O fio do arquivo é areia: sobre navy e teal ele aparece como fio claro,
   que é o uso previsto. Sobre fundo claro quase some — ali basta baixar
   menos a opacidade para o desenho ainda se insinuar.                    */
.fundo-bone[data-marca]::after,
.fundo-branco[data-marca]::after,
.fundo-areia[data-marca]::after { opacity: 0.85; }

/* No celular o texto ocupa a largura inteira e passaria por cima do fio. */
@media (max-width: 767px) {
  [data-marca]::after { right: -32%; width: 320px; opacity: 0.4; }
}

/* ============================================ 4. SÍMBOLO QUE SE DESENHA
   O contorno do símbolo OSY traçado por stroke-dash — o grafismo de
   wireframe da mesma pág. 31, que é o que dá o ar de projeto técnico. */
.wireframe { display: block; width: 100%; height: auto; overflow: visible; }
.wireframe path {
  stroke-dasharray: 3600;
  stroke-dashoffset: 3600;
  opacity: 0;
  transition: stroke-dashoffset 2.4s var(--suave), opacity 0.5s linear;
  transition-delay: calc(var(--ordem, 0) * 0.42s);
}
.wireframe.tracado path { stroke-dashoffset: 0; opacity: 1; }

/* fechamento com o símbolo em contorno atrás da tagline */
.fechamento--marca { position: relative; overflow: hidden; }
.fechamento--marca > .shell { position: relative; z-index: var(--z-conteudo); }
.fechamento__marca {
  position: absolute;
  top: 50%;
  right: max(var(--margem), 3vw);
  width: clamp(180px, 24vw, 340px);
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}
@media (max-width: 767px) { .fechamento__marca { opacity: 0.45; right: -40px; } }

/* ==================================================== 5. FLUTUAÇÃO
   Deslocamento pequeno conforme a posição na tela, escrito pela JS na
   custom property. Sem JS o elemento simplesmente não se move.        */
[data-flutua] {
  transform: translate3d(0, var(--flutua, 0px), 0);
  transition: transform 0.35s linear;
  will-change: transform;
}

/* ======================================================= 6. TILT 3D
   Inclinação seguindo o cursor, mais um brilho que acompanha o ponto.
   Só entra em ponteiro fino — a JS nem liga o efeito no toque.        */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.45s var(--suave), box-shadow var(--medio);
}
[data-tilt]:hover { box-shadow: 0 26px 50px -26px rgba(8, 57, 87, 0.42); }
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--medio);
  background: radial-gradient(
    340px circle at var(--brilho-x, 50%) var(--brilho-y, 50%),
    rgba(255, 255, 255, 0.22), transparent 62%);
}
[data-tilt]:hover::after { opacity: 1; }

/* ================================================ 7. REVEAL EM ESCADA
   Variantes do reveal base. O padrão sobe; estas entram de lado ou com
   um recorte, para as seções não se revelarem todas do mesmo jeito.   */
.js [data-revelar][data-modo="lado"]   { transform: translateX(-28px); }
.js [data-revelar][data-modo="lado-d"] { transform: translateX(28px); }
.js [data-revelar][data-modo="escala"] { transform: scale(0.965); }
.js [data-revelar][data-modo="cortina"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1s var(--suave);
}
.js [data-revelar][data-modo="cortina"].visivel { clip-path: inset(0 0 0 0); }

/* linha que se estica ao entrar — separadores e sublinhados de seção */
.js [data-revelar][data-modo="regua"] {
  opacity: 1;
  transform: none;
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 0.9s var(--suave);
}
.js [data-revelar][data-modo="regua"].visivel { scale: 1 1; }

/* =========================================== 8. SEÇÃO QUE GRUDA
   Uma coluna fica presa enquanto a outra rola. O scroll da página
   segue normal — só muda qual item está aceso.                     */
[data-grude] { position: relative; }
[data-grude-marca] {
  opacity: 0.34;
  transition: opacity var(--medio), transform var(--medio), color var(--medio);
}
[data-grude-marca].ativo { opacity: 1; transform: translateX(6px); color: var(--teal); }

/* ============================================ 9. TRANSIÇÃO DE PÁGINA
   Fade curto na saída. Nunca segura mais de 190ms: atraso de navegação
   é o tipo de efeito que só atrapalha quem tem pressa.               */
body { opacity: 1; transition: opacity 0.19s var(--saida); }
body.saindo { opacity: 0; }

@view-transition { navigation: auto; }

/* ================================================= 10. NÚMEROS
   O contador troca o texto a cada quadro; a tabular-nums impede que a
   linha dance de largura enquanto os dígitos mudam.                  */
[data-contar] { font-variant-numeric: tabular-nums; }

/* =============================================== 11. MENOS MOVIMENTO
   Quem pediu menos movimento recebe o site inteiro, parado.          */
@media (prefers-reduced-motion: reduce) {
  .cena { display: none; }
  .cunha-secao { opacity: 1; transform: none; transition: none; }
  .wireframe path { stroke-dashoffset: 0; opacity: 1; transition: none; }
  [data-flutua] { transform: none; }
  [data-tilt]:hover { transform: none !important; }
  [data-tilt]::after { display: none; }
  .js [data-revelar][data-modo="cortina"] { clip-path: none; }
  .js [data-revelar][data-modo="regua"] { scale: 1 1; }
  [data-grude-marca] { opacity: 1; transform: none; }
  body.saindo { opacity: 1; }
}