/* ═══════════════════════════════════════════════════════════════════════
   MYDESK — O GUIA DE PRIMEIRA VEZ
   ═══════════════════════════════════════════════════════════════════════
   Uma janela que aponta para a tela de verdade, e não um vídeo nem uma
   sequência de telas ilustradas: quem acabou de criar a conta precisa saber
   ONDE ficam as coisas, e isso só se aprende olhando para o lugar onde elas
   estão.

   O RECORTE É UMA SOMBRA, NÃO QUATRO RETÂNGULOS. O buraco é um `div` do
   tamanho do botão, e o escuro em volta é um `box-shadow` de raio gigante
   dele — uma caixa só, que acompanha o alvo sem quatro contas de geometria
   para manter em acordo. Com quatro divs, qualquer mudança de tamanho deixava
   uma fresta clara na junção.

   ── SOBRE O ACABAMENTO ──────────────────────────────────────────────────
   A primeira versão era um retângulo roxo chapado com treze bolinhas embaixo,
   e parecia o que era: um balão de aviso. Este é o PRIMEIRO minuto de alguém
   no produto — ele estabelece o quanto o resto merece confiança. Três
   decisões vieram daí:

     · o progresso virou um FIO no alto, não uma fileira de pontos. Treze
       pontos são treze coisas para o olho contar antes de ler o texto;
     · o balão ganhou profundidade (vidro, brilho roxo por baixo, borda de luz
       no topo) em vez de cor chapada;
     · cada passo ENTRA, com um movimento curto. Trocar o texto no lugar faz
       parecer que a tela piscou; entrar de baixo faz parecer que avançou.

   ── E DEPOIS, MAIS MOVIMENTO (19/08/2026) ───────────────────────────────
   Cada peça daqui responde a uma pergunta de quem está olhando, e é por isso
   que elas existem — animação que não responde nada é só barulho para os
   olhos:

     · A ENTRADA VEM DO LADO CERTO. Avançar traz o conteúdo da direita;
       voltar, da esquerda. Sem isso o botão "Voltar" produzia exatamente a
       mesma animação de "Próximo", e o gesto ficava sem resposta.
     · EM CASCATA, 45ms entre as linhas. Na ordem em que se lê — contador,
       título, texto, botões —, o que é tempo suficiente para o olho perceber
       ordem e curto demais para virar espera.
     · O BALÃO NASCE, só na abertura. Entre passos ele VIAJA de um alvo para
       o outro, e reencenar o nascimento faria a viagem parecer um piscar.
     · A ONDA sai do recorte uma vez a cada passo. O pulso do recorte é
       contínuo, e o que é contínuo vira ruído de fundo depois do segundo
       passo: quem avisa que a explicação mudou de lugar precisa ser evento.
     · O FIO tem um brilho que corre, o ponto do contador respira e o botão
       principal leva um lampejo de tempos em tempos. São os três pontos que
       o olho procura — progresso, posição e saída para a frente.
     · E A SAÍDA É UMA SAÍDA: encolhe e apaga, em vez de sumir.

   ── E ENTÃO CADA PASSO GANHOU UMA ENCENAÇÃO ─────────────────────────────
   Um passo tinha demonstração — o da barra, porque falava de um gesto. Os
   outros treze eram um parágrafo ao lado de um recorte, e o recorte responde
   "onde fica": ele nunca responde "o que acontece quando eu uso".

   O pior era o da nota. Prometia "texto, prazo, checklist e arquivos" e
   ilustrava com uma caixa vazia — a frase mais importante do guia inteiro
   entregue como legenda de nada.

   Agora são catorze, no mesmo palco de 250×92, e a ABERTURA deixou de ser uma
   transição de opacidade: dois anéis saem do centro e um raio cruza a tela,
   uma vez, porque a diferença entre "apareceu uma caixa" e "começou uma
   apresentação" é a diferença entre fechar e ler.
   ═══════════════════════════════════════════════════════════════════════ */

