/* Passeio guiado: o tour da primeira visita a cada tela.
 *
 * Nada de paleta nova — tudo sai dos tokens do design system que já estão no
 * :root de application.css. O escurecimento é o próprio verde da marca com
 * transparência, e não um cinza qualquer: é o que faz o passeio parecer parte
 * do sistema, e não um plugin colado por cima.
 */

.passeio {
  position: fixed;
  inset: 0;
  z-index: 900;              /* acima da gaveta do menu (40), que é o topo da tela */
  pointer-events: none;      /* cada peça devolve o clique por conta própria */
  font-family: var(--font-dm-sans);
  opacity: 0;
  transition: opacity 260ms ease;

  /* O véu é o verde da marca com transparência. Derivado do token, não digitado
     como um cinza: a tela escurece para dentro da identidade. */
  --passeio-veu: color-mix(in srgb, var(--color-canopy-green) 86%, transparent);
  --passeio-realce: var(--color-leaf-bright);
  --passeio-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

.passeio--ativo { opacity: 1; }

/* Engole o clique na tela por baixo enquanto o passeio roda. */
.passeio__bloqueio {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  cursor: pointer;
}

/* ===== o recorte ==========================================================
   Um retângulo transparente com uma sombra de 9999px em volta: a sombra é o
   escurecimento da tela inteira, e o retângulo é o buraco por onde o alvo
   aparece. Sem SVG, sem máscara, sem mexer no empilhamento da página. */
.passeio__veu {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--radius-cards-sm);
  pointer-events: none;
  box-shadow: 0 0 0 9999px var(--passeio-veu);
  transition:
    top 420ms var(--passeio-curva),
    left 420ms var(--passeio-curva),
    width 420ms var(--passeio-curva),
    height 420ms var(--passeio-curva);
}

/* O halo que pulsa na borda do buraco. Fica no véu, não no alvo: assim ele
   está sempre por cima, seja qual for o z-index do elemento destacado. */
.passeio__veu::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--passeio-realce);
  border-radius: calc(var(--radius-cards-sm) + 3px);
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--color-leaf-bright) 45%, transparent);
  opacity: 0;
  animation: passeio-halo 2s ease-out infinite;
}

/* Passo de boas-vindas: buraco de tamanho zero, tela toda escura, sem halo
   apontando para lugar nenhum. */
.passeio__veu--cheio::after { display: none; }

@keyframes passeio-halo {
  0%   { opacity: 0.9; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.035); }
  100% { opacity: 0; transform: scale(1.035); }
}

/* ===== o cursor fantasma ================================================== */
.passeio__cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 30px;
  pointer-events: none;
  transform: translate3d(50vw, 50vh, 0);
  transition: transform 620ms cubic-bezier(0.65, 0.02, 0.25, 1);
}

/* A seta é desenhada em clip-path: um arquivo de imagem a mais para um ponteiro
   de 22px não se paga.
   O contorno sai de dois drop-shadow sem deslocamento — sem eles o ponteiro
   branco some em cima do card branco que ele acabou de destacar, que é
   justamente onde ele mais precisa ser visto. */
.passeio__cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-paper-white);
  clip-path: polygon(0 0, 0 80%, 22% 62%, 40% 100%, 58% 92%, 40% 55%, 70% 52%);
  filter:
    drop-shadow(0 0 1px var(--color-canopy-green))
    drop-shadow(0 0 1px var(--color-canopy-green))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

/* A onda do clique: o sinal de que o cursor CHEGOU, não só passou por ali. */
.passeio__onda {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: var(--radius-tags);
  border: 2px solid var(--color-coral-pulse);
  opacity: 0;
}

.passeio__cursor--clicando .passeio__onda {
  animation: passeio-onda 320ms ease-out;
}

.passeio__cursor--clicando::before {
  animation: passeio-toque 320ms ease-out;
}

@keyframes passeio-onda {
  from { opacity: 0.95; transform: scale(0.25); }
  to   { opacity: 0; transform: scale(1.6); }
}

@keyframes passeio-toque {
  50% { transform: scale(0.82); }
}

/* ===== o balão ============================================================ */
.passeio__balao {
  position: fixed;
  width: min(340px, calc(100vw - 32px));
  padding: var(--spacing-20) var(--spacing-24) var(--spacing-16);
  background: var(--color-canopy-green);
  color: var(--text-on-dark);
  border-radius: var(--radius-cards);
  pointer-events: auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  transition:
    top 420ms var(--passeio-curva),
    left 420ms var(--passeio-curva),
    transform 420ms var(--passeio-curva);
}

