/* A pane of frosted glass beside what it looks at: what is behind it shows through, blurred, round anything that does not fill it. */
.showcase-magnifier { position: fixed; z-index: 20500; overflow: hidden; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 18px; background: color-mix(in srgb, var(--magnifier-background, #fcfaf5) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); color: #25252d; box-shadow: 0 0 0 1px rgba(24, 32, 42, 0.16), 0 2px 6px rgba(24, 32, 42, 0.12), 0 24px 56px -12px rgba(24, 32, 42, 0.45); pointer-events: none; animation: showcase-magnifier-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.showcase-magnifier[hidden] { display: none; }
/* The light the glass catches, across its top corner. */
.showcase-magnifier::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 34%); pointer-events: none; }
.showcase-magnifier > :first-child { position: absolute; transform-origin: top left; }
.showcase-magnifier > .collection-card-button { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-decoration: none; color: inherit; }
.showcase-magnifier .trading-card { zoom: 1; }
.showcase-magnifier .collectible-caption { box-sizing: border-box; width: 0; min-width: 100%; }
/* It comes up from the side of what it looks at (`--magnifier-from`). */
@keyframes showcase-magnifier-in {
    from { opacity: 0; translate: var(--magnifier-from, 0) 0; }
}
.motion-reduced .showcase-magnifier { animation: none; }