/* =============================================================================
   passo-a-passo.css — o tocador das explicações animadas e as animações
   -----------------------------------------------------------------------------
   O tocador é o passo-a-passo.js; os roteiros, o roteiros.js. As classes a-*
   são o vocabulário das cenas: cada peça do desenho diz COMO entra, e o \`--d\`
   do style diz QUANDO. Com "mostrar animações" desligado no Windows (comum
   em PC de escola) a regra de movimento reduzido do style.css encurta tudo:
   cada passo aparece pronto, parado.
   ========================================================================== */

/* O TOCADOR INTEIRO CABE NA FICHA, sem rolar. A cena é 16:9 e a largura
   dela manda na altura; então quem limita é a largura, tirada da altura da
   janela: o modal gasta ~300 px (cabeçalho, abas, margens) e a barra ~56.
   Medido a 1366×768, a primeira conta esquecia a barra e rolava 31 px. Numa janela baixa a cena encolhe e centra, em vez de
   empurrar a barra para baixo da dobra. */
.pp {
  width: min(100%, calc((100vh - 360px) * 16 / 9));
  min-width: min(100%, 320px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: #0c1422;
  box-shadow: var(--sombra-2);
  outline: none;
}
.pp:focus-visible { outline: 2px solid var(--ac-texto); outline-offset: 4px; }

/* ---- o palco ---- */
.pp__palco { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* A troca de passo: a cena velha sai para um lado, a nova entra do outro. */
.pp__camada--entra-dir { animation: ppEntraDir .5s cubic-bezier(.2, .8, .3, 1) both; }
.pp__camada--entra-esq { animation: ppEntraEsq .5s cubic-bezier(.2, .8, .3, 1) both; }
.pp__camada--sai-esq   { animation: ppSaiEsq .45s ease both; }
.pp__camada--sai-dir   { animation: ppSaiDir .45s ease both; }
@keyframes ppEntraDir { from { opacity: 0; transform: translateX(70px); } }
@keyframes ppEntraEsq { from { opacity: 0; transform: translateX(-70px); } }
@keyframes ppSaiEsq   { to { opacity: 0; transform: translateX(-70px); } }
@keyframes ppSaiDir   { to { opacity: 0; transform: translateX(70px); } }

/* ---- a barra: ‹ ›, um segmento por passo, e onde se está ---- */
.pp__barra {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: #111b2b;
}
.pp__seta {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: #fff; font: inherit; font-size: 1.35rem; line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.pp__seta:hover:not(:disabled) { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.pp__seta:disabled { opacity: .3; cursor: default; }
.pp__seta:focus-visible, .pp__seg:focus-visible, .pp__chamada:focus-visible {
  outline: 2px solid var(--ac-300, #f9a8d4); outline-offset: 2px;
}

.pp__segmentos { flex: 1; min-width: 0; display: flex; gap: 5px; margin-left: 6px; }
/* O segmento é um botão alto (clicável com folga) com a barrinha no meio. */
.pp__seg {
  flex: 1; min-width: 0;
  height: 26px; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.pp__seg i {
  display: block; height: 6px; border-radius: 6px;
  background: rgba(255, 255, 255, .13);
  transition: background-color .25s ease, transform .2s ease;
}
.pp__seg:hover i { transform: scaleY(1.5); background: rgba(255, 255, 255, .25); }
.pp__seg--feito i { background: color-mix(in srgb, var(--ac-400) 55%, #111b2b); }
.pp__seg--atual i { background: linear-gradient(90deg, var(--ac-400), var(--ac-600)); }

.pp__onde {
  flex: none; min-width: 9.5em;
  padding-left: 6px;
  color: rgba(255, 255, 255, .72);
  font-size: .8rem; font-weight: 700; text-align: right;
  white-space: nowrap;
}
.pp__onde[hidden], .pp__chamada[hidden] { display: none; }

.pp__chamada {
  flex: none;
  padding: 8px 14px;
  border: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--ac-400), var(--ac-600));
  color: #fff; font: inherit; font-size: .84rem; font-weight: 800;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ac-500) 80%, transparent);
  cursor: pointer;
  animation: ppChamada .5s cubic-bezier(.2, .9, .3, 1.3) .4s both;
}
.pp__chamada::after { content: "  →"; }
.pp__chamada:hover { filter: brightness(1.08); }
@keyframes ppChamada { from { opacity: 0; transform: translateX(12px) scale(.92); } }

/* Numa ficha estreita o nome do passo não cabe ao lado dos segmentos. */
@media (max-width: 560px) {
  .pp__onde { min-width: 0; }
  .pp__onde { font-size: 0; }
  .pp__onde::before { content: attr(data-curto); font-size: .8rem; }
}


/* =========================================================================
   O VOCABULÁRIO DAS CENAS
   ========================================================================= */

.pp__cena .a-surge {
  transform-box: fill-box; transform-origin: center;
  animation: aSurge .8s cubic-bezier(.2, .9, .3, 1.25) both;
  animation-delay: var(--d, 0s);
}
@keyframes aSurge { from { opacity: 0; transform: scale(.55); } }

.pp__cena .a-sobe {
  animation: aSobe .8s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes aSobe { from { opacity: 0; transform: translateY(28px); } }

.pp__cena .a-desenha {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: aDesenha var(--t, 1.2s) ease-in-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes aDesenha { to { stroke-dashoffset: 0; } }

.pp__cena .a-cresce {
  transform-box: fill-box; transform-origin: left center;
  animation: aCresce 1.2s cubic-bezier(.3, .8, .3, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes aCresce { from { transform: scaleX(0); } }

.pp__cena .a-onda {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: aOnda 2.1s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes aOnda {
  0%   { opacity: 0;  transform: scale(.35); }
  18%  { opacity: .9; }
  100% { opacity: 0;  transform: scale(1.75); }
}

.pp__cena .a-vai {
  opacity: 0;
  animation: aVai var(--t, 2.4s) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes aVai {
  0%   { opacity: 0; transform: translateX(0) scale(.7); }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--dx, 300px)) scale(1.15); }
}

.pp__cena .a-flutua { animation: aFlutua 3.2s ease-in-out infinite; }
@keyframes aFlutua { 50% { transform: translateY(-12px); } }

/* As asas giram no ombro: a borda da asa que encosta no corpo. */
.pp__cena .a-bate { transform-box: fill-box; animation: aBate .5s ease-in-out infinite alternate; }
.pp__cena .a-bate--dir { transform-origin: left center; }
.pp__cena .a-bate--esq { transform-origin: right center; --sentido: -1; }
@keyframes aBate { to { transform: rotate(calc(var(--sentido, 1) * -16deg)) scaleY(.82); } }

.pp__cena .a-pisca { animation: aPisca var(--t, 1.6s) steps(1, end) infinite; }
@keyframes aPisca { 50% { opacity: .25; } }

/* A bola do último passo vai e volta, e o feixe estica junto. */
.pp__cena .a-vaivem { animation: aVaivem 3.2s ease-in-out infinite; }
@keyframes aVaivem { 50% { transform: translateY(var(--dy, 80px)); } }
.pp__cena .a-feixe {
  transform-box: fill-box; transform-origin: bottom center;
  animation: aFeixe 3.2s ease-in-out infinite, aFeixeAnda .9s linear infinite;
}
@keyframes aFeixe { 50% { transform: scaleY(.4); } }
@keyframes aFeixeAnda { to { stroke-dashoffset: -22; } }

/* Gira de --de a --ate e volta: o braço do servo, o eixo do potenciômetro.
   Sem transform-box: o giro é em volta da origem do grupo, e quem desenha
   põe essa origem no eixo (servoBraco, potArte). */
.pp__cena .a-varre { animation: aVarre var(--t, 3s) ease-in-out infinite alternate; }
@keyframes aVarre { from { transform: rotate(var(--de, 0deg)); } to { transform: rotate(var(--ate, 180deg)); } }

/* A corrente num fio: o tracejado anda no sentido do traço. */
.pp__cena .a-fluxo { stroke-dasharray: 10 14; animation: aFluxo .8s linear infinite; }
@keyframes aFluxo { to { stroke-dashoffset: -24; } }

/* Tremer de leve: o pino solto que vira antena, o cristal que vibra. */
.pp__cena .a-treme { animation: aTreme var(--t, .18s) linear infinite alternate; }
@keyframes aTreme { from { transform: translate(-1.5px, 1px); } to { transform: translate(1.5px, -1px); } }

/* Um terço do tempo aceso, o resto apagado: as três luzes do semáforo com
   o mesmo --t e --d escalonados. Aceso é o estado de BASE — com movimento
   reduzido a animação não roda, e luz apagada de base sumiria com as três. */
.pp__cena .a-ciclo { animation: aCiclo var(--t, 6s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes aCiclo { 0%, 33.3% { opacity: 1; } 33.4%, 100% { opacity: .16; } }

/* Uma volta inteira sem voltar: o ponteiro do relógio. Gira em volta da
   origem do grupo, como o a-varre. */
.pp__cena .a-gira { animation: aGira var(--t, 4s) linear infinite; }
@keyframes aGira { to { transform: rotate(360deg); } }

/* A frase da etapa, só no celular (passo-a-passo.js, a legenda). */
.pp__legenda { display: none; }
@media (max-width: 739.98px) {
  .pp__legenda { display: block; padding: 12px 4px 0; font-size: .95rem; line-height: 1.5; color: var(--texto-medio); }
  .pp__legenda b { color: var(--texto); }
}

/* No toque as setas ‹ › têm o tamanho do dedo (os segmentos são atalho). */
@media (max-width: 720px), (pointer: coarse) {
  .pp__seta { width: 44px; height: 44px; }
}