/* Animações da marca (o comportamento fica em assets/js/animacoes.js) */

/* Hero: as linhas originais dão lugar às cópias animadas (animacoes.js desenha a entrada e a saída) */
.anim svg path[d="M300 160 L440 0"]:not(.linha-hero), .anim svg path[d="M20 360 L300 160"],
.anim svg path[d="M150 360 L300 160"], .anim svg path[d="M280 360 L300 160"],
.anim svg circle[cx="300"][cy="160"]:not(.no-hero) { visibility: hidden; }
.linha-hero { fill: none; stroke-linecap: butt; }
.no-hero { opacity: 0; transition: opacity .25s; }

/* Venn: as pílulas viram rótulos brancos translúcidos (o mouse escolhe pelas cores) e GERAR VALOR convida ao clique */
[id$="metodo"] div[style*="isolation: isolate"] button:not([style*="top: 47%"]) {
  background: rgba(255, 255, 255, .72) !important; color: #031226 !important; border-color: transparent !important;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
[id$="metodo"] div[style*="isolation: isolate"] { cursor: crosshair; touch-action: manipulation; }
[id$="metodo"] div[style*="isolation: isolate"] button[aria-label*=" mais "] { display: none !important; }
[id$="metodo"] div[style*="isolation: isolate"] button:not([style*="top: 47%"]) { pointer-events: none; }
[id$="metodo"] div[style*="isolation: isolate"] button[style*="top: 47%"] { cursor: pointer; letter-spacing: 1px; z-index: 2; }
[id$="metodo"] div[style*="isolation: isolate"] button[style*="top: 47%"][aria-pressed="false"] { animation: convite 2.4s ease-in-out infinite; }
[id$="metodo"] div[style*="isolation: isolate"] > div[aria-hidden] { transition: opacity .35s ease !important; }
@keyframes convite {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 241, 234, .55); }
  50% { box-shadow: 0 0 0 10px rgba(244, 241, 234, 0); }
}

/* Trajetória: a linha de cada empresa se desenha com a rolagem (--t0..--t3 vêm do script) */
.anim [id$="trajetoria"] div[style*="border-top: 3px"] { position: relative; border-top-color: transparent !important; }
.anim [id$="trajetoria"] div[style*="border-top: 3px"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px;
  background: var(--cor); transform: scaleX(var(--p, 0)); transform-origin: left;
}
.anim [id$="trajetoria"] div[style*="border-top: 3px"]:nth-child(1) { --cor: #031226; --p: var(--t0, 0); }
.anim [id$="trajetoria"] div[style*="border-top: 3px"]:nth-child(2) { --cor: #F9867A; --p: var(--t1, 0); }
.anim [id$="trajetoria"] div[style*="border-top: 3px"]:nth-child(3) { --cor: #7BD3A3; --p: var(--t2, 0); }
.anim [id$="trajetoria"] div[style*="border-top: 3px"]:nth-child(4) { --cor: #7EA6F7; --p: var(--t3, 0); }
.anim [id$="trajetoria"] div[style*="border-top: 3px"] > * {
  --q: clamp(0, calc((var(--p) - var(--atraso, .2)) * 2.6), 1);
  opacity: var(--q); transform: translateY(calc((1 - var(--q)) * 16px));
}
.anim [id$="trajetoria"] div[style*="border-top: 3px"] > :nth-child(2) { --atraso: .35; }
.anim [id$="trajetoria"] div[style*="border-top: 3px"] > :nth-child(3) { --atraso: .5; }

@media (prefers-reduced-motion: reduce) {
  [id$="metodo"] button { animation: none !important; }
}