<figure class="tv-curio-case">
  <span class="tv-curio-case-aura" aria-hidden="true"></span>
  <span class="tv-curio-case-frame" aria-hidden="true"></span>
  <span class="tv-curio-case-glass" aria-hidden="true"></span>
  <span class="tv-curio-case-count">×12</span>
  <svg class="tv-curio-case-exhibit" viewBox="0 0 64 64" aria-hidden="true">
    <path d="M20 14h24l10 12-22 28-22-28z" fill="#818cf8" />
    <path d="M10 26h44L32 54z" fill="#6366f1" />
    <path d="M26 26h12L32 54z" fill="#a5b4fc" />
    <path d="M20 14l6 12h12l6-12z" fill="#c7d2fe" />
    <path d="M20 14 10 26h16zM44 14l10 12H38z" fill="#a5b4fc" />
  </svg>
  <figcaption class="tv-curio-case-label">Starlight gem</figcaption>
</figure>

/* A showcase tile whose case climbs a metal ladder. The frame, finial and
   plinth light are the same at every tier; only the metal and its effects
   change. Set the metal as an RGB triple. */
.tv-curio-case {
  --tv-curio-case-metal: 186, 118, 66;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 10rem;
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 0.875rem 0.5rem 0.625rem;
  overflow: hidden;
  border-radius: 8px;
  background: #18181b;
  color: #e4e4e7;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.tv-curio-case-aura,
.tv-curio-case-frame,
.tv-curio-case-glass {
  position: absolute;
  pointer-events: none;
}

/* Lit plinth pool under the exhibit. */
.tv-curio-case-aura {
  inset: 0;
  z-index: 0;
}

.tv-curio-case-aura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 40% at 50% 108%, rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.16), transparent 70%);
}

/* The case rail. */
.tv-curio-case-frame {
  inset: 5px;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.42);
  border-radius: 4px;
}

/* The diamond finial straddling the rail's top edge. */
.tv-curio-case::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 3;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.7);
  transform: translateX(-50%) rotate(45deg);
}

.tv-curio-case-glass {
  display: none;
}

.tv-curio-case-count {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 4;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: #171717b3;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #e4e4e7;
}

.tv-curio-case-exhibit {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 62%;
  min-height: 0;
}

.tv-curio-case-label {
  position: relative;
  z-index: 2;
  max-width: 100%;
  overflow: hidden;
  margin: 0.25rem 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-align: center;
}

/* Silvered and up: the full case, with a brighter rail, larger finial and lit plinth. */
.tv-curio-case--silvered { --tv-curio-case-metal: 214, 222, 234; }
.tv-curio-case--gilded { --tv-curio-case-metal: 232, 186, 96; }
.tv-curio-case--jadebound { --tv-curio-case-metal: 88, 204, 150; }
.tv-curio-case--enchanted { --tv-curio-case-metal: 103, 232, 249; }
.tv-curio-case--enshrined { --tv-curio-case-metal: 196, 181, 253; }

.tv-curio-case--silvered::after,
.tv-curio-case--gilded::after,
.tv-curio-case--jadebound::after,
.tv-curio-case--enchanted::after,
.tv-curio-case--enshrined::after {
  width: 7px;
  height: 7px;
  background: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.95);
}

.tv-curio-case--silvered .tv-curio-case-aura::after,
.tv-curio-case--gilded .tv-curio-case-aura::after,
.tv-curio-case--jadebound .tv-curio-case-aura::after,
.tv-curio-case--enchanted .tv-curio-case-aura::after {
  background: radial-gradient(78% 46% at 50% 106%, rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.28), transparent 70%);
}

.tv-curio-case--silvered .tv-curio-case-frame { border-color: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.62); }
.tv-curio-case--gilded .tv-curio-case-frame { border-color: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.7); }

.tv-curio-case--jadebound .tv-curio-case-frame {
  border-color: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.78);
  box-shadow: 0 0 9px -4px rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.5);
}

.tv-curio-case--enchanted .tv-curio-case-frame {
  border-color: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.85);
  box-shadow: 0 0 12px -3px rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.6);
}

/* Jadebound and up: light sweeps across the inside of the case. */
.tv-curio-case--jadebound .tv-curio-case-frame::before,
.tv-curio-case--enchanted .tv-curio-case-frame::before,
.tv-curio-case--enshrined .tv-curio-case-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: tv-curio-case-sweep 5.5s ease-in-out infinite;
}

