/* ============================================================
   anim — varredura e escrita
   ============================================================
   Dois gestos, e eles nunca se sobrepoem:

     escrita   proposta A, 0,7s. TODAS as marcas da pagina, a cada troca
               de tela. Precisa do esqueleto de 16 ramos (23 KB).
     varredura proposta C, 0,5s. A banda diagonal cruzando a viewport,
               no mesmo frame da escrita. As duas saem de body.varrendo.
     rolagem   a assinatura no fecho da landing, escrita conforme voce
               rola ate ela. Mesmos --t0/--dt, mapeados no trajeto de
               rolagem em vez do relogio, via view-timeline nativa.

   Regra que vale pra tudo aqui: a animacao nunca segura o conteudo.
   A tela nova ja esta no DOM e clicavel enquanto a banda passa, a
   escrita pula no primeiro clique ou rolagem, e opacidade nao bloqueia
   ponteiro. Quem chegou num dia ruim procurando o botao de WhatsApp
   nao espera nada.
   ============================================================ */

:root {
  --t-varre: .5s;    /* a banda cruzando a viewport */
  --t-escrita: .7s;  /* a caneta percorrendo os 16 ramos — o ritmo do site inteiro */
  --varre: 744px;    /* recalculado em JS a partir do viewBox da marca */
}

/* ---- 1. o monograma se revela pela diagonal ----
   A mask vive no bloco global de defs (um so no documento: repetir
   <defs> por SVG geraria id duplicado, e o primeiro sequestra as
   referencias de todos os outros). Como ela usa userSpaceOnUse e
   todos os SVG da marca compartilham a mesma viewBox, uma serve pra
   todos - e todos varrem juntos, que e o efeito desejado. */

#m-varre rect { transform: none; }

body.varrendo #m-varre rect {
  animation: varrer var(--t-varre) var(--curva) both;
}
@keyframes varrer {
  from { transform: translateX(calc(-1 * var(--varre))); }
  to   { transform: none; }
}

/* ---- 2. a banda diagonal cruzando a viewport ----
   Decorativa e sem pointer-events: passa por cima do conteudo novo,
   que ja esta la embaixo, vivo. */

.varredura { display: none; }
body.varrendo .varredura {
  display: block; position: fixed; inset: 0;
  pointer-events: none; z-index: 60; overflow: hidden;
}
.varredura__banda {
  position: absolute; top: -70vh; left: 0;
  width: 58vw; height: 240vh;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--ouro-viv) 10%, transparent) 26%,
    color-mix(in srgb, var(--ouro-viv) 38%, transparent) 52%,
    color-mix(in srgb, var(--ouro-viv) 62%, transparent) 63%,
    color-mix(in srgb, var(--ouro-viv) 14%, transparent) 74%,
    transparent 100%);
  /* rotate antes de translateX: o deslocamento acontece no eixo local
     da banda, ou seja, perpendicular a ela. E o que faz varrer em vez
     de escorregar de lado. */
  transform: rotate(var(--angulo)) translateX(-140%);
}

/* A animacao PRECISA estar sob body.varrendo. Declarada solta no
   .varredura__banda ela rodava uma unica vez no load, com o pai ainda
   em display:none, e morria no estado final - dai em diante toda
   navegacao revelava a banda ja parada no fim do trajeto. */
body.varrendo .varredura__banda {
  animation: banda var(--t-varre) var(--curva) both;
}
@keyframes banda {
  from { transform: rotate(var(--angulo)) translateX(-140%); }
  to   { transform: rotate(var(--angulo)) translateX(190%); }
}

/* ---- 3. a tela nova sobe atras da banda ----
   Escalonado nos filhos diretos da view, e curto de proposito. O primeiro
   bloco - que costuma ser o elemento de LCP - termina em 340ms, e opacidade
   nao bloqueia clique: da pra apertar o botao de WhatsApp durante a entrada. */

