/* css/icon-showcase.css -- fully namespaced (n123-showcase-*).
   A normal in-flow flex child (the auth screen is already a flex
   column), so it naturally sits below whatever comes before it and
   fills remaining space -- no coordinate math, no overlay. */

.n123-showcase-root {
  flex: 1;
  width: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  overflow: hidden;
  pointer-events: none; /* decorative only, never intercepts clicks */
}

.n123-showcase-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  opacity: 0;
  transition: opacity var(--n123-showcase-fade-out, 800ms) ease;
}
.n123-showcase-slot.n123-showcase-visible {
  opacity: 1;
  transition: opacity var(--n123-showcase-fade-in, 900ms) 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: .85em;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.n123-showcase-label-white { color: #F5F5F2; }
.n123-showcase-label-gold { color: #D4AF37; }

@media (max-width: 480px) {
  .n123-showcase-icon {
    width: calc(var(--n123-showcase-size, 112px) * .65);
    height: calc(var(--n123-showcase-size, 112px) * .65);
  }
  .n123-showcase-label { font-size: .75em; }
}

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

/* .full-form normally claims the full viewport height by design (for
   standalone forms elsewhere in the app). On this screen specifically,
   the form should only take its natural content height so the showcase
   below it has real space to occupy, instead of being pushed off-screen. */
.screen-auth .full-form { min-height: auto; }