/* ============================================================
   tryzen — o estilo da identidade dos desenhos (js/desenhos.js)
   ------------------------------------------------------------
   A regra inteira esta em docs/desenhos-tryzen.md. Aqui moram o
   tamanho, as duas tintas e o movimento.

   ---------- as duas tintas ----------
   A cor do texto e um cinza (o texto misturado com o fundo do cartao).
     __fundo   o fundo do cartao por baixo do que fica na frente
     __cheio   o miolo cinza da unica forma cheia do desenho
     __longe   a linha do que esta longe ou chegando
     __marca   o corredor da logo: contorno grosso e miolo cinza

   ---------- o tamanho (pedido do dono, 12/10/2026: "uns 30% maior") ----------
   94 no cartao (era 72), 78 no celular (era 60), 62 ao lado de uma
   frase (era 48).

   ---------- o movimento (pedido do dono, 12/10/2026: "deixar animado") ----------
   Cada desenho tem UM gesto, pequeno e lento, que diz o que a cena faz:
   o corredor da uns passos, a moeda flutua, a etiqueta balanca, o aviao
   voa, a seta sai, a linha que ainda vem caminha. Nada pisca, nada
   gira, nada entra e sai da tela. Com "reduzir movimento" ligado, tudo
   para.
   ============================================================ */

.traco { display: block; width: 94px; height: 94px; color: var(--text); overflow: visible;
  --traco-cinza: color-mix(in srgb, var(--text) 32%, var(--surface)); }
.traco__fundo { fill: var(--surface); }
.traco__cheio { fill: var(--traco-cinza); }
.traco__longe { stroke: color-mix(in srgb, var(--text) 48%, var(--surface)); }
.traco__marca-fora { stroke-width: 5.6; }
.traco__marca-dentro { stroke: var(--traco-cinza); stroke-width: 2.4; }

/* ---------- os gestos ---------- */
.traco .t { transform-box: fill-box; transform-origin: center; }
/* os passos de quem corre (gente e o corredor da logo) */
.traco .t-passo { animation: traco-passo 1.2s ease-in-out infinite alternate; }
/* o rastro de quem passou */
.traco .t-rastro { animation: traco-rastro 1.3s linear infinite; }
/* o que esta solto no ar: a moeda, o treino que o motor esta encostando */
.traco .t-flutua { animation: traco-flutua 3.2s ease-in-out infinite; }
/* a seta do que saiu */
.traco .t-sai { animation: traco-sai 1.9s ease-in-out infinite; }
/* a etiqueta, pendurada pelo furo */
.traco .t-balanca { transform-origin: 82% 26%; animation: traco-balanca 2.8s ease-in-out infinite; }
/* o aviao do convite */
.traco .t-voa { animation: traco-voa 2.6s ease-in-out infinite; }
/* o ponto do que ainda vem */
.traco .t-pulsa { animation: traco-pulsa 1.9s ease-in-out infinite; }
/* a cabeca de quem esta junto: cada um no seu tempo */
.traco .t-acena { animation: traco-acena 2.4s ease-in-out infinite; }
.traco .t-d1 { animation-delay: -.8s; }
.traco .t-d2 { animation-delay: -1.6s; }
/* a linha tracejada caminha: o que ainda nao aconteceu esta a caminho */
.traco .t-marcha { animation: traco-marcha 1.5s linear infinite; }

@keyframes traco-passo { to { transform: translateY(-1.8px); } }
@keyframes traco-rastro { 0% { transform: translateX(3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(-3px); opacity: 0; } }
@keyframes traco-flutua { 50% { transform: translateY(-2.2px); } }
@keyframes traco-sai { 50% { transform: translate(2.4px, 2.4px); } }
@keyframes traco-balanca { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }
@keyframes traco-voa { 50% { transform: translate(2.4px, -2.4px); } }
@keyframes traco-pulsa { 50% { transform: scale(.7); } }
@keyframes traco-acena { 50% { transform: translateY(-1.4px); } }
@keyframes traco-marcha { to { stroke-dashoffset: -12.4; } }

/* a Tryzen trabalhando: o desenho ao lado da frase, e o corredor da logo aperta o passo */
.sistema-trabalha { display: flex; align-items: center; gap: 16px; }
.sistema-trabalha .traco { width: 62px; height: 62px; flex: none; }
.sistema-trabalha p { margin: 0; }
.sistema-trabalha .t-passo { animation-duration: .5s; }

@media (max-width: 640px) {
  .traco { width: 78px; height: 78px; }
  .sistema-trabalha .traco { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .traco .t, .traco .t-marcha { animation: none; }
}