/* ============================================================
   MyCollection — coming-soon.css
   "Launching soon" — Neon Cinema × Constellation redesign
   ============================================================ */

.coming-soon {
  padding: clamp(6rem, 12vw, 10rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background: #050508;
  position: relative;
  overflow: hidden;
}

/* ── Neon radial spotlight — 3 colored sources ── */
.coming-soon::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%,  rgba(160, 60, 255, .22)  0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 20% 85%,  rgba(255, 30, 120,  .13)  0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 80% 15%,  rgba(60, 160, 255,  .10)  0%, transparent 55%),
    radial-gradient(ellipse 100% 25% at 50% 100%, rgba(0, 0, 0, .6)        0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ── CRT scanlines ── */
.coming-soon::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, .13) 3px,
    rgba(0, 0, 0, .13) 4px
  );
  pointer-events: none; z-index: 2;
}

/* ── Particle constellation canvas ── */
#cs-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* ── Inner content ── */
.cs-inner {
  max-width: 680px; margin: 0 auto;
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
}

/* ── Badge — neon pink ── */
.cs-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #ff70d0;
  background: rgba(255, 60, 160, .10);
  border: 1px solid rgba(255, 60, 160, .35);
  padding: .45rem 1.2rem; border-radius: 50px;
  box-shadow: 0 0 18px rgba(255, 60, 160, .2), inset 0 0 12px rgba(255, 60, 160, .05);
}

/* ── Title — gradient + neon glow oscillation ── */
.cs-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 0%, #d4aaff 45%, #ff80d0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: neon-pulse 3.5s ease-in-out infinite;
}

/* ── Description ── */
.cs-desc {
  color: rgba(190, 165, 230, .80);
  font-size: 1.05rem; line-height: 1.7;
  max-width: 460px;
}

/* ── Feature pills — 3 distinct neon colors ── */
.cs-feat-row {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}

.cs-feat-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 600;
  padding: .45rem 1rem; border-radius: 50px;
  border: 1px solid;
  transition: box-shadow .25s ease, transform .2s ease;
}
.cs-feat-pill:hover { transform: translateY(-2px); }

.cs-feat-pill svg { flex-shrink: 0; }

/* Green — Track & Collect */
.cs-feat-pill--green {
  color: #40ffb0;
  background: rgba(40, 255, 150, .07);
  border-color: rgba(40, 255, 150, .30);
  box-shadow: 0 0 10px rgba(40, 255, 150, .10);
}
.cs-feat-pill--green:hover { box-shadow: 0 0 22px rgba(40, 255, 150, .35); }

/* Cyan — Smart Notifications */
.cs-feat-pill--cyan {
  color: #40d8ff;
  background: rgba(40, 210, 255, .07);
  border-color: rgba(40, 210, 255, .30);
  box-shadow: 0 0 10px rgba(40, 210, 255, .10);
}
.cs-feat-pill--cyan:hover { box-shadow: 0 0 22px rgba(40, 210, 255, .35); }

/* Pink — 10 Languages */
.cs-feat-pill--pink {
  color: #ff70d0;
  background: rgba(255, 80, 200, .07);
  border-color: rgba(255, 80, 200, .30);
  box-shadow: 0 0 10px rgba(255, 80, 200, .10);
}
.cs-feat-pill--pink:hover { box-shadow: 0 0 22px rgba(255, 80, 200, .35); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .cs-feat-pill { font-size: .72rem; }
}