/*
 * PACOTE trilha (GUSTAVO-2309 §2.7) — O CURSO COMO CAMINHO.
 *
 * Bloco `.caminho` (e não `.trilha`: `.trilha` é a lista lateral do palco, em
 * 55_palco.css, e continua sendo). Dois desenhos da mesma marcação:
 *
 *   .caminho--vertical    o curso: nós grandes em onda, título embaixo;
 *   .caminho--horizontal  a faixa do Hoje: 4 nós numa linha, sem título,
 *                         para a próxima lição caber acima da dobra.
 *
 * O zigue-zague sai de `.caminho__no--onda{-2..2}` (o CSP do app fecha
 * `style=""`, então o deslocamento é classe, não variável inline). Quem se
 * desloca é o ALVO (chamada + botão + título), nunca o balão: o balão ocupa a
 * largura do caminho e cabe inteiro mesmo quando o nó está na ponta.
 *
 * MOVIMENTO (MARCA.md §2): só `transform` e `opacity`. A próxima lição pulsa
 * (um anel que expande e some) e a chamada flutua. O nó afunda ao toque, como
 * um botão de verdade. Tudo isso some com `prefers-reduced-motion` (o bloco
 * atacado de 02_base.css) — e o conteúdo é o mesmo, porque nada aqui esconde
 * informação atrás de animação.
 */

.caminho {
  --no: 4.5rem;
  --no-profundidade: 0.375rem;
  --passo: 2.75rem;
  --cor-no: var(--cor-marca);
  --cor-no-sombra: var(--cor-marca-forte);
  --cor-no-icone: var(--cor-marca-contraste);
  position: relative;
}

.caminho__nos {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── O CAMINHO VERTICAL (o curso) ──────────────────────────────────────── */

.caminho--vertical .caminho__nos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-6);
  padding: var(--esp-8) 0 var(--esp-6);
}

.caminho__no {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.caminho__alvo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  transition: transform var(--tempo-lento) var(--curva-entrada);
}

.caminho--vertical .caminho__no--onda-2 .caminho__alvo { transform: translateX(calc(-2 * var(--passo))) }
.caminho--vertical .caminho__no--onda-1 .caminho__alvo { transform: translateX(calc(-1 * var(--passo))) }
.caminho--vertical .caminho__no--onda1 .caminho__alvo  { transform: translateX(var(--passo)) }
.caminho--vertical .caminho__no--onda2 .caminho__alvo  { transform: translateX(calc(2 * var(--passo))) }

/* O nó: um botão redondo com "espessura" (a sombra dura embaixo), que afunda
   quando apertado. É o gesto que diz "isto se toca" sem precisar de texto. */
.caminho__botao {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--no);
  height: var(--no);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cor-no);
  color: var(--cor-no-icone);
  box-shadow: 0 var(--no-profundidade) 0 var(--cor-no-sombra);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--tempo-rapido) var(--curva-padrao),
    box-shadow var(--tempo-rapido) var(--curva-padrao);
}
.caminho__botao:hover { transform: translateY(-2px) }
.caminho__botao:active,
.caminho__no--aberto .caminho__botao {
  transform: translateY(var(--no-profundidade));
  box-shadow: 0 0 0 var(--cor-no-sombra);
}
.caminho__botao:focus-visible {
  outline: 3px solid var(--texto);
  outline-offset: 4px;
}
.caminho__icone { display: block }

.caminho__rotulo {
  /* A "espessura" do nó (a sombra dura) fica embaixo do botão e desce mais
     quando ele afunda: sem este respiro o título encosta no botão aberto. */
  margin-top: var(--no-profundidade);
  max-width: 11rem;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  line-height: var(--altura-apertada);
  text-align: center;
  color: var(--texto-suave);
  overflow-wrap: anywhere;
}

/* ── OS SEIS ESTADOS ───────────────────────────────────────────────────── */

.caminho__no--aprovada {
  --cor-no: var(--cor-aprovado);
  --cor-no-sombra: var(--cor-aprovado-forte);
  --cor-no-icone: var(--cor-aprovado-contraste);
}
.caminho__no--prova_liberada {
  --cor-no: var(--cor-pontos);
  --cor-no-sombra: var(--cor-pontos-forte);
  --cor-no-icone: var(--cor-pontos-contraste);
}
.caminho__no--em_descanso {
  --cor-no: var(--cor-descanso-suave);
  --cor-no-sombra: var(--cor-descanso-forte);
  --cor-no-icone: var(--cor-descanso);
}
.caminho__no--em_descanso .caminho__botao { border: 2px solid var(--cor-descanso) }
.caminho__no--bloqueada {
  --cor-no: var(--fundo-fundo);
  --cor-no-sombra: var(--borda);
  --cor-no-icone: var(--texto-tenue);
}
.caminho__no--bloqueada .caminho__rotulo { color: var(--texto-tenue) }
.caminho__rotulo--link { text-decoration: none }
.caminho__rotulo--link:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px }
/* Liberada e assistindo ficam na cor da MARCA do tenant: é o convite. */