#guia-camada{
  --g-roxo:#a855f7;
  --g-indigo:#6366f1;
  position:fixed;inset:0;z-index:9500;
  font-family:'Inter',system-ui,sans-serif;
  opacity:0;transition:opacity .26s ease;
}
#guia-camada.visivel{opacity:1;}

/* ── O RECORTE ──────────────────────────────────────────────────────────
   Três sombras na mesma caixa: o escuro do mundo, o anel de luz e o brilho
   que vaza dele. `pointer-events:none` porque o guia não intercepta clique
   nenhum — quem quiser mexer no app durante o passo, mexe. */
.guia-furo{
  position:absolute;border-radius:12px;pointer-events:none;
  box-shadow:
    0 0 0 9999px rgba(8,5,16,.78),
    0 0 0 2px rgba(168,85,247,.55),
    0 0 26px 4px rgba(168,85,247,.28);
  animation:guiaPulso 2.6s ease-in-out infinite;
  transition:top .3s cubic-bezier(.16,1,.3,1),left .3s cubic-bezier(.16,1,.3,1),
             width .3s cubic-bezier(.16,1,.3,1),height .3s cubic-bezier(.16,1,.3,1);
}
@keyframes guiaPulso{
  0%,100%{box-shadow:0 0 0 9999px rgba(8,5,16,.78),0 0 0 2px rgba(168,85,247,.5),0 0 22px 3px rgba(168,85,247,.22);}
  50%    {box-shadow:0 0 0 9999px rgba(8,5,16,.78),0 0 0 2px rgba(168,85,247,.75),0 0 34px 7px rgba(168,85,247,.38);}
}
/* ── A ONDA ─────────────────────────────────────────────────────────────
   Irmã do recorte, e não filha: ela ESCALA, e escalar um elemento cuja sombra
   pinta a tela inteira arrastaria o mundo junto. Toca uma vez por passo, e o
   JS a reinicia tirando e pondo a classe com um reflow no meio. */
.guia-onda{
  position:absolute;border-radius:12px;pointer-events:none;opacity:0;
  border:2px solid rgba(168,85,247,.8);
}
.guia-onda.toca{animation:guiaOnda .78s cubic-bezier(.16,1,.3,1) 1;}
@keyframes guiaOnda{
  0%  {opacity:.9;transform:scale(1);}
  100%{opacity:0;transform:scale(1.38);}
}

/* Passo sem alvo (abertura e encerramento): o recorte encolhe para o centro e
   some, e fica só o escuro atrás do balão. */
.guia-furo.sem-alvo{
  width:0;height:0;top:50%;left:50%;border-radius:50%;animation:none;
  box-shadow:0 0 0 9999px rgba(8,5,16,.8);
}

/* ── O BALÃO ────────────────────────────────────────────────────────────
   340px porque texto de tutorial se lê em coluna estreita; esticado na
   largura da tela, o olho perde a linha na volta. */
