/* Rota sobre a foto dos cards de Grupos privativos (estilo mapa): linha, pontos e nomes das cidades.
   Fica por cima da foto, sem cobrir nem mudar o enquadramento dela. Cores do site: azul de destaque, branco e azul-marinho.
   Usado na página Lazer e no editor de rota do painel (o rota.js desenha a linha e escolhe o lado de cada nome). */
.grp-rota{--dur:1.6s;--rd:.35s;--ease-rota:cubic-bezier(.45,.05,.35,1);position:absolute;inset:0;z-index:1;pointer-events:none;transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
/* acompanha o leve zoom da foto quando o mouse passa no card */
.grp:hover .grp-rota{transform:scale(1.04)}
.rota-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rota-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* contorno branco por baixo da linha azul, como nos mapas: a rota se lê em qualquer foto */
.rota-borda{stroke:rgba(255,255,255,.9);stroke-width:6}
.rota-linha{stroke:var(--accent,#1474D9);stroke-width:3}

.rota-pin{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent,#1474D9);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(10,26,54,.45)}
/* destino: o halo em volta do último ponto */
.rota-fim::before,.rota-fim::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none}
.rota-fim::before{border:2px solid rgba(20,116,217,.6);background:rgba(255,255,255,.3)}
.rota-fim::after{border:2px solid rgba(20,116,217,.5);opacity:0}

.rota-nome{position:absolute;white-space:nowrap;padding:4px 7px 3px;border-radius:5px;background:rgba(255,255,255,.94);color:var(--navy,#0A1A36);font:400 .8125rem/1 var(--font-suporte,'Bebas Neue','Arial Narrow',sans-serif);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 1px 4px rgba(10,26,54,.22)}
.rota-nome[data-pos="acima"]{transform:translate(-50%,calc(-100% - 11px))}
.rota-nome[data-pos="abaixo"]{transform:translate(-50%,11px)}
.rota-nome[data-pos="dir"]{transform:translate(11px,-50%)}
.rota-nome[data-pos="esq"]{transform:translate(calc(-100% - 11px),-50%)}

/* animação: a linha se desenha da partida ao destino; cada ponto e seu nome aparecem quando a linha chega neles */
.grp-rota.anim .rota-svg path{stroke-dasharray:1 1;stroke-dashoffset:1}
.grp-rota.anim .rota-pin{opacity:0;scale:.2}
.grp-rota.anim .rota-nome{opacity:0}
.grp-rota.anim.on .rota-svg path{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur) var(--ease-rota) var(--rd)}
.grp-rota.anim.on .rota-pin{opacity:1;scale:1;transition:opacity .25s ease calc(var(--rd) + var(--t,0s)),scale .55s cubic-bezier(.34,1.56,.64,1) calc(var(--rd) + var(--t,0s))}
.grp-rota.anim.on .rota-nome{opacity:1;transition:opacity .45s ease calc(var(--rd) + var(--t,0s) + .1s)}
.grp-rota.on .rota-fim::after{animation:rota-halo 2.6s cubic-bezier(.22,1,.36,1) calc(var(--rd) + var(--dur)) infinite}
@keyframes rota-halo{0%{opacity:.9;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.5)}}

@media (prefers-reduced-motion:reduce){
  .grp-rota,.grp:hover .grp-rota{transform:none;transition:none}
  .grp-rota.anim .rota-svg path{stroke-dashoffset:0;transition:none}
  .grp-rota.anim .rota-pin,.grp-rota.anim .rota-nome{opacity:1;scale:1;transition:none}
  .rota-fim::after{animation:none!important}
}