/* Thumbnail aspect-ratio reservation + logo/dots loader.
   Added 2026-07-09. Revert: remove this file + its <link> in layouts/app.blade.php,
   and restore views from resources/views/_backup_thumb-loader_2026-07-09/. */

/* Reserved-ratio box. Height comes from inline padding-bottom:{h/w*100}%. */
.thumb{
  position:relative;
  height:0;
  overflow:hidden;
  background:#0a0a0a;
  width:100%;
  display:block;
}

/* The real lazy image fills the reserved box, no crop/stretch, sits above loader. */
.thumb > img{
  position:absolute !important;
  top:0; left:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain;
  z-index:2;
  background:transparent !important;
}

/* Loader sits behind the image; the image paints over it once loaded. */
.thumb .thumb-loader{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  pointer-events:none;
}
.thumb .thumb-loader img{
  position:static !important;   /* override global .gallery a img{position:absolute} */
  width:38%;
  max-width:110px;
  height:auto !important;
  object-fit:contain;
  opacity:.85;
}
.thumb .thumb-loader .dots{display:flex; gap:7px}
.thumb .thumb-loader .dots span{
  width:8px; height:8px; border-radius:50%;
  background:#ed2553;
  animation:thumbbounce 1.2s ease-in-out infinite;
}
.thumb .thumb-loader .dots span:nth-child(2){animation-delay:.15s}
.thumb .thumb-loader .dots span:nth-child(3){animation-delay:.3s}
@keyframes thumbbounce{
  0%,100%{opacity:.3; transform:translateY(3px)}
  50%{opacity:1; transform:translateY(-3px)}
}