.guia-balao{
  position:absolute;width:340px;max-width:calc(100vw - 32px);
  box-sizing:border-box;padding:20px 22px 16px;
  border-radius:18px;overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(168,85,247,.16), transparent 58%),
    linear-gradient(168deg, rgba(34,26,58,.97), rgba(17,14,28,.98));
  border:1px solid rgba(168,85,247,.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 32px 70px -14px rgba(0,0,0,.8),
    0 0 70px -26px rgba(168,85,247,.6),
    inset 0 1px 0 rgba(255,255,255,.07);
  transition:top .3s cubic-bezier(.16,1,.3,1),left .3s cubic-bezier(.16,1,.3,1);
}
/* ═══════════════════════════════════════════════════════════════════════
   A ABERTURA
   ═══════════════════════════════════════════════════════════════════════
   O guia inteiro aparecia por uma transição de opacidade: o escuro entrava,
   o balão entrava, e nada dizia que uma coisa tinha COMEÇADO. Numa tela que
   é o primeiro minuto de alguém no produto, a diferença entre "apareceu uma
   caixa" e "começou uma apresentação" é a diferença entre fechar e ler.

   São três peças, e cada uma responde a uma pergunta:

     · OS ANÉIS saem do centro, dois, com meio segundo entre eles. Dizem
       "isto está começando agora" antes de qualquer texto ser lido — é o
       que um botão pressionado faz, na escala da tela inteira.
     · O RAIO cruza a tela na diagonal, uma vez só. É a varredura do botão
       principal, ampliada: o olho segue a luz e chega no balão, que é
       exatamente para onde ele precisa ir.
     · O BALÃO CHEGA DE LONGE — desfocado, girado alguns graus, mais atrás —
       e assenta. Blur é caro, então ele existe só nos 520ms da chegada e
       some da folha de estilo depois; um `backdrop-filter` permanente já
       está no balão, e dois filtros empilhados em laço seriam pedir para a
       animação engasgar em máquina fraca.

   TUDO ISTO ACONTECE UMA VEZ. As peças saem do DOM (a classe `.guia-abre` é
   removida junto com o `nascendo`), e não há um único laço infinito da
   abertura sobrando na tela enquanto a pessoa lê os catorze passos.
   ═══════════════════════════════════════════════════════════════════════ */
.guia-abre{position:absolute;inset:0;pointer-events:none;overflow:hidden;}

.guia-abre i{
  position:absolute;left:50%;top:50%;
  width:120px;height:120px;margin:-60px 0 0 -60px;
  border-radius:50%;opacity:0;
  border:2px solid rgba(168,85,247,.55);
  animation:guiaAnel 1.5s cubic-bezier(.16,1,.3,1) both;
}
.guia-abre i:nth-child(2){animation-delay:.22s;border-color:rgba(99,102,241,.45);}
@keyframes guiaAnel{
  0%  {opacity:.85;transform:scale(.12);}
  100%{opacity:0;transform:scale(14);}
}

/* O raio é MAIOR que a tela e girado: uma faixa do tamanho exato deixaria
   os cantos de fora, e a diagonal é o que faz a varredura ler como luz em
   vez de uma persiana descendo. */
.guia-abre b{
  position:absolute;left:-60%;top:-80%;width:44%;height:260%;
  transform:rotate(19deg) translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(196,181,253,.13),transparent);
  animation:guiaRaio 1.15s cubic-bezier(.4,0,.25,1) .1s both;
}
@keyframes guiaRaio{
  0%  {transform:rotate(19deg) translateX(-120%);opacity:0;}
  22% {opacity:1;}
  100%{transform:rotate(19deg) translateX(420%);opacity:0;}
}

/* O balão chega de longe. Só na abertura — entre passos ele VIAJA de um alvo
   para o outro, e reencenar a chegada a cada passo transformaria a viagem
   num piscar. */
.guia-balao.nascendo{animation:guiaBalaoNasce .52s cubic-bezier(.16,1,.3,1) both;}
@keyframes guiaBalaoNasce{
  0%  {opacity:0;filter:blur(9px);transform:scale(.86) translateY(26px) rotate(-1.6deg);}
  60% {opacity:1;filter:blur(0);}
  100%{opacity:1;filter:blur(0);transform:none;}
}
/* O lustro que passa por cima do balão recém-chegado, uma vez. É o que dá a
   ele superfície: sem isso, "vidro" é só uma cor translúcida. */
.guia-balao.nascendo::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:55%;
  pointer-events:none;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);
  animation:guiaLustro .82s cubic-bezier(.4,0,.25,1) .16s both;
}
@keyframes guiaLustro{
  0%  {transform:translateX(-180%);}
  100%{transform:translateX(340%);}
}
#guia-camada.saindo .guia-balao{animation:guiaBalaoSai .22s ease-in both;}
@keyframes guiaBalaoSai{
  from{opacity:1;transform:none;}
  to  {opacity:0;transform:scale(.95) translateY(8px);}
}

