/* ---------------------------------------------------------------------------
   Esqueletos de carregamento.
   ---------------------------------------------------------------------------
   O que se desenha no sítio do conteúdo enquanto ele não chega. Vive aqui, em
   components/, porque é usado em dois sítios com pouco a ver um com o outro (a
   área de cliente e o funil de reserva) e o page_css() carrega esta pasta toda
   em todas as páginas.

   Aqui ficam só as PEÇAS: o bloco cinzento e o brilho que passa por cima. A
   forma de cada esqueleto — que largura, que altura, quantos — pertence ao CSS
   da página que o usa, porque é lá que está a forma do conteúdo verdadeiro.

   Regra que atravessa isto: um esqueleto tem de ter a MESMA altura do que vem a
   seguir. Se não tiver, a página salta quando o conteúdo entra, e trocar um
   spinner por um salto não é melhoria nenhuma.
   --------------------------------------------------------------------------- */

.esq {
  display: block;
  border-radius: 6px;
  background: var(--grey-100, #ededed);
  position: relative;
  overflow: hidden;
}

/* O brilho a passar diz "está a acontecer alguma coisa" sem ser mais um spinner. */
.esq::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: esq-brilho 1.4s ease-in-out infinite;
}

@keyframes esq-brilho {
  100% { transform: translateX(100%); }
}

/* Quem pediu ao sistema para não animar não leva animação nenhuma: fica o
   cinzento parado, que continua a dizer "isto ainda não é o conteúdo". */
@media (prefers-reduced-motion: reduce) {
  .esq::after { display: none; animation: none; }
}