/* ==========================================================================
   movimento.css — estados iniciais e finais das animações
   --------------------------------------------------------------------------
   A linguagem de movimento segue o site da Ampere Alliance (curvas, tempos e
   efeitos), com as cores e fontes da marca da Vitória.

   COMO FUNCIONA
   - O <html> recebe a classe "movimento" (script no <head>) só quando a
     pessoa NÃO pediu "reduzir movimento" no sistema e o JavaScript está ativo.
   - Todo estado "escondido" começa com .movimento. Sem JavaScript ou com
     movimento reduzido, nada fica escondido: a página aparece completa.
   - O movimento.js adiciona a classe .inview quando um bloco [data-revelar]
     entra na tela (uma vez só). Aí as regras ".inview" abaixo animam.

   ONDE AJUSTAR TEMPOS
   - Curvas: variáveis --ease-revela e --ease-suave (style.css, :root).
   - Atrasos: classes .d-250 … .d-2500 (fim deste arquivo), de 0,25 s em 0,25 s.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Entrada e saída da página (fade de 0,25 s)
   -------------------------------------------------------------------------- */
@keyframes pagina-entra {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.movimento body {
  animation: pagina-entra 0.25s ease;
}

/* Ao clicar num link para outra página do site: some e só então navega */
.movimento.saindo body {
  opacity: 0;
  transition: opacity 0.25s ease;
}


/* --------------------------------------------------------------------------
   2. Texto dividido (letra a letra e linha a linha)
   -------------------------------------------------------------------------- */
[data-dividir] .palavra {
  display: inline-flex;
}

[data-dividir] .letra {
  display: inline-block;
}

/* Letra a letra: cada palavra vira uma "janela" (overflow hidden) e as
   letras sobem de baixo. O padding estica a janela para não cortar ç, g, p, j
   e acentos; a margem negativa devolve o espaço (o layout não muda). */
.movimento [data-dividir="letras"] .palavra {
  overflow: hidden;
  padding-top: 0.12em;
  padding-bottom: 0.25em;
  margin-top: -0.12em;
  margin-bottom: -0.25em;
}

.movimento [data-dividir="letras"] .letra {
  transform: translateY(110%);
}

@keyframes sobe {
  from { transform: translateY(110%); }
  to   { transform: none; }
}

.movimento [data-dividir="letras"].inview .letra,
.movimento .inview [data-dividir="letras"] .letra {
  animation: sobe 1.2s var(--ease-revela) forwards;
  animation-delay: calc(var(--i) * 0.01s + var(--atraso, 0s));
}

/* Linha a linha: as palavras de cada linha sobem juntas, com fade;
   cada linha começa 0,25 s depois da anterior. */
.movimento [data-dividir="linhas"] .palavra {
  transform: translateY(102%);
  opacity: 0;
}

@keyframes sobe-fade {
  from { transform: translateY(102%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.movimento [data-dividir="linhas"].inview .palavra,
.movimento .inview [data-dividir="linhas"] .palavra {
  animation: sobe-fade 1.2s var(--ease-revela) forwards;
  animation-delay: calc(var(--linha, 0) * 0.25s + var(--atraso, 0s));
}


/* --------------------------------------------------------------------------
   3. Utilitários de revelação
   Uso: coloque a classe num elemento dentro de um bloco [data-revelar].
   Não use estas classes direto num .botao (as transições se atrapalham):
   embrulhe o botão num <div>.
   -------------------------------------------------------------------------- */
.movimento :is(.t-fade, .t-sobe, .t-desce, .t-esquerda, .t-direita) {
  opacity: 0;
  transition:
    opacity 1s var(--ease-suave),
    transform 1s var(--ease-suave);
  transition-delay: calc(var(--atraso, 0s) + var(--atraso-filho, 0s));
}

.movimento .t-sobe     { transform: translateY(40px); }
.movimento .t-desce    { transform: translateY(-25px); }
.movimento .t-esquerda { transform: translateX(-25px); }
.movimento .t-direita  { transform: translateX(25px); }

/* Máscara: o elemento sobe de dentro de um pai com overflow: hidden */
.movimento .t-mascara {
  transform: translateY(105%);
  transition: transform 1.5s var(--ease-revela);
  transition-delay: calc(var(--atraso, 0s) + var(--atraso-filho, 0s));
}

/* Largura: cresce da esquerda para a direita (0 → 100 %) */
.movimento .t-largura {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s var(--ease-revela);
  transition-delay: calc(var(--atraso, 0s) + var(--atraso-filho, 0s));
}

/* Ícones: começam 10 % maiores e transparentes */
.movimento .t-icone {
  opacity: 0;
  transform: scale(1.1);
  transform-origin: center left;
  transition:
    opacity 1.5s var(--ease-revela),
    transform 1.5s var(--ease-revela);
  transition-delay: calc(var(--atraso, 0s) + var(--atraso-filho, 0s));
}

/* Estado final (quando o bloco entra na tela) */
.movimento .inview:is(.t-fade, .t-sobe, .t-desce, .t-esquerda, .t-direita, .t-mascara, .t-largura, .t-icone),
.movimento .inview :is(.t-fade, .t-sobe, .t-desce, .t-esquerda, .t-direita, .t-mascara, .t-largura, .t-icone) {
  opacity: 1;
  transform: none;
}

/* Bloco revelado pelo teclado (Tab): aparece na hora, sem esperar os atrasos */
.movimento .revelado-por-foco:is(.t-fade, .t-sobe, .t-desce, .t-esquerda, .t-direita, .t-mascara, .t-largura, .t-icone, .linha-h, .linha-v),
.movimento .revelado-por-foco :is(.t-fade, .t-sobe, .t-desce, .t-esquerda, .t-direita, .t-mascara, .t-largura, .t-icone, .linha-h, .linha-v) {
  transition-delay: 0s;
  transition-duration: 0.2s;
}

/* Abaixo de 1024 px, entradas laterais viram entradas de baixo para cima */
@media (max-width: 1023px) {
  .movimento :is(.t-esquerda, .t-direita) {
    transform: translateY(40px);
  }
}


/* --------------------------------------------------------------------------
   4. Linhas que se desenham
   -------------------------------------------------------------------------- */
.movimento .linha-h {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s var(--ease-revela);
  transition-delay: calc(var(--atraso, 0s) + var(--atraso-filho, 0s));
}

.movimento .linha-v {
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 1.5s var(--ease-revela);
  transition-delay: calc(var(--atraso, 0s) + var(--atraso-filho, 0s));
}

.movimento .inview:is(.linha-h, .linha-v),
.movimento .inview :is(.linha-h, .linha-v) {
  transform: none;
}


/* --------------------------------------------------------------------------
   5. Cabeçalho de seção (.titulo-secao)
   Símbolo gira de −90° a 0 com fade (1 s); título entra 20 px da direita
   (1 s, +0,25 s); a linha de 1 px cresce de 0 a 100 % (1,5 s).
   -------------------------------------------------------------------------- */
.movimento .titulo-secao__simbolo {
  opacity: 0;
  transform: rotate(-90deg);
  transition:
    opacity 1s var(--ease-revela),
    transform 1s var(--ease-revela);
}

.movimento .titulo-secao__marca :is(.num, .rotulo) {
  opacity: 0;
  transition: opacity 1s var(--ease-suave) 0.1s;
}

.movimento .titulo-secao__titulo {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 1s var(--ease-suave) 0.25s,
    transform 1s var(--ease-suave) 0.25s;
}

.movimento .titulo-secao__filete {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 1.5s var(--ease-revela),
    transform 1.5s var(--ease-revela);
}

.movimento .titulo-secao.inview :is(.titulo-secao__simbolo, .titulo-secao__titulo, .titulo-secao__filete, .num, .rotulo) {
  opacity: 1;
  transform: none;
}


/* --------------------------------------------------------------------------
   6. Hero (início)
   -------------------------------------------------------------------------- */

/* Revelação diagonal do painel (máscara com clip-path) */
.movimento .inicio__painel {
  clip-path: polygon(100% 0, 100% 0, 100% 6%, 0 100%, 0 100%);
}

.movimento .inicio__painel.inview {
  clip-path: polygon(20% 0, 100% 0, 100% 88%, 86% 100%, 0 100%);
  transition: clip-path 1.5s var(--ease-revela) 0.25s;
}

/* Foto: leve aproximação de 1.06 para 1 (propriedade "scale") */
.movimento .inicio__foto img {
  scale: 1.06;
}

.movimento .inicio__painel.inview .inicio__foto img {
  scale: 1;
  transition: scale 1.8s var(--ease-revela) 0.25s;
}


/* --------------------------------------------------------------------------
   7. Símbolo dourado que se desenha (hero, faixa da frase, 404)
   O traço percorre a linha do símbolo (stroke-dashoffset 1 → 0) e, no fim,
   o ponto aparece (fill-opacity 0 → 1).
   -------------------------------------------------------------------------- */
.movimento .simbolo-desenho use {
  stroke-dashoffset: 1;
  fill-opacity: 0;
}

@keyframes desenha {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes preenche {
  from { fill-opacity: 0; }
  to   { fill-opacity: 1; }
}

.movimento .inview .simbolo-desenho use,
.movimento .simbolo-desenho.inview use {
  animation:
    desenha 1.8s var(--ease-suave) var(--atraso-desenho, 0.9s) forwards,
    preenche 0.6s ease calc(var(--atraso-desenho, 0.9s) + 1.8s) forwards;
}

.frase {
  --atraso-desenho: 0.3s;
}


/* --------------------------------------------------------------------------
   8. Selo circular girando (1 volta a cada 60 s; só quando está visível)
   -------------------------------------------------------------------------- */
@keyframes gira {
  to { transform: rotate(360deg); }
}

.movimento .sobre__anel {
  animation: gira 60s linear infinite;
  animation-play-state: paused;
}

.movimento .visivel .sobre__anel {
  animation-play-state: running;
}


/* --------------------------------------------------------------------------
   9. Cortina (contato): painel da cor do cartão sobe e revela o padrão
   -------------------------------------------------------------------------- */
.movimento .cortina::after {
  transform: none;
}

.movimento .cortina.inview::after {
  transform: translateY(-100%);
  transition: transform 1.5s var(--ease-revela) 0.5s;
}

.movimento .contato__capa {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.1);
  transition:
    opacity 1.5s var(--ease-revela) 0.9s,
    transform 1.5s var(--ease-revela) 0.9s;
}

.movimento .cortina.inview .contato__capa {
  opacity: 1;
  transform: translate(-50%, -50%);
}


/* --------------------------------------------------------------------------
   10. Letreiro (marquee): 3 faixas idênticas lado a lado deslizando para a
   esquerda sem parar. Duração = 1,5 s × nº de letras (calculada no JS).
   Só roda enquanto está à vista (hover no botão, cursor ativo).
   -------------------------------------------------------------------------- */
.marquee {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
}

.marquee__faixa {
  display: flex;
  flex: none;
  align-items: center;
  animation: marquee var(--duracao, 20s) linear infinite;
  animation-play-state: paused;
}

.marquee__item {
  flex: none;
  padding-inline: 0.75rem;
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Botões: no hover (só com mouse), o rótulo some e o letreiro aparece */
@media (hover: hover) and (pointer: fine) {
  .movimento .botao[data-marquee]:hover .botao__rotulo {
    opacity: 0;
  }

  .movimento .botao[data-marquee]:hover .botao__marquee {
    opacity: 1;
  }

  .movimento .botao[data-marquee]:hover .marquee__faixa {
    animation-play-state: running;
  }
}


/* --------------------------------------------------------------------------
   11. Cursor com rótulo (pílula que segue o mouse em áreas [data-cursor])
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .movimento .cursor-rotulo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    display: block;
    padding: 8px 40px;
    border-radius: 10px;
    background-color: var(--ardosia-600);
    color: var(--creme);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.25s ease;
  }

  .movimento .cursor-rotulo.ativo {
    transform: translate(-50%, -50%) scale(1);
  }

  /* O texto invisível dá o tamanho da pílula; o letreiro passa por cima */
  .cursor-rotulo__medida {
    opacity: 0;
  }

  .cursor-rotulo .marquee {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .movimento .cursor-rotulo.ativo .marquee__faixa {
    animation-play-state: running;
  }

  /* Dentro das áreas com rótulo, a pílula substitui a seta do mouse */
  .movimento [data-cursor],
  .movimento [data-cursor] * {
    cursor: none;
  }
}


/* --------------------------------------------------------------------------
   12. Menu do celular: links entram em sequência
   -------------------------------------------------------------------------- */
.movimento .menu-mobile__item {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s var(--ease-suave),
    transform 0.8s var(--ease-revela);
}

.movimento .menu-mobile.aberto .menu-mobile__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.12s + var(--n) * 0.06s);
}


/* --------------------------------------------------------------------------
   13. Atrasos (de 0,25 s em 0,25 s, como na Ampere)
   -------------------------------------------------------------------------- */
.d-250  { --atraso: 0.25s; }
.d-500  { --atraso: 0.5s; }
.d-750  { --atraso: 0.75s; }
.d-1000 { --atraso: 1s; }
.d-1250 { --atraso: 1.25s; }
.d-1500 { --atraso: 1.5s; }
.d-1750 { --atraso: 1.75s; }
.d-2000 { --atraso: 2s; }
.d-2250 { --atraso: 2.25s; }
.d-2500 { --atraso: 2.5s; }


/* --------------------------------------------------------------------------
   14. Movimento reduzido
   Quem pediu "reduzir movimento" no sistema não recebe a classe .movimento
   (nada fica escondido). Este bloco é uma garantia extra: qualquer transição
   ou animação que sobrar fica instantânea. Único lugar com !important.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}