.passeio__balao:focus { outline: none; }

.passeio__balao--centro {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* O bico que encosta no alvo. Nasce do lado que o JS escolheu, e some no passo
   de boas-vindas, que não aponta para nada. */
.passeio__balao::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-canopy-green);
  transform: rotate(45deg);
}

.passeio__balao--centro::before { display: none; }
.passeio__balao[data-lado="baixo"]::before    { top: -6px; left: calc(50% - 7px); }
.passeio__balao[data-lado="cima"]::before     { bottom: -6px; left: calc(50% - 7px); }
.passeio__balao[data-lado="direita"]::before  { left: -6px; top: calc(50% - 7px); }
.passeio__balao[data-lado="esquerda"]::before { right: -6px; top: calc(50% - 7px); }

.passeio__progresso {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-leaf-bright);
}

.passeio__titulo {
  margin: var(--spacing-8) 0 var(--spacing-4);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-on-dark);
}

.passeio__texto {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--text-on-dark-muted);
}

/* O texto entra a cada passo. Sem isso o balão troca de conteúdo sem nenhum
   sinal de que mudou de assunto. */
.passeio__balao--entrando .passeio__progresso,
.passeio__balao--entrando .passeio__titulo,
.passeio__balao--entrando .passeio__texto {
  animation: passeio-sobe 380ms var(--passeio-curva) both;
}

.passeio__balao--entrando .passeio__titulo { animation-delay: 45ms; }
.passeio__balao--entrando .passeio__texto  { animation-delay: 90ms; }

@keyframes passeio-sobe {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.passeio__pontos {
  display: flex;
  gap: var(--spacing-4);
  margin: var(--spacing-16) 0 var(--spacing-12);
}

.passeio__ponto {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-tags);
  background: color-mix(in srgb, var(--color-mint-wash) 32%, transparent);
  transition: width 260ms var(--passeio-curva), background 260ms ease;
}

.passeio__ponto--visto { background: color-mix(in srgb, var(--color-leaf-bright) 55%, transparent); }
.passeio__ponto--atual { width: 20px; background: var(--color-leaf-bright); }

.passeio__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.passeio__pular,
.passeio__proximo {
  font-family: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-buttons);
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.passeio__pular {
  padding: var(--spacing-8) var(--spacing-4);
  background: none;
  border: none;
  color: var(--color-mint-wash);
  opacity: 0.75;
}

.passeio__pular:hover { opacity: 1; }

.passeio__proximo {
  padding: var(--spacing-8) var(--spacing-20);
  background: var(--action-primary-bg);
  border: none;
  color: var(--action-primary-fg);
}

.passeio__proximo:hover { transform: translateY(-1px); }

.passeio__pular:focus-visible,
.passeio__proximo:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ===== o alvo =============================================================
   O zoom mora no elemento destacado. Só transform: nada de z-index nem de
   position, que mexeriam no empilhamento da tela por baixo do passeio. */
.passeio-alvo {
  transform: scale(1.025);
  transition: transform 450ms var(--passeio-curva);
}

/* ===== celular ============================================================
   Na tela estreita o balão cobriria o alvo de qualquer jeito. Ancorado embaixo
   ele para de brigar por espaço — e por isso vence a posição que o JS calculou. */
@media (max-width: 640px) {
  .passeio__balao,
  .passeio__balao--centro {
    top: auto !important;
    left: var(--spacing-12) !important;
    right: var(--spacing-12);
    bottom: calc(var(--spacing-16) + env(safe-area-inset-bottom));
    width: auto;
    transform: none;
  }

  .passeio__balao::before { display: none; }
}

/* ===== quem pediu para a tela ficar quieta ================================
   Sem cursor voando, sem halo pulsando, sem nada deslizando. O passeio vira o
   MESMO texto com um destaque estático — a informação não é o efeito. */
@media (prefers-reduced-motion: reduce) {
  .passeio,
  .passeio__veu,
  .passeio__balao,
  .passeio__ponto,
  .passeio-alvo {
    transition: none;
  }

  .passeio__cursor { display: none; }

  .passeio__veu::after {
    animation: none;
    opacity: 1;
  }

  .passeio__balao--entrando .passeio__progresso,
  .passeio__balao--entrando .passeio__titulo,
  .passeio__balao--entrando .passeio__texto {
    animation: none;
  }

  .passeio-alvo { transform: none; }
}