.caminho__no--pratica {
  --cor-no: var(--cor-ritmo);
  --cor-no-sombra: var(--cor-ritmo-forte);
  --cor-no-icone: var(--cor-ritmo-contraste);
}

/* O certificado fecha o caminho: maior, e dourado quando está pronto. */
.caminho__no--certificado { --no: 5.25rem }
.caminho__no--certificado.caminho__no--aprovada {
  --cor-no: var(--cor-pontos);
  --cor-no-sombra: var(--cor-pontos-forte);
  --cor-no-icone: var(--cor-pontos-contraste);
}
.caminho__no--certificado.caminho__no--aprovada .caminho__botao::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 50%;
  border: 2px dashed var(--cor-pontos);
  opacity: 0.6;
  animation: caminho-gira 14s linear infinite;
  pointer-events: none;
}

/* ── A PRÓXIMA LIÇÃO ───────────────────────────────────────────────────── */

/* O anel que pulsa: expande e some, a cada 2 s. Pseudo-elemento, para não
   mexer no tamanho do botão (e nunca em `width`). */
.caminho__no--proxima .caminho__botao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--cor-no);
  animation: caminho-pulso 2s var(--curva-entrada) infinite;
  pointer-events: none;
}
.caminho__no--proxima .caminho__botao { box-shadow: 0 var(--no-profundidade) 0 var(--cor-no-sombra), 0 0 0 6px var(--cor-marca-suave) }

/* A chamada "Começar/Continuar", um balãozinho em cima do nó, que flutua. É um
   link de verdade: um toque e a pessoa está no palco. */
.caminho__chamada {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--esp-1) var(--esp-4);
  border-radius: var(--raio-3);
  background: var(--fundo-inverso);
  color: var(--texto-inverso);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--sombra-2);
  animation: caminho-flutua 2.4s ease-in-out infinite;
}
.caminho__chamada::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.375rem;
  width: 0.75rem;
  height: 0.75rem;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.caminho__chamada:hover { color: var(--texto-inverso) }
.caminho__chamada:focus-visible { outline: 3px solid var(--cor-marca); outline-offset: 3px }

/* ── O BALÃO DO NÓ (card → modal em miniatura) ─────────────────────────── */

.caminho__balao {
  position: relative;
  z-index: 2;
  width: min(100%, 22rem);
  margin-top: var(--esp-4);
  padding: var(--esp-4) var(--esp-5) var(--esp-5);
  border-radius: var(--raio-4);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-3);
  text-align: left;
  animation: caminho-balao-entra var(--tempo-normal) var(--curva-entrada);
}
.caminho__balao[hidden] { display: none }
.caminho__balao-estado {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.caminho__balao-titulo {
  margin: var(--esp-1) 0 var(--esp-2);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  line-height: var(--altura-apertada);
  letter-spacing: var(--espacamento-titulo);
}
.caminho__balao-texto {
  margin: 0 0 var(--esp-4);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
  line-height: var(--altura-normal);
}
.caminho__balao-texto:last-child { margin-bottom: 0 }
.caminho__balao-meta {
  display: block;
  margin-top: var(--esp-1);
  color: var(--texto-tenue);
}
.caminho__no--aprovada .caminho__balao-estado { color: var(--cor-aprovado) }
.caminho__no--prova_liberada .caminho__balao-estado { color: var(--cor-pontos) }
.caminho__no--em_descanso .caminho__balao-estado { color: var(--cor-descanso) }
.caminho__no--pratica .caminho__balao-estado { color: var(--cor-ritmo) }

/* No CELULAR, fora do modal, o balão é FOLHA que sobe de baixo (MARCA.md §3),
   por cima da barra do app, presa à tela e não ao nó. */
@media (max-width: 47.99rem) {
  .caminho__balao:not(dialog *) {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-menu);
    width: auto;
    margin: 0;
    padding: var(--esp-6) var(--gutter) calc(var(--esp-6) + env(safe-area-inset-bottom));
    border-radius: var(--raio-4) var(--raio-4) 0 0;
    border-width: 1px 0 0;
    animation: caminho-folha-sobe var(--tempo-lento) var(--curva-entrada);
  }
  .caminho__balao:not(dialog *)::before {
    content: "";
    position: absolute;
    top: var(--esp-2);
    left: 50%;
    width: 2.5rem;
    height: 0.25rem;
    border-radius: var(--raio-redondo);
    background: var(--borda-forte);
    transform: translateX(-50%);
  }
}

