/* Coming-soon layout, glass card, orbs, and motion. Linked from web/index.html. */

.coming-soon__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.coming-soon__orb--a {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  top: -12%;
  left: -18%;
  background: rgba(124, 58, 237, 0.4);
  animation: comingSoonDriftA 18s ease-in-out infinite;
}

.coming-soon__orb--b {
  width: min(48vw, 440px);
  height: min(48vw, 440px);
  bottom: -18%;
  right: -14%;
  background: rgba(219, 39, 119, 0.33);
  animation: comingSoonDriftB 22s ease-in-out infinite;
}

.coming-soon__card {
  background: rgba(18, 16, 28, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.coming-soon__glow {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.27);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: comingSoonGlow 5s ease-in-out infinite;
}

.coming-soon__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nemu-primary);
  border: 1px solid rgba(124, 58, 237, 0.33);
  background: rgba(124, 58, 237, 0.13);
}

.coming-soon__title {
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.coming-soon__lead {
  line-height: 1.55;
}

@keyframes comingSoonGlow {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes comingSoonDriftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(4%, -3%) scale(1.08);
  }
}

@keyframes comingSoonDriftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-5%, 4%) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .coming-soon__glow,
  .coming-soon__orb--a,
  .coming-soon__orb--b {
    animation: none !important;
  }
}