/* assets/css/loader.css — skeleton loader + sentinel oculto */

/* Oculta o sentinel sem ocupar bloco visível */
#scroll-sentinel{
  width:100%;
  height:1px;
  opacity:0;
  pointer-events:none;
  margin:0;
  padding:0;
  display:block;
}
.drive.grid #scroll-sentinel{
  grid-column: 1 / -1;
}

/* Container do thumb deve ter posição relativa */
.thumb, .fp-preview, .list-thumb{
  position: relative;
  background-color: #f2f4f7;
  overflow: hidden;
}

/* Esqueleto com shimmer enquanto carrega */
.thumb.loading::before,
.list-thumb.loading::before,
.fp-preview.loading::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, rgba(0,0,0,0) 40%, rgba(255,255,255,.35) 50%, rgba(0,0,0,0) 60%) 0 0 / 200% 100%,
    linear-gradient(#eef1f5,#eef1f5) 0 0/100% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer{
  0%   { background-position:-200% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}

/* Ícone spinner central (opcional) */
.thumb.loading .thumb-spinner,
.list-thumb.loading .thumb-spinner,
.fp-preview.loading .thumb-spinner{
  position:absolute; inset:auto 0 0 0; top:50%;
  width:36px; height:36px; margin:-18px auto 0;
  border:3px solid rgba(0,0,0,.08);
  border-top-color:#C11425;
  border-radius:50%;
  animation: spin .8s linear infinite;
  z-index:2;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* Imagem fica oculta até carregar */
.thumb .thumb-img,
.list-thumb .thumb-img,
.fp-preview .thumb-img{
  opacity:0;
  transition: opacity .2s ease-out;
  display:block;
  width:100%;
  height:auto;
}

/* Quando pronta, revela e remove loader */
.thumb.ready .thumb-img,
.thumb.loaded .thumb-img,
.list-thumb.ready .thumb-img,
.list-thumb.loaded .thumb-img,
.fp-preview.ready .thumb-img,
.fp-preview.loaded .thumb-img{
  opacity:1;
}
.thumb.ready::before,
.thumb.loaded::before,
.thumb.error::before,
.list-thumb.ready::before,
.list-thumb.loaded::before,
.list-thumb.error::before,
.fp-preview.ready::before,
.fp-preview.loaded::before,
.fp-preview.error::before,
.thumb.ready .thumb-spinner,
.thumb.loaded .thumb-spinner,
.thumb.error .thumb-spinner,
.list-thumb.ready .thumb-spinner,
.list-thumb.loaded .thumb-spinner,
.list-thumb.error .thumb-spinner,
.fp-preview.ready .thumb-spinner,
.fp-preview.loaded .thumb-spinner,
.fp-preview.error .thumb-spinner{
  display:none !important;
}

/* Garante proporção padrão 4:3 para grid (ajuste se já houver) */
.drive.grid .thumb{
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position:center;
}

/* Fallback para navegadores sem aspect-ratio */
@supports not (aspect-ratio: 4 / 3){
  .drive.grid .thumb::after{ content:""; display:block; padding-bottom:75%; }
  .drive.grid .thumb > *{ position:absolute; inset:0; }
}