/* O centro é a única coisa na tela nos passos sem alvo, e uma caixa
   completamente parada no escuro lê como imagem, não como interface. Uma luz
   lenta atrás do texto basta para ela continuar viva. */
.guia-balao.centro::before{
  content:'';position:absolute;width:72%;height:72%;left:-16%;top:-26%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(168,85,247,.24),transparent 72%);
  animation:guiaAura 8s ease-in-out infinite;
}
@keyframes guiaAura{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.7;}
  50%    {transform:translate3d(30%,20%,0) scale(1.25);opacity:1;}
}

.guia-balao:focus{outline:none;}
.guia-balao:focus-visible{box-shadow:0 0 0 2px var(--g-roxo),0 32px 70px -14px rgba(0,0,0,.8);}

/* O fio de progresso: no alto, encostado na borda, ocupando a largura toda.
   Ele responde "quanto falta" sem pedir que ninguém conte nada. */
.guia-fio{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:rgba(255,255,255,.07);
}
.guia-fio i{
  display:block;height:100%;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--g-indigo),var(--g-roxo));
  box-shadow:0 0 12px rgba(168,85,247,.7);
  transition:width .34s cubic-bezier(.16,1,.3,1);
}
/* Um brilho que corre pelo trecho já andado. Ele não mede nada — diz que o
   fio é o progresso, e não uma borda colorida. */
.guia-fio i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:guiaBrilho 2.8s ease-in-out infinite;
}
@keyframes guiaBrilho{
  0%     {transform:translateX(-110%);}
  55%,100%{transform:translateX(110%);}
}

/* ── O CONTEÚDO, QUE TROCA A CADA PASSO ─────────────────────────────────
   A animação é do miolo, e não do balão: o balão VIAJA de um alvo para o
   outro, e animar as duas coisas juntas dá um solavanco.

   E é de CADA LINHA, não do miolo inteiro: a cascata é o que faz o passo
   parecer montado na hora em vez de trocado de uma vez. O lado de onde vêm é
   escolhido pelo `data-dir` que o JS carimba no balão — direita quando se
   avança, esquerda quando se volta. */
.guia-corpo{position:relative;z-index:1;}
.guia-corpo > *{animation:guiaEntraFrente .42s cubic-bezier(.16,1,.3,1) both;}
.guia-balao[data-dir="tras"] .guia-corpo > *{animation-name:guiaEntraTras;}
.guia-corpo > *:nth-child(1){animation-delay:0ms;}
.guia-corpo > *:nth-child(2){animation-delay:45ms;}
.guia-corpo > *:nth-child(3){animation-delay:90ms;}
.guia-corpo > *:nth-child(4){animation-delay:135ms;}
.guia-corpo > *:nth-child(5){animation-delay:180ms;}
/* Seis com a encenação, sete na abertura, que tem a marca. Faltando estes, as
   últimas linhas entravam todas no tempo da quinta — o degrau some justo onde
   está a peça que a pessoa mais olha. */
.guia-corpo > *:nth-child(6){animation-delay:225ms;}
.guia-corpo > *:nth-child(7){animation-delay:270ms;}
@keyframes guiaEntraFrente{
  from{opacity:0;transform:translate3d(26px,0,0);}
  to  {opacity:1;transform:none;}
}
@keyframes guiaEntraTras{
  from{opacity:0;transform:translate3d(-26px,0,0);}
  to  {opacity:1;transform:none;}
}

