/**
 * The labelled grey box. CLAUDE.md is explicit: a missing asset is a grey box
 * with a label on it, never stock imagery and never a placeholder face.
 */
.Media__placeholder {
  position: relative;
  display: grid;
  place-content: center;
  padding: 1rem;
  text-align: center;
  background: var(--grey-1);
  border-radius: 2px;
}

/**
 * Corner ticks, so an empty slot reads as a frame waiting to be filled rather
 * than a missing file. Static — they cost nothing and there are two dozen of
 * them on the page.
 */
.Media__placeholder::before,
.Media__placeholder::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--grey-2);
}

.Media__placeholder::before {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}

.Media__placeholder::after {
  right: 10px;
  bottom: 10px;
  border-width: 0 1px 1px 0;
}

/**
 * The label breathes, but only while its section is resolved. Opacity is cheap;
 * two dozen of them animating forever off screen is exactly what eats the
 * mid-range Android frame budget for something nobody can see. The attribute
 * comes from useSectionMotion.
 */
[data-resolved] .Media__placeholder > span {
  animation: placeholder-breathe 3.4s var(--ease) infinite;
}

@keyframes placeholder-breathe {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-resolved] .Media__placeholder > span {
    animation: none;
  }
}

.Media__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}