/* css/icon-showcase.css -- fully namespaced (n123-showcase-*).
   Positioned absolute within the nearest positioned ancestor (#app,
   already position:relative for the starfield layer) so it never
   affects the layout of surrounding content, and inserted first in DOM
   order so normal-flow siblings painted after it appear on top. */

.n123-showcase-root {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; /* decorative only, never intercepts clicks */
}

.n123-showcase-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4em;
  opacity: 0;
  transition:
    opacity var(--n123-showcase-fade-out, 600ms) ease;
}
.n123-showcase-slot.n123-showcase-visible {
  opacity: 1;
  transition: opacity var(--n123-showcase-fade-in, 700ms) ease;
}

.n123-showcase-icon {
  width: var(--n123-showcase-size, 112px);
  height: var(--n123-showcase-size, 112px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.n123-showcase-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}
.n123-showcase-icon.n123-showcase-white { color: #F5F5F2; opacity: .85; }
.n123-showcase-icon.n123-showcase-gold { color: #D4AF37; opacity: .9; }

.n123-showcase-label {
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.n123-showcase-label-white { color: #F5F5F2; }
.n123-showcase-label-gold { color: #D4AF37; }

/* Scale down on narrow viewports -- the 4x base size is generous on
   desktop but too large relative to a small phone screen. */
@media (max-width: 480px) {
  .n123-showcase-icon {
    width: calc(var(--n123-showcase-size, 112px) * .6);
    height: calc(var(--n123-showcase-size, 112px) * .6);
  }
  .n123-showcase-label { font-size: .72em; }
}

@media (prefers-reduced-motion: reduce) {
  .n123-showcase-slot { transition: none; }
}