.guia-passo-de{
  display:flex;align-items:center;gap:7px;
  font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(196,181,253,.62);margin-bottom:9px;
}
.guia-passo-de::before{
  content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:var(--g-roxo);box-shadow:0 0 8px rgba(168,85,247,.9);
  animation:guiaPontoPulsa 2.2s ease-in-out infinite;
}
@keyframes guiaPontoPulsa{
  0%,100%{transform:scale(1);box-shadow:0 0 8px rgba(168,85,247,.85);}
  50%    {transform:scale(1.4);box-shadow:0 0 15px rgba(168,85,247,1);}
}
.guia-tit{
  font-family:'Syne',sans-serif;font-size:1.14rem;font-weight:700;
  letter-spacing:-.015em;color:#fbfaff;line-height:1.32;margin:0 0 8px;
  /* Espaço para o × e o som não encostarem na última palavra do título. */
  padding-right:58px;
}
.guia-txt{
  font-size:.83rem;line-height:1.72;color:rgba(236,233,248,.62);margin:0;
}

/* ── O PÉ ───────────────────────────────────────────────────────────────
   Botões à direita, na ordem em que se lê: o caminho de volta primeiro, o de
   frente por último — e o de frente é o único colorido. */
.guia-pe{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:18px;}

.guia-bt{
  border:0;background:none;border-radius:10px;
  padding:8px 14px;font:inherit;font-size:.79rem;font-weight:600;
  color:rgba(236,233,248,.44);cursor:pointer;
  transition:color .16s,background .16s,transform .12s,box-shadow .16s,opacity .16s;
}
.guia-bt:hover{color:rgba(236,233,248,.85);background:rgba(255,255,255,.06);}
.guia-bt:disabled{opacity:.25;cursor:default;background:none;color:rgba(236,233,248,.44);}

