/* Reusable Neon Scanner notification and modal primitives. */

.neon-notification {
  position: relative;
  display: block;
  width: fit-content;
  border: 1px solid rgba(255, 31, 91, 0.45);
  border-radius: 1.15rem;
  background: rgba(17, 10, 16, 0.92);
  color: #f5e6f0;
  text-align: left;
  box-shadow:
    0 0 8px rgba(255, 31, 91, 0.75),
    0 0 24px rgba(255, 31, 91, 0.2);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.neon-notification:hover,
.neon-notification:focus-visible {
  border-color: #00ffd4;
  background: rgba(26, 16, 24, 0.96);
  box-shadow:
    0 0 8px #00ffd4,
    0 0 24px rgba(0, 255, 212, 0.26),
    0 0 34px rgba(255, 31, 91, 0.22);
  transform: translateY(-3px);
}

.neon-notification-art {
  display: block;
  border: 0;
  object-fit: contain;
  box-shadow:
    0.18rem 0.3rem 0.75rem rgba(0, 0, 0, 0.8),
    0 0 9px rgba(255, 31, 91, 0.7),
    0 0 22px rgba(255, 31, 91, 0.28);
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease;
}

.neon-notification:hover .neon-notification-art,
.neon-notification:focus-visible .neon-notification-art {
  filter: saturate(1.1) brightness(1.05);
}

.neon-notification-copy {
  display: grid;
  gap: 0.28rem;
  width: max-content;
}

.neon-notification-copy em,
.neon-notification-copy strong {
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
}

.neon-notification-copy em {
  color: #ff1f5b;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px rgba(255, 31, 91, 0.52);
}

.neon-notification-copy strong {
  color: #00ffd4;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px rgba(0, 255, 212, 0.72);
}

.neon-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  width: 100vw;
  height: 100dvh;
  place-items: center;
  padding: clamp(1rem, 3vw, 2rem);
  background: rgba(5, 3, 5, 0.84);
  backdrop-filter: blur(7px);
}

.neon-modal-layer[hidden] {
  display: none;
}

.neon-modal {
  position: relative;
  overflow: hidden;
  width: min(44rem, 100%);
  max-height: calc(100dvh - 2rem);
  border: 1px solid #ff1f5b;
  background:
    radial-gradient(circle at 88% 8%, rgba(0, 255, 212, 0.11), transparent 32%),
    linear-gradient(145deg, rgba(26, 16, 24, 0.98), rgba(10, 6, 8, 0.98));
  color: #f5e6f0;
  box-shadow:
    0 0 8px #ff1f5b,
    0 0 28px rgba(255, 31, 91, 0.46),
    0 1.5rem 5rem rgba(0, 0, 0, 0.72);
}

.neon-modal-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8a6a7a;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.neon-modal-close:hover,
.neon-modal-close:focus-visible {
  color: #00ffd4;
  text-shadow: 0 0 8px #00ffd4;
}

.neon-modal-eyebrow,
.neon-modal-cta {
  font-family: "Share Tech Mono", monospace;
  text-transform: uppercase;
}

.neon-modal-eyebrow {
  color: #00ffd4;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.neon-modal-cta {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid #ff1f5b;
  background: rgba(255, 31, 91, 0.18);
  color: #f5e6f0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  box-shadow:
    0 0 8px #ff1f5b,
    inset 0 0 16px rgba(255, 31, 91, 0.12);
}

.neon-modal-cta:hover,
.neon-modal-cta:focus-visible {
  border-color: #00ffd4;
  color: #00ffd4;
  box-shadow:
    0 0 8px #00ffd4,
    0 0 24px rgba(0, 255, 212, 0.24);
}

@media (prefers-reduced-motion: reduce) {
  .neon-notification,
  .neon-notification-art {
    transition: none;
  }
}