.tv-curio-case--enchanted .tv-curio-case-frame::before {
  background: linear-gradient(112deg, transparent 42%, rgba(255, 245, 215, 0.17) 50%, transparent 58%);
  background-size: 260% 100%;
  animation-duration: 4.6s;
}

/* Enchanted and up: the finial glints just after the sweep passes. */
.tv-curio-case--enchanted::after {
  animation: tv-curio-case-glint 4.6s ease-in-out infinite;
}

/* Enshrined: sealed in a violet void, under glass, with a prismatic sweep. */
.tv-curio-case--enshrined {
  --tv-curio-case-void: 18, 10, 32;
}

.tv-curio-case--enshrined .tv-curio-case-frame {
  border-color: rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.8);
  box-shadow:
    inset 0 0 0 2px rgba(9, 9, 11, 0.8),
    inset 0 0 0 3px rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.28),
    inset 0 0 14px rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.16),
    0 0 14px -3px rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.55);
}

.tv-curio-case--enshrined .tv-curio-case-frame::before {
  background: linear-gradient(112deg, transparent 36%, rgba(240, 171, 252, 0.16) 44%, #fde68a38 50%, rgba(165, 243, 252, 0.16) 56%, transparent 64%);
  background-size: 260% 100%;
  animation-duration: 4s;
}

.tv-curio-case--enshrined::after {
  animation:
    tv-curio-case-glint 4.6s ease-in-out infinite,
    tv-curio-case-prism 6s linear infinite;
}

.tv-curio-case--enshrined .tv-curio-case-aura::after {
  background:
    radial-gradient(84% 48% at 50% 106%, rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.3), transparent 70%),
    radial-gradient(126% 108% at 50% 46%, rgba(var(--tv-curio-case-void, 18, 10, 32), 0.34) 18%, rgba(var(--tv-curio-case-void, 18, 10, 32), 0.94) 100%);
  animation: tv-curio-case-breathe 7s ease-in-out infinite;
}

.tv-curio-case--enshrined .tv-curio-case-glass {
  display: block;
  inset: 0;
  z-index: 5;
  border-radius: 8px;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.045) 26%, transparent 44%);
}

.tv-curio-case--enshrined .tv-curio-case-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 22% 30%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 68% 22%, rgba(216, 205, 255, 0.6), transparent),
    radial-gradient(1px 1px at 40% 74%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 82% 62%, rgba(216, 205, 255, 0.55), transparent),
    radial-gradient(1px 1px at 12% 58%, rgba(255, 255, 255, 0.4), transparent);
}

.tv-curio-case--enshrined .tv-curio-case-glass::after {
  content: "";
  position: absolute;
  top: -16%;
  left: -34%;
  width: 48%;
  height: 152%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: tv-curio-case-gleam 6.5s ease-in-out infinite;
}

@keyframes tv-curio-case-sweep {
  0% { background-position: 135% 0; }
  60%, 100% { background-position: -50% 0; }
}

@keyframes tv-curio-case-glint {
  0%, 78%, 100% { box-shadow: 0 0 0 0 rgba(var(--tv-curio-case-metal, 186, 118, 66), 0); }
  86% { box-shadow: 0 0 8px 2px rgba(var(--tv-curio-case-metal, 186, 118, 66), 0.85); }
}

@keyframes tv-curio-case-prism {
  0%, 100% { background: rgba(240, 171, 252, 0.95); }
  33% { background: #fde68af2; }
  66% { background: rgba(165, 243, 252, 0.95); }
}

@keyframes tv-curio-case-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}

@keyframes tv-curio-case-gleam {
  0% { left: -34%; }
  55%, 100% { left: 120%; }
}

/* Keep the frame and the metal; drop every moving part. */
@media (prefers-reduced-motion: reduce) {
  .tv-curio-case::after,
  .tv-curio-case-frame::before,
  .tv-curio-case-aura::after,
  .tv-curio-case-glass::after {
    animation: none;
  }

  .tv-curio-case--enshrined .tv-curio-case-glass::after { left: 62%; }
  .tv-curio-case--enshrined::after { background: rgba(240, 171, 252, 0.95); }
}