/* Shared archive waiting mark. Preserve Alex's original transparent artwork. */
.card-media__badge,
.archive-boot__badge,
.meta-fallback__badge {
  background: transparent url('/static/ANKL_blue_box_refined.png?v=dotted-square-v1') center / contain no-repeat;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none !important;
  filter: none !important;
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: ankleSquareFloat 3.2s linear infinite;
  pointer-events: none;
}

.card-media__badge {
  width: 60px;
  height: 60px;
  image-rendering: pixelated;
}
.archive-boot__badge { image-rendering: pixelated; }
.grid.list .card-media__badge { image-rendering: auto; }
#grid.wall .card-media:not(.is-loaded) { min-height: 76px; }

@keyframes ankleSquareFloat {
  0% { transform: perspective(420px) translateY(0) rotateX(12deg) rotateY(0deg); }
  50% { transform: perspective(420px) translateY(-6px) rotateX(-12deg) rotateY(180deg); }
  100% { transform: perspective(420px) translateY(0) rotateX(12deg) rotateY(360deg); }
}

.card-media:not(.is-loaded) > img,
.card-media:not(.is-loaded) > video { opacity: 0; }
.card-media.is-loaded .card-media__placeholder {
  visibility: hidden;
  pointer-events: none;
}
.card-media.is-loaded .card-media__badge,
.card-media.is-broken .card-media__badge,
.card-media:has(> img[hidden]) .card-media__badge { animation: none; }

/* Mobile uses the same waiting mark, while keeping its unavailable message. */
body.surf-mobile-app #grid .card-media:not(.is-loaded):not(.is-broken) .card-media__placeholder {
  display: flex;
  background: transparent;
}
body.surf-mobile-app #grid .card-media:not(.is-loaded):not(.is-broken)::before { content: none; }

.surf-shelf .surf-card .media.loading img { opacity: 0; }
.surf-shelf .surf-card .media.loading::before,
body.surf-mobile-app .surf-shelf .surf-card .media.loading::before {
  content: '';
  position: absolute;
  inset: auto;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  background: transparent url('/static/ANKL_blue_box_refined.png?v=dotted-square-v1') center / contain no-repeat;
  image-rendering: pixelated;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none !important;
  filter: none !important;
  backface-visibility: visible;
  animation: ankleSquareFloat 3.2s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .card-media__badge,
  .archive-boot__badge,
  .meta-fallback__badge,
  .surf-shelf .surf-card .media.loading::before,
  body.surf-mobile-app .surf-shelf .surf-card .media.loading::before {
    animation: none;
    transform: none;
  }
}