/* ── A FAIXA DO HOJE (horizontal) ──────────────────────────────────────── */

.caminho--horizontal {
  --no: 3.5rem;
  --no-profundidade: 0.25rem;
}
.caminho--horizontal .caminho__nos {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  /* A altura da chamada da próxima lição (2,25rem + a seta de 0,375rem +
     o respiro de --esp-2) MAIS a onda de até 0,5rem que sobe o nó: com
     2,75rem a chamada de um nó na onda cobria o nome do curso no Hoje. */
  padding-top: 3.625rem;
}
/* O fio que liga os nós, atrás deles: um trecho por nó, do centro dele ao
   centro do seguinte. Um fio só na lista inteira (12,5% de cada lado) só
   fecha com QUATRO nós; com dois ou três ele passava do último nó. */
.caminho--horizontal .caminho__no:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  bottom: calc(var(--no) / 2);
  height: 3px;
  border-radius: var(--raio-redondo);
  background: var(--borda);
}
.caminho--horizontal .caminho__alvo { gap: var(--esp-2) }
.caminho--horizontal .caminho__no--onda-2 .caminho__alvo,
.caminho--horizontal .caminho__no--onda2 .caminho__alvo { transform: translateY(-0.5rem) }
.caminho--horizontal .caminho__no--onda-1 .caminho__alvo,
.caminho--horizontal .caminho__no--onda1 .caminho__alvo { transform: translateY(-0.25rem) }
.caminho--horizontal .caminho__chamada {
  position: absolute;
  bottom: calc(100% + var(--esp-2));
  left: 50%;
  translate: -50% 0;
}
.caminho--horizontal .caminho__icone { width: 24px; height: 24px }
.caminho--horizontal .caminho__no--certificado { --no: 3.75rem }

/* No desktop o balão da faixa flutua embaixo do nó, sem empurrar a tela. */
@media (min-width: 48rem) {
  .caminho--vertical { --passo: 4rem; --no: 5rem }
  .caminho--vertical .caminho__no--certificado { --no: 5.75rem }
  .caminho--horizontal .caminho__balao {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 20rem;
    translate: -50% 0;
  }
  .caminho--horizontal .caminho__no:first-child .caminho__balao { left: 0; translate: 0 0 }
  .caminho--horizontal .caminho__no:last-child .caminho__balao { left: auto; right: 0; translate: 0 0 }
}

/* Dentro do modal do curso o passo encolhe: o diálogo é mais estreito. */
dialog .caminho--vertical { --passo: 2.5rem }

/* ── O DETALHE DO CURSO ────────────────────────────────────────────────── */

.curso-detalhe__caminho {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borda-tenue);
}
.curso-detalhe__caminho-progresso {
  margin: 0;
  text-align: center;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--texto-tenue);
}

/* ── MOVIMENTO ─────────────────────────────────────────────────────────── */

@keyframes caminho-pulso {
  0%   { opacity: 0.7; transform: scale(1) }
  70%  { opacity: 0;   transform: scale(1.45) }
  100% { opacity: 0;   transform: scale(1.45) }
}
@keyframes caminho-flutua {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-4px) }
}
@keyframes caminho-gira {
  to { transform: rotate(360deg) }
}
@keyframes caminho-balao-entra {
  from { opacity: 0; transform: translateY(-6px) scale(0.97) }
  to   { opacity: 1; transform: none }
}
@keyframes caminho-folha-sobe {
  from { opacity: 0.4; transform: translateY(100%) }
  to   { opacity: 1;   transform: none }
}

/* O bloco atacado de 02_base.css já zera a duração de tudo; isto tira também
   as animações INFINITAS (um pulso de 0,01 ms em laço ainda é laço, e o
   `getAnimations()` do E2E o contaria). */
@media (prefers-reduced-motion: reduce) {
  .caminho__no--proxima .caminho__botao::after,
  .caminho__chamada,
  .caminho__no--certificado .caminho__botao::before,
  .caminho__balao { animation: none }
  .caminho__alvo, .caminho__botao { transition: none }
}
[data-movimento="reduzido"] .caminho__no--proxima .caminho__botao::after,
[data-movimento="reduzido"] .caminho__chamada,
[data-movimento="reduzido"] .caminho__no--certificado .caminho__botao::before,
[data-movimento="reduzido"] .caminho__balao { animation: none }