/* The Collection - the walking 3D specimen well (garage record + archive drawer). */
.tcp-well { width: 100%; max-width: 480px; margin: 0 auto 1.25rem; }
.tcp-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid rgba(138,173,140,.3); border-radius: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(138,173,140,.18), rgba(3,8,3,.55) 70%), #0a1a0b;
}
.tcp-frame .shopview { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; background: transparent; border: 0; }
.tcp-poster {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
  font-size: 3.6rem; opacity: .8; transition: opacity .35s ease;
}
.tcp-poster img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tcp-well[data-state="live"] .tcp-poster { opacity: 0; }
.tcp-well[data-state="idle"] .tcp-frame::after {
  content: ""; position: absolute; left: 50%; bottom: 12px; width: 38%; height: 2px; z-index: 3;
  transform: translateX(-50%); border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(138,173,140,.75), transparent);
  animation: tcp-scan 1.4s ease-in-out infinite;
}
@keyframes tcp-scan { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.tcp-caption {
  margin: .55rem 0 0; text-align: center;
  font-family: 'DM Mono', monospace; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sage, #8aad8c); opacity: .75;
}
/* the archive drawer is parchment: a brass-edged dark plate on paper */
.tcp-well.tcp-archive .tcp-frame { border-color: rgba(181,139,74,.55); border-radius: 2px;
  background: radial-gradient(ellipse at 50% 40%, rgba(207,165,94,.16), rgba(13,21,16,.6) 70%), #0d1510; }
.tcp-well.tcp-archive .tcp-caption { font-family: 'Cinzel', serif; color: var(--ink-light, #5a4d3a); opacity: 1; }
.tcp-well.tcp-archive { margin: 1.25rem auto .25rem; }
.drawer-plate.tcp-plate-hidden { display: none; }
@media (max-width: 520px) {
  .tcp-well { max-width: 100%; }
  .tcp-poster { font-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { .tcp-well[data-state="idle"] .tcp-frame::after { animation: none; } }