/* Tempo Livre: animacao de entrada da assinatura no hero.
   Sequencia: o simbolo se desenha em terracota e ganha cor, as letras sobem uma a uma, o descritor aparece,
   o filete cresce do centro e uma luz percorre a assinatura (e volta a passar de tempos em tempos).
   Com animacoes pausadas (html.sem-animacao) tudo fica no estado final. */

.hero-marca .marca-anim { display: block; width: min(500px, 76vw); height: auto; overflow: visible; }
.hero-centro::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: min(760px, 120vw); aspect-ratio: 1.6; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(198, 111, 78, .16), rgba(198, 111, 78, 0) 70%);
  pointer-events: none; animation: respira 7s ease-in-out 3s infinite;
}
@keyframes respira { 50% { opacity: .45; transform: translate(-50%, -50%) scale(1.06); } }

.marca-anim .m-traco { stroke-dasharray: 1; opacity: 0; animation: desenha 2.1s cubic-bezier(.65, 0, .35, 1) .25s both; }
@keyframes desenha {
  0% { opacity: 1; stroke-dashoffset: 1; }
  72% { opacity: 1; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
.marca-anim .m-tinta { animation: tinta 1.1s ease-out 1.5s both; }
@keyframes tinta { from { opacity: 0; } }
.marca-anim .m-simbolo { transform-box: fill-box; transform-origin: 50% 60%; animation: simbolo 2.8s cubic-bezier(.2, .7, .2, 1) .2s both; }
@keyframes simbolo { from { transform: scale(.94); } }

.marca-anim .m-letra {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: letra .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1.75s + var(--i) * .065s);
}
@keyframes letra { from { opacity: 0; transform: translateY(42%) scaleY(.9); } }

.marca-anim .m-desc { transform-box: fill-box; transform-origin: 50% 50%; animation: desc 1.2s cubic-bezier(.2, .8, .2, 1) 2.55s both; }
@keyframes desc { from { opacity: 0; transform: scaleX(.86); } }

.marca-anim .m-fio { transform-box: fill-box; transform-origin: 50% 50%; animation: fio .9s cubic-bezier(.65, 0, .35, 1) 2.95s both; }
@keyframes fio { from { transform: scaleX(0); } }

.marca-anim .m-brilho { opacity: 0; animation: brilho 10s ease-in-out 3.4s infinite; }
@keyframes brilho {
  0% { opacity: .9; transform: translateX(0); }
  16% { opacity: .9; transform: translateX(560px); }
  16.1%, 100% { opacity: 0; transform: translateX(560px); }
}

/* o texto de apoio e a chamada entram depois da assinatura */
.hero-base { animation: base 1s ease-out 3.2s both; }
@keyframes base { from { opacity: 0; transform: translateY(12px); } }