/*
 * Loader de transição de página — logo Dapco animado.
 *
 * Substitui o círculo giratório do Bootstrap (.spinner-border) que aparecia
 * ao trocar de página ou recarregar. O markup fica em
 * app/Views/site/common/footer.php, dentro da .loader já existente.
 *
 * O logo é montado em três camadas sobrepostas, cada uma entrando em um
 * momento: a palavra DAPCO sobe, a tarja amarela desliza da esquerda e o
 * "FIXADORES INOXIDÁVEIS" sobe por último.
 *
 * A animação inteira dura ~780ms de propósito. O loader é removido pelo
 * $(window).on("load") em site-exec.js, então qualquer coisa mais longa
 * seria cortada no meio — e segurar a tela só para a animação terminar
 * pioraria o LCP, que o Google usa para posicionar o site.
 */

.loader-dapco {
   position: relative;
   width: min(70vw, 340px);
   /* proporção real do recorte das imagens (484x162) */
   aspect-ratio: 484 / 162;
}

/* Navegadores sem aspect-ratio (Safari < 15) caem para altura calculada */
@supports not (aspect-ratio: 1 / 1) {
   .loader-dapco {
      height: 0;
      padding-bottom: 33.47%;
   }
}

.loader-dapco__ly {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   display: block;
   opacity: 0;
}

/*
 * Texto só para leitor de tela.
 *
 * O markup antigo usava .sr-only, do Bootstrap 4 — mas o site carrega o
 * Bootstrap 5, onde a classe passou a se chamar .visually-hidden. Resultado:
 * .sr-only não existia em lugar nenhum do CSS e o "Carregando..." aparecia
 * escrito na tela, por cima do loader, em todas as páginas.
 *
 * A regra fica aqui, com nome próprio, para o loader não voltar a quebrar
 * se um dia o Bootstrap for atualizado de novo.
 */
.loader-dapco__texto {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.loader-dapco__palavra {
   animation: loaderDapcoPalavra 380ms cubic-bezier(.4, 0, .2, 1) 0ms both;
}

.loader-dapco__tarja {
   animation: loaderDapcoTarja 420ms cubic-bezier(.4, 0, .2, 1) 220ms both;
}

.loader-dapco__sub {
   animation: loaderDapcoSub 300ms cubic-bezier(.4, 0, .2, 1) 480ms both;
}

@keyframes loaderDapcoPalavra {
   0%   { opacity: 0; transform: translateY(10px); }
   100% { opacity: 1; transform: translateY(0); }
}

/*
 * Deslocamentos em % da largura do container, não em px: assim a tarja
 * percorre a mesma distância relativa no desktop e no celular.
 */
@keyframes loaderDapcoTarja {
   0%   { opacity: 0; transform: translateX(-24%); }
   70%  { opacity: 1; transform: translateX(1.5%); }
   100% { opacity: 1; transform: translateX(0); }
}

@keyframes loaderDapcoSub {
   0%   { opacity: 0; transform: translateY(8px); }
   100% { opacity: 1; transform: translateY(0); }
}

/*
 * Quem pede menos animação no sistema (acessibilidade, enjoo de movimento)
 * vê o logo completo e parado, sem nenhum movimento.
 */
@media (prefers-reduced-motion: reduce) {
   .loader-dapco__ly {
      animation: none;
      opacity: 1;
      transform: none;
   }
}