/* ==========================================================================
   skeleton.css — placeholders de carregamento com shimmer

   Progressive enhancement: o estado padrão do site é TUDO VISÍVEL. Nada aqui
   esconde conteúdo real sem JavaScript: as regras dependem de classes que só
   o JS coloca (.is-image-loading, html.js-skeleton) e o placeholder estático
   (.skeleton) nem renderiza enquanto o JS não roda.

   Quem aplica as classes: assets/js/lazy-load.js (watchImages) e
   assets/js/progressive-loader.js, iniciados por assets/js/app.js.
   Só transform e opacity animam.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --skeleton-base: rgba(255, 255, 255, 0.06);   /* bloco, tema escuro */
  --skeleton-shine: rgba(255, 255, 255, 0.16);  /* brilho que varre o bloco */
  --skeleton-radius: 4px;
  --skeleton-transition: 400ms ease;
  --skeleton-cycle: 1.6s;    /* uma varredura do brilho */
  --skeleton-delay: 200ms;   /* imagem que carrega antes disso (cache) nunca mostra o overlay */
  --skeleton-fade: 200ms;
  --skeleton-layer: 2;       /* acima da imagem (o rotator usa z-index 1), contido no wrapper */
}

/* Seções claras: bloco escuro translúcido e brilho branco. */
.faq-section,
.steps-section {
  --skeleton-base: rgba(21, 25, 45, 0.07);
  --skeleton-shine: rgba(255, 255, 255, 0.75);
}

/* ---------- overlay sobre imagem em carregamento ---------- */
/* watchImages() põe .is-image-loading no wrapper (img.parentElement) enquanto a
   imagem não carrega e tira no load/error. O overlay é absoluto: nunca muda o
   tamanho do wrapper e não intercepta cliques. */

/* Especificidade zero: só cria o contexto de posicionamento quando o wrapper
   não declara position (ex.: .lookbook-tile__media, .faq-section__photo). */
:where(.is-image-loading) {
  position: relative;
}

.is-image-loading {
  isolation: isolate;   /* o z-index do overlay fica contido no wrapper */
  clip-path: inset(0);  /* o brilho varre só o wrapper, mesmo sem overflow: hidden */
}

.is-image-loading::before,
.is-image-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--skeleton-layer);
  border-radius: inherit;
  pointer-events: none;
  animation: skeleton-appear var(--skeleton-fade) ease-out var(--skeleton-delay) both;
}

.is-image-loading::before {
  background-color: var(--skeleton-base);
}

.is-image-loading::after {
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  transform: translateX(-100%);
  animation:
    skeleton-appear var(--skeleton-fade) ease-out var(--skeleton-delay) both,
    skeleton-shimmer var(--skeleton-cycle) ease-in-out var(--skeleton-delay) infinite;
}

/* ---------- blocos de placeholder (.skeleton) ---------- */
/* Para placeholders de seções futuras. Dimensione cada bloco como o elemento
   final (largura/altura ou aspect-ratio) para não causar layout shift. */
.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--skeleton-base);
  border-radius: var(--skeleton-radius);
  pointer-events: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent);
  transform: translateX(-100%);
  animation: skeleton-shimmer var(--skeleton-cycle) ease-in-out infinite;
}

.skeleton--title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 0.75em;
}

.skeleton--text {
  height: 1em;
  width: 100%;
  margin-bottom: 0.5em;
}

.skeleton--text:last-child {
  width: 80%;
}

.skeleton--image {
  width: 100%;
  aspect-ratio: var(--skeleton-image-ratio, 16 / 9);
}

.skeleton--card {
  width: 100%;
  border-radius: var(--evoe-radius-sm);
  aspect-ratio: var(--skeleton-card-ratio, 4 / 5);
}

.skeleton--button {
  height: 2.75em;
  width: 10em;
  border-radius: var(--evoe-radius-sm);
}

/* ---------- estados da seção ([data-skeleton]) ---------- */
/* progressive-loader.js: .is-loading = há imagem visível ainda pendente;
   .is-loaded = seção pronta (ou liberada pelo failsafe). Os estados em si não
   têm estilo: são ganchos para o padrão abaixo, pensado para seções futuras
   com .skeleton (placeholder) e .skeleton-content (conteúdo real). */

/* Sem JS o placeholder estático nem renderiza: só o conteúdo real aparece. */
[data-skeleton] .skeleton {
  display: none;
}

html.js-skeleton [data-skeleton] .skeleton {
  display: block;
  transition: opacity var(--skeleton-transition);
}

/* O conteúdo real só é escondido com o JS ativo (html.js-skeleton) e enquanto a
   seção não terminou. O failsafe do app.js tira html.js-skeleton em até 8 s. */
html.js-skeleton [data-skeleton] .skeleton-content {
  transition: opacity var(--skeleton-transition), transform var(--skeleton-transition);
}

html.js-skeleton [data-skeleton]:not(.is-loaded) .skeleton-content {
  opacity: 0;
  transform: translateY(4px);
}

/* Seção pronta: o placeholder some sem empurrar o conteúdo real. */
html.js-skeleton [data-skeleton].is-loaded .skeleton {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ---------- ajustes por wrapper (site Evoe) ---------- */
/* Fotos recortadas (sem bordas no arquivo final) e wrappers sem border-radius:
   placeholder arredondado em vez de retângulo cru. */
.solucoes-rotator.is-image-loading::before,
.solucoes-rotator.is-image-loading::after,
.faq-section__photo.is-image-loading::before,
.faq-section__photo.is-image-loading::after {
  border-radius: var(--evoe-radius);
}

/* ---------- movimento ---------- */
@keyframes skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes skeleton-appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Sem animação sobra o bloco estático (o design-system.css já zera a duração
   das animações neste modo; aqui o brilho sai de cena de vez). */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after,
  .is-image-loading::after {
    display: none;
  }
}