/* ============================================================================
   NA TOCA v3 — camada organica
   Tres coisas, todas tiradas do que a marca ja tem:

   1. ESCRITA MISTURADA — Shantell Sans em palavras isoladas dentro dos titulos,
      ecoando o wordmark desenhado a mao da logo. Nunca em bloco de texto:
      so na palavra que carrega o sentido da frase.
   2. TRACO A MAO — o filete reto virou um risco irregular desenhado em SVG.
   3. DERIVA — os icones do padrao line-art autoral (assets/padrao.svg:
      ramo, folha, cogumelo, fogueira, pinheiro, bussola, dado, espiral)
      flutuando devagar ao fundo. Nenhum desenho novo foi inventado.

   Movimento sempre discreto: 18 a 34 segundos por ciclo, amplitude pequena,
   e tudo para quando o sistema pede prefers-reduced-motion.
   ========================================================================== */
:root{ --mao:'Shantell Sans','Barlow',cursive; }

/* --- 1. escrita misturada ------------------------------------------------- */
.mao{
  font-family:var(--mao);
  font-style:normal;
  font-weight:600;
  text-transform:none;          /* a mao nao escreve em caixa alta */
  letter-spacing:.004em;
  display:inline-block;
  transform:rotate(-1.6deg);
  padding-inline:.06em;
}
.h0 .mao{font-size:1.06em}
.h1 .mao,.h2 .mao{font-size:1.04em}
.hero h1 .mao{color:#FC8A4F}
/* o span do titulo do hero usa gradiente com text-fill transparente;
   a palavra a mao precisa sair dessa heranca ou fica invisivel */
.hero h1 .mao,.hero h1 span .mao{
  background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;-webkit-text-fill-color:#FC8A4F!important;color:#FC8A4F}
.esc .mao{color:#FC8A4F}
.espera .mao{display:block;width:fit-content;margin:.06em auto 0;transform:rotate(-2.2deg)}

/* sublinhado desenhado a mao sob a palavra manuscrita */
.mao::after{
  content:'';display:block;height:.26em;margin-top:-.1em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c26-4 52-6 78-5 24 1 47 4 70 2 16-1 32-4 46-3' fill='none' stroke='%23F05002' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:.85;
}
.esc .mao::after{filter:brightness(1.35)}

/* --- 2. traco a mao no lugar do filete reto ------------------------------- */
.risco{
  width:74px;height:14px;background:no-repeat center/100% 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 14'%3E%3Cpath d='M3 9c12-4 24-5 36-4 8 1 17 3 32 1' fill='none' stroke='%23F05002' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  display:block;
}
.rot::before{                    /* o tracinho do rotulo tambem */
  width:26px;height:8px;background:no-repeat center/100% 100%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 8'%3E%3Cpath d='M2 5c6-2 12-3 22-2' fill='none' stroke='currentColor' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- 3. deriva ------------------------------------------------------------ */
.deriva{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deriva~.w,.deriva~.wx,.deriva~.cx{position:relative;z-index:2}
/* NUNCA usar .deriva+* aqui: o irmao seguinte pode ser um elemento ja
   posicionado em absolute (ex.: .hero__esp) e forcar relative o joga
   de volta no fluxo, empurrando a secao inteira para baixo. */
.dv{
  position:absolute;display:block;color:var(--laranja);height:auto;aspect-ratio:1;
  opacity:.2;
  animation:nt-deriva 26s ease-in-out infinite;
  will-change:transform;
}
.esc .dv,.hero .dv{color:#FC8A4F;opacity:.22}
.dv--1{animation-duration:24s;animation-delay:-3s}
.dv--2{animation-duration:31s;animation-delay:-11s}
.dv--3{animation-duration:19s;animation-delay:-7s}

@keyframes nt-deriva{
  0%  {transform:translate3d(0,0,0)          rotate(-5deg)}
  33% {transform:translate3d(9px,-15px,0)    rotate(4deg)}
  66% {transform:translate3d(-7px,-8px,0)    rotate(-2deg)}
  100%{transform:translate3d(0,0,0)          rotate(-5deg)}
}

/* a secao de espera respira mais */
.espera{background:var(--carvao-2)!important}
.espera .lead{max-width:46ch}

@media(max-width:760px){
  .dv{opacity:.14}
  .deriva svg:nth-child(n+4){display:none}   /* menos elementos na tela pequena */
}
@media(prefers-reduced-motion:reduce){
  .dv{animation:none}
}