/* layout/movimento.css — Etapa 8: movimento e casca (transição de página, link de pular, ajustes do celular). Sobrescreve regras anteriores: carrega por último. */
@view-transition { navigation: auto; }
.topo { view-transition-name: topo; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
.nprog { transition: opacity .3s; }
/* branco com anel vermelho: o link aparece sobre a lateral/barra escura (#121212), onde um botão escuro sumiria */
.pular { position: absolute; left: 12px; top: -48px; z-index: 200; background: #fff; color: var(--tinta); box-shadow: 0 0 0 2px var(--vermelho), var(--sombra-2); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.pular:focus { top: 12px; }
.conteudo:focus { outline: none; }
@media (max-width: 960px) {
  .barra-inferior { grid-template-columns: repeat(5, 1fr); }
  .toolbar .seletor { margin-left: 0; }
  .filtros { border-radius: 16px; }
  .topo-acoes .seletor label { display: none; }
  .detalhe-topo .nf { font-size: 24px; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .nprog { display: none; }
}