.entrando > * { animation: subir .34s var(--curva) both; }
.entrando > *:nth-child(1) { animation-delay: .01s; }
.entrando > *:nth-child(2) { animation-delay: .05s; }
.entrando > *:nth-child(3) { animation-delay: .09s; }
.entrando > *:nth-child(4) { animation-delay: .12s; }
.entrando > *:nth-child(5) { animation-delay: .15s; }
.entrando > *:nth-child(n+6) { animation-delay: .17s; }

@keyframes subir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 3b. a escrita ----
   Toda marca do site e escrita, e toda troca de tela reescreve todas elas.
   stroke-dashoffset no CONTORNO desenharia a silhueta da letra, nao o
   preenchimento - numa caligrafia de espessura variavel isso le como
   "contorno", nao como escrita. Entao a caneta (stroke-width 33) corre pela
   linha central do esqueleto e o clipPath com a forma da letra e quem
   recorta.

   Repouso e dashoffset 0, ou seja, VISIVEL. Se o JS nao rodar, se o
   esqueleto nao carregar ou se a animacao for cortada no meio, a marca
   aparece inteira em vez de sumir. */

.traco {
  fill: none;
  stroke: url(#ouro);
  stroke-width: 33;
  /* butt, e nao round: com ponta arredondada o traco TOTALMENTE recolhido
     ainda pinta um ponto do tamanho da caneta no inicio do ramo - 16 bolhas
     douradas soltas antes de qualquer coisa ser desenhada. Um epsilon no
     dashoffset nao resolve porque o ramo mais curto e menor que o raio da
     caneta. E sob o clipPath, que ja esculpe a silhueta real da letra, a
     ponta arredondada nao aparecia de qualquer forma. */
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
/* Escrita por TEMPO: toda marca, menos a assinatura do fecho.
   --t0 e --dt sao numeros puros; aqui viram segundos. */
body.varrendo .traco:not(.tr-rolagem) {
  animation: escrever calc(var(--t-escrita) * var(--dt)) linear
             calc(var(--t-escrita) * var(--t0)) both;
}
@keyframes escrever {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* Escrita por ROLAGEM: a assinatura do fecho, com view-timeline nativa.
   Os mesmos --t0 e --dt agora viram trecho do trajeto de rolagem.

   O timeline e nomeado no container e nao resolvido no proprio <path>:
   view() num filho de SVG nao tem caixa de rolagem propria pra medir.
   Nomear no .marca-fecho e referenciar por nome funciona, e e o unico
   jeito de os 16 ramos compartilharem o mesmo progresso.

   Sem suporte (@supports falha), nada disto aplica e vale o repouso de
   .traco: dashoffset 0, marca inteira visivel. Degrada pra correto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .marca-fecho {
      view-timeline-name: --assinatura;
      view-timeline-axis: block;
    }
    /* Cada ramo ocupa a sua fatia do trajeto de rolagem, na mesma
       proporcao que ocuparia no tempo. */
    .marca-fecho .traco {
      animation: escrever linear both;
      animation-timeline: --assinatura;
      animation-range:
        cover calc(8% + var(--t0) * 40%)
        cover calc(8% + (var(--t0) + var(--dt)) * 40%);
    }
  }
}

/* ---- 4. secoes aparecendo na rolagem ----
   Estado inicial so entra via JS (.revelar), nunca no CSS puro: se o
   observer nao rodar por qualquer motivo, o texto continua visivel. */

.revelar { opacity: 0; transform: translateY(14px); }
.revelar.vista { opacity: 1; transform: none; transition: opacity .6s var(--curva), transform .6s var(--curva); }

/* ---- 5. respeitando quem pediu menos movimento ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.varrendo .varredura { display: none; }
  body.varrendo #m-varre rect,
  .varredura__banda,
  body.varrendo .traco,
  .entrando > * { animation: none; }
  /* Inclusive a de rolagem: o JS nem liga os listeners, e o !important
     garante que ela nao fique presa num estado parcial. */
  .traco, .tr-rolagem { stroke-dashoffset: 0 !important; }
  .revelar, .revelar.vista { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}