/* ===== VCL — pacote de efeitos (borda animada, esteira, brilho no botão, contador).
   Camada isolada e reversível: remover os 2 includes no index.html restaura tudo.
   Todos os efeitos funcionam no CELULAR (animação CSS pura / trigger por scroll). ===== */

/* 1) BORDA COM DESTAQUE ANIMADO — luz correndo na borda dos cards de transporte.
   Mira o pseudo-elemento direto (o React reescreve o className, mas não toca no ::after). */
@property --vclAng{syntax:'<angle>';initial-value:0deg;inherits:false}
.transport-card::after{
  content:"";position:absolute;inset:0;border-radius:16px;padding:1.7px;z-index:3;pointer-events:none;
  --b1:rgba(255,90,90,.25); --b2:#ff4141; --b3:#cc0000;
  background:conic-gradient(from var(--vclAng), transparent 0deg, transparent 250deg,
             var(--b1) 300deg, var(--b2) 340deg, var(--b3) 352deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:vclBrd 4.2s linear infinite;
}
/* cor por tema do card: 1=Aéreo azul · 2=Marítimo vermelho · 3=Rodoviário verde */
.transport-card:nth-child(1)::after{--b1:rgba(90,168,255,.25);--b2:#4da3ff;--b3:#1a6fe0}
.transport-card:nth-child(2)::after{--b1:rgba(255,90,90,.25);--b2:#ff4141;--b3:#cc0000;animation-delay:-1.4s}
.transport-card:nth-child(3)::after{--b1:rgba(53,208,127,.25);--b2:#35d07f;--b3:#12a150;animation-delay:-2.8s}
@keyframes vclBrd{to{--vclAng:360deg}}

/* 2) ESTEIRA INFINITA — origens/portos rolando */
.vcl-mq-sec{padding:34px 0;position:relative;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.18)}
.vcl-mq-label{text-align:center;color:#ff6a6a;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:700;margin-bottom:20px}
.vcl-mq{width:100%;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vcl-mq-track{display:flex;gap:14px;width:max-content;animation:vclMq 32s linear infinite}
.vcl-mq:hover .vcl-mq-track{animation-play-state:paused}
.vcl-mq-item{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:rgba(255,255,255,.72);padding:10px 18px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.03)}
.vcl-mq-item .dot{width:6px;height:6px;border-radius:50%;background:#cc0000;box-shadow:0 0 8px rgba(204,0,0,.7)}
@keyframes vclMq{to{transform:translateX(-50%)}}

/* 3) BRILHO PASSANDO NO BOTÃO (CTAs) */
.vcl-shine{position:relative;overflow:hidden;isolation:isolate}
.vcl-shine::after{
  content:"";position:absolute;top:-60%;left:-130%;width:55%;height:220%;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.5),transparent);
  transform:rotate(11deg);animation:vclShineSweep 4.5s ease-in-out infinite;
}
@keyframes vclShineSweep{0%{left:-130%}55%,100%{left:170%}}

/* 4) CONTADOR — sem estilo especial, o JS anima o número existente */

@media (prefers-reduced-motion: reduce){
  .vcl-brd::after,.vcl-mq-track,.vcl-shine::after{animation:none}
}