/* ============================================================
   THE SLOW FADE-OUT — the pinboard of half-remembered faces.
   Cards screwed straight onto the wall; click one and its
   screw gives way.
   ============================================================ */
.fade-lab {
  padding: 4px 0 0;
}

.faceboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
  padding: 10px 2px 2px;
}
.face-card {
  position: relative;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 6px 6px 5px;
  box-shadow: 3px 4px 0 var(--hard-ink);
  cursor: pointer;
  transform-origin: 1px 1px;
  transition:
    transform 0.3s cubic-bezier(0.25, 0.9, 0.3, 1),
    opacity 0.5s ease;
}
/* hangs off one corner screw — hovering makes it swing, not lift */
.face-card:hover {
  transform: rotate(2.4deg);
}

/* unscrew → swing loose around the screw → fall → a new face gets screwed on */
.face-card.loose {
  transform: rotate(10deg);
  transition: transform 0.34s cubic-bezier(0.55, 0, 0.85, 0.55);
}
.face-card.falling {
  transform: translateY(120vh) rotate(32deg);
  opacity: 0;
  transition:
    transform 0.95s cubic-bezier(0.45, 0, 0.85, 0.55),
    opacity 0.95s ease-in;
  z-index: 5;
  pointer-events: none;
}
.face-card.incoming {
  transform-origin: 50% 50%;
  transform: translateY(-6px) scale(1.12);
  opacity: 0;
}
.notrans,
.notrans * {
  transition: none !important;
}

.fc-pin {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 13px;
  height: 13px;
  filter: drop-shadow(1px 2px 0 var(--hard-ink));
  z-index: 2;
}
.fc-pin-face {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--torx-uri);
  background-size: contain;
  background-repeat: no-repeat;
  transition:
    transform 0.55s cubic-bezier(0.3, 0.1, 0.4, 1),
    opacity 0.5s ease 0.12s;
}
/* backs out counter-clockwise and comes toward you as it leaves the wall */
.fc-pin-face.unscrew {
  transform: rotate(-540deg) scale(2.6);
  opacity: 0;
}
.fc-pin-face.prescrew {
  transform: rotate(540deg) scale(1.7);
  opacity: 0;
}

.fc-photo {
  display: block;
  aspect-ratio: 1.25;
  border-radius: 0;
  overflow: hidden;
  background: var(--surface-deep);
}
.fc-photo.unknown {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  background-image: var(--surface-grain);
  background-size: 7px 7px;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--text-subtle);
}
.fade-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.face-card.flip .fade-avatar {
  transform: scaleX(-1);
  transform-origin: center;
}

.face-card figcaption {
  font-family: var(--font-mono);
  text-align: center;
  padding-top: 5px;
}
.face-card figcaption strong {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.face-card figcaption span {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: var(--text-subtle);
  min-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* how far gone they are */
.face-card.s1 .fade-avatar {
  filter: saturate(0.65) contrast(0.97);
}
.face-card.s2 .fade-avatar {
  filter: grayscale(0.9);
  opacity: 0.42;
}
.face-card.s3 .fade-avatar {
  filter: grayscale(1);
  opacity: 0.16;
}
.face-card.s3 figcaption strong {
  color: var(--text-subtle);
  font-style: italic;
}
/* the ones that stuck */
.face-card.keep figcaption strong {
  color: var(--accent);
  font-weight: 600;
}

.fb-foot {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .face-card,
  .fc-pin-face {
    transition: none;
  }
}