/* =====================================================================
   COMPONENTE skeleton (AVT Core): esqueleto de carregamento para imagens (e blocos) pesados.
   PRINCÍPIO: o HTML chega primeiro e completo; o que é pesado (imagens) vai aparecendo aos poucos,
   com um esqueleto animado no lugar, sem pulo de layout.

   Uso: coloque  data-avt-skeleton  no contêiner da imagem (ele deve ter tamanho reservado: aspect-ratio ou width/height).
   Só imagens com loading="lazy" ganham esqueleto/fade; imagens "eager" (acima da dobra, candidatas a LCP) aparecem direto.

   VARIÁVEIS: --avt-skel-base (#eceff1) cor do fundo | --avt-skel-shine (rgba(255,255,255,.65)) brilho
              --avt-skel-speed (1.4s) velocidade | --avt-skel-fade (.35s) entrada da imagem | --avt-skel-radius (inherit)
   ===================================================================== */
[data-avt-skeleton]{position:relative;overflow:hidden;border-radius:var(--avt-skel-radius,inherit)}

/* só ativa com JavaScript (a classe avt-js é marcada no <head>); sem JS a imagem aparece normalmente */
html.avt-js [data-avt-skeleton]:not(.is-loaded){background:var(--avt-skel-base,#eceff1)}
html.avt-js [data-avt-skeleton]:not(.is-loaded)::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 20%,var(--avt-skel-shine,rgba(255,255,255,.65)) 50%,transparent 80%);
  background-size:200% 100%;animation:avt-skel-shimmer var(--avt-skel-speed,1.4s) linear infinite
}
html.avt-js [data-avt-skeleton] img[loading=lazy]{opacity:0;transition:opacity var(--avt-skel-fade,.35s) ease}
html.avt-js [data-avt-skeleton].is-loaded img[loading=lazy]{opacity:1}
/* segurança: se o JavaScript falhar, a imagem aparece sozinha depois de 10 s */
html.avt-js [data-avt-skeleton]:not(.is-loaded) img[loading=lazy]{animation:avt-skel-failsafe .01s 10s forwards}
html.avt-js [data-avt-skeleton]:not(.is-loaded)::before{animation-name:avt-skel-shimmer,avt-skel-failsafe-off;animation-duration:var(--avt-skel-speed,1.4s),.01s;animation-delay:0s,10s;animation-iteration-count:infinite,1;animation-fill-mode:none,forwards}

@keyframes avt-skel-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes avt-skel-failsafe{to{opacity:1}}
@keyframes avt-skel-failsafe-off{to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  html.avt-js [data-avt-skeleton]:not(.is-loaded)::before{animation:none;opacity:.5}
  html.avt-js [data-avt-skeleton] img[loading=lazy]{transition:none}
}