.guia-bt.principal{
  position:relative;overflow:hidden;
  padding:8px 18px;color:#fff;
  background:linear-gradient(135deg,#b06bff,#7c5cf0);
  box-shadow:0 8px 22px -8px rgba(168,85,247,.85),inset 0 1px 0 rgba(255,255,255,.22);
}
/* Um lampejo de tempos em tempos, e não um brilho constante: o botão precisa
   ser encontrado por quem parou de ler, sem disputar com quem ainda está
   lendo. Por isso a varredura ocupa 28% do ciclo e o resto é pausa. */
.guia-bt.principal::after{
  content:'';position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  animation:guiaVarre 3.6s ease-in-out infinite;
}
@keyframes guiaVarre{
  0%,72%{transform:translateX(-260%);}
  100%  {transform:translateX(420%);}
}
.guia-bt.principal:hover{
  background:linear-gradient(135deg,#bb7dff,#8a6bf5);
  transform:translateY(-1px);
  box-shadow:0 12px 26px -8px rgba(168,85,247,.95),inset 0 1px 0 rgba(255,255,255,.28);
}
.guia-bt.principal:active{transform:translateY(1px) scale(.975);}

/* O × é um fantasma: presente para quem procura a saída, invisível para quem
   está lendo. Quadrado cinza no canto competia com o título. */
.guia-x{
  position:absolute;top:13px;right:13px;
  width:26px;height:26px;padding:0;border:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:none;color:rgba(236,233,248,.28);
  font-size:.82rem;line-height:1;cursor:pointer;
  transition:background .16s,color .16s;
}
.guia-x:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ── O INTERRUPTOR DO SOM ───────────────────────────────────────────────
   Som que toca sem que se possa desligar é uma armadilha, e um som que só se
   desliga nas preferências do app é a mesma armadilha com mais passos. Fica
   ao lado do ×, no único canto que a pessoa já vasculha quando quer parar
   alguma coisa. A escolha é lembrada no navegador. */
.guia-som{
  position:absolute;top:13px;right:43px;
  width:26px;height:26px;padding:0;border:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:none;color:rgba(236,233,248,.28);
  font-size:.76rem;line-height:1;cursor:pointer;
  transition:background .16s,transform .16s,opacity .16s;
}
.guia-som:hover{background:rgba(255,255,255,.08);transform:scale(1.12);}
.guia-som[aria-pressed="false"]{opacity:.45;}
.guia-som:active{transform:scale(.94);}

/* ── ABERTURA E ENCERRAMENTO ────────────────────────────────────────────
   Sem alvo para apontar, o balão é a tela inteira por um instante — então
   ganha respiro, a marca no alto e um título maior. */
.guia-balao.centro{width:400px;padding:26px 26px 18px;}
.guia-balao.centro .guia-tit{font-size:1.42rem;line-height:1.24;margin-bottom:10px;}
.guia-balao.centro .guia-txt{font-size:.86rem;}
.guia-marca{
  height:26px;width:auto;display:block;margin-bottom:16px;
  filter:drop-shadow(0 0 14px rgba(96,165,250,.45));
}

/* ── CELULAR ────────────────────────────────────────────────────────────
   Balão colado embaixo, largura inteira: em 360px de tela não existe "ao lado
   do botão" que caiba, e tentar posicionar produz um retângulo espremido
   contra a borda. */
@media (max-width:620px){
  .guia-balao,.guia-balao.centro{
    width:auto;left:12px !important;right:12px;
    top:auto !important;bottom:14px;padding:18px 18px 14px;
  }
  .guia-balao.centro .guia-tit{font-size:1.2rem;}
  .guia-marca{height:22px;margin-bottom:12px;}
  /* O palco é de largura fixa por causa das coordenadas da viagem. Em tela
     estreita ele não encolhe: encolhe a MOLDURA em volta, e o palco continua
     inteiro, centralizado, com as contas de sempre. */
  .guia-demo{margin:12px -4px 0;}
}

/* Tela muito estreita: o palco NÃO encolhe — as coordenadas da viagem são
   absolutas —, ele é reduzido inteiro. Escalar preserva as contas; mudar a
   largura as quebraria, e a peça passaria ao largo do encaixe. */
@media (max-width:360px){
  .guia-video{width:216px;height:80px;}
  .guia-demo{margin-bottom:-14px;}
}

/* Quem pediu menos movimento ao sistema pediu por um motivo — enjoo, enxaqueca,
   vertigem —, e um tutorial é a última tela que pode ignorar isso. Some TUDO:
   a cascata, a onda, o brilho, o lampejo e a aura. O guia continua inteiro,
   trocando de passo sem viagem nenhuma. O som não entra aqui: ele tem o
   próprio interruptor, e mudo não é o mesmo pedido que parado. */
@media (prefers-reduced-motion:reduce){
  #guia-camada,#guia-camada *,#guia-camada *::before,#guia-camada *::after{
    transition:none !important;animation:none !important;}
  .guia-corpo > *{opacity:1 !important;transform:none !important;}
  /* A abertura SOME por inteiro: dois anéis de tela cheia e um raio na
     diagonal são exatamente o que quem pediu menos movimento não quer ver, e
     o balão continua chegando — sem blur, sem giro, sem lustro. */
  .guia-onda,.guia-demo,.guia-abre{display:none;}
  .guia-balao.nascendo::after{display:none;}
  .guia-balao.nascendo{filter:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════
   A CENA DO PASSO — o clipe renderizado
   ═══════════════════════════════════════════════════════════════════════
   As encenações eram ~760 linhas de `div` + `keyframes`, uma coreografia por
   passo escrita em coordenadas absolutas. Elas saíram inteiras: as cenas agora
   são compostas em React e renderizadas com o Remotion (`remotion/`), e o que
   chega aqui é um arquivo de vídeo.

   O QUE FICA NESTE ARQUIVO é a moldura: o palco tem medida fixa e o vídeo a
   preenche. Fixa porque o balão VIAJA entre os passos — um palco que muda de
   tamanho junto faria a viagem saltar. */
.guia-demo{margin:14px 0 2px;}
.guia-video{
  display:block;width:250px;height:92px;margin:0 auto;
  border-radius:12px;border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.025);object-fit:cover;
}
html[data-theme="light"] .guia-video{
  border-color:rgba(15,39,68,.1);background:rgba(15,39,68,.03);
}
@media (max-width:520px){
  .guia-video{width:216px;height:80px;}
}