/* Motion layer for the website UI kit — keyframes, hover/press states,
   scroll-reveal support, and the hero tracking-panel animation. */

@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pulse-ring{0%{transform:scale(.7);opacity:.9}70%{transform:scale(2.2);opacity:0}100%{opacity:0}}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-2%,2%)}}
@keyframes draw-route{to{stroke-dashoffset:0}}
/* O 100% precisa repetir `opacity:1`. Sem ele, `forwards` só congela o que o
   último quadro declara, e a opacidade volta ao `opacity:0` da própria regra
   .radar-pin: o pino caía, aparecia por um instante e sumia para sempre. O
   veículo, que é o assunto inteiro do painel, ficava invisível. */
@keyframes drop-pin{0%{transform:translateY(-14px) scale(.6);opacity:0}60%{transform:translateY(2px) scale(1.08);opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes blink-caret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes header-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

.tw-cursor{display:inline-block;margin-left:2px;color:var(--green-400);animation:blink-caret .9s step-end infinite}

/* Header */
.site-header{transition:background var(--dur-slower) var(--ease-out),border-color var(--dur-slower) var(--ease-out),box-shadow var(--dur-slower) var(--ease-out)}
.site-header.is-scrolled{box-shadow:0 12px 30px -14px rgba(0,0,0,.55)}
.header-logo{transition:height var(--dur-slower) var(--ease-out);animation:header-in 700ms var(--ease-out)}

/* Cards — box-shadow rings stand in for a hover border, since the resting
   `border` shorthand is set inline by each component and would win over a
   stylesheet border-color change. */
.card-hover{transition:transform var(--dur-slower) var(--ease-out),box-shadow var(--dur-slower) var(--ease-out)}
.card-hover:hover{transform:var(--lift-card);box-shadow:0 0 0 1px rgba(76,204,17,.35),0 24px 48px -24px rgba(0,0,0,.6)}
.card-hover:hover .card-icon{transform:scale(1.08) rotate(-4deg)}
.card-icon{transition:transform var(--dur-slower) var(--ease-out)}

/* Trilhos de marcas — a frota passando por um ponto de leitura. A faixa anda
   exatamente a largura de uma cópia da lista e reinicia, então a emenda cai
   sobre um quadro idêntico e ninguém vê o corte. */
@keyframes rail-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--rail-shift),0,0)}}
.rail-track{animation:rail-run var(--rail-dur,60s) linear infinite;will-change:transform}
.rail-track[data-reverse]{animation-direction:reverse}
.rail-viewport:hover .rail-track,.rail-viewport:focus-within .rail-track{animation-play-state:paused}

.brand-mark{transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.brand-mark:hover{opacity:1;transform:scale(1.09)}

/* Fecho da cobertura — o contorno acende e o fundo ganha um véu verde; a seta
   avança na direção para onde o clique leva. */
.spec-link{transition:background var(--dur-slower) var(--ease-out),border-color var(--dur-slower) var(--ease-out)}
.spec-link i{transition:transform var(--dur-slower) var(--ease-out)}
.spec-link:hover,.spec-link:focus-visible{background:rgba(76,204,17,.1);border-color:var(--green-500)}
.spec-link:hover i{transform:translateX(4px)}
.spec-link:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Painel de contato — a linha inteira é o alvo do clique, então é ela que
   reage: fundo um tom acima, fio verde entrando pela esquerda e a seta
   avançando na direção para onde o clique leva. */
.ledger-row{transition:background var(--dur-slower) var(--ease-out)}
.ledger-row::before{transition:transform var(--dur-slower) var(--ease-out)}
.ledger-icon,.ledger-go{transition:transform var(--dur-slower) var(--ease-out),color var(--dur-slower) var(--ease-out),
  background var(--dur-slower) var(--ease-out)}
/* `a:hover{color:var(--green-600)}` do base.css tem especificidade maior que
   `.ledger-row{color:inherit}` e repintaria a linha no hover. */
a.ledger-row:hover,a.ledger-row:focus-visible{background:rgba(255,255,255,.045);color:inherit}
a.ledger-row:hover::before,a.ledger-row:focus-visible::before{transform:scaleY(1)}
a.ledger-row:hover .ledger-icon{background:rgba(76,204,17,.16);transform:scale(1.05)}
a.ledger-row:hover .ledger-go{color:var(--green-400);transform:translateX(4px)}
a.ledger-row:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}
.ledger-live i{animation:blip 1.6s ease-in-out infinite}

/* Nav links */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--gradient-main);transition:right var(--dur-slower) var(--ease-out)}
.nav-link:hover::after,.nav-link.active::after{right:0}

/* Live tracking panel (hero signature) */
.radar-panel{position:relative;overflow:hidden}
/* Aqui girava uma cunha de conic-gradient, 360° a cada 7s, com inset de -40%:
   um facho de radar circular colado num painel retangular. Fora que varredura
   de radar não é o que este produto faz — a posição chega por GPS a cada 30
   segundos, e é o pino que conta essa verdade, pulsando quando ela chega — o
   facho passava por cima da rota e do pino e lia como mancha de renderização,
   não como sinal. No lugar dele, luz parada ancorada no veículo: dá o mesmo
   brilho de "tem sinal vivo aqui" sem tirar o olho do que importa, e a única
   coisa que se move no painel volta a ser a chegada da posição. */
.radar-halo{
  position:absolute;left:67.5%;top:50%;width:min(62%,340px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(76,204,17,.17),rgba(76,204,17,.06) 55%,transparent 78%);
}
.radar-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(circle at 60% 40%,#000 55%,transparent 88%);mask-image:radial-gradient(circle at 60% 40%,#000 55%,transparent 88%)}
.radar-route{stroke-dasharray:600;stroke-dashoffset:600;animation:draw-route 1900ms var(--ease-out) 500ms forwards}
.radar-pin{opacity:0;animation:drop-pin 650ms cubic-bezier(.3,1.4,.4,1) 2250ms forwards}
.radar-pin-ring{animation:pulse-ring 2.2s ease-out 2900ms infinite}
.radar-blip{animation:blip 1.6s ease-in-out infinite}
.watermark-mark{animation:drift 16s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}

  /* Sem o movimento o trilho perde o sentido: as cópias que só existiam para
     emendar o laço saem de cena e a lista vira uma grade, com as mesmas
     marcas e nenhuma repetida. */
  .brand-mark[data-clone]{display:none}
  /* Parado, o trilho deixa de sangrar: volta para a mesma calha do texto. */
  .rail-viewport{-webkit-mask-image:none;mask-image:none;padding:0 40px}
  .rail-track{flex-wrap:wrap;width:auto;gap:24px 0}
  .brand-mark{opacity:.7}
}
@media (prefers-reduced-motion: reduce) and (max-width:1024px){.rail-viewport{padding:0 24px}}
@media (prefers-reduced-motion: reduce) and (max-width:768px){.rail-viewport{padding:0 20px}}

/* `isolation:isolate` cria contexto de empilhamento no próprio botão, e é o
   que permite ao pseudo-elemento com z-index -1 ficar acima do fundo do botão
   e ainda assim abaixo do texto, que é nó de texto e não dá para empilhar. */
.btn-glow{position:relative;overflow:hidden;isolation:isolate}
.btn-glow::before{
  content:'';position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.26),rgba(255,255,255,0) 62%);
  opacity:0;transition:opacity 240ms var(--ease-out);
}
.btn-glow:hover::before,.btn-glow:focus-visible::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  .btn-glow::before{transition:none}
}