/* ==========================================================================
   Beta Access Landing Page — Cosmic Design
   StellarME Private Beta Gate
   Session #443
   ========================================================================== */

/* ── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── CSS tokens (self-contained — no dependency on tokens.css) ─────────── */
:root {
  --bg:          #0b0c14;
  --bg-card:     rgba(16, 11, 36, 0.88);
  --bg-input:    rgba(20, 13, 44, 0.9);
  --border:      rgba(183, 123, 255, 0.18);
  --border-focus: rgba(61, 255, 207, 0.55);

  --accent:      #3dffcf;   /* teal / cyan */
  --primary:     #b77bff;   /* purple      */
  --text:        #e8e0f8;
  --text-muted:  rgba(200, 185, 230, 0.55);

  --glow-purple: 0 0 60px rgba(183, 123, 255, 0.25), 0 0 120px rgba(183, 123, 255, 0.10);
  --glow-teal:   0 0 60px rgba(61, 255, 207, 0.20),  0 0 120px rgba(61, 255, 207, 0.08);
  --glow-btn:    0 0 24px rgba(61, 255, 207, 0.35),  0 2px 16px rgba(61, 255, 207, 0.20);

  --radius-card: 24px;
  --radius-input: 12px;
  --radius-btn:  12px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Segoe UI", system-ui, sans-serif;
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.beta-body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

/* ── Star field ─────────────────────────────────────────────────────────── */
.star-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stars {
  position: absolute;
  inset: -50%;
  border-radius: 50%;
}

/* Small stars */
.stars--sm {
  width: 200%;
  height: 200%;
  background: transparent;
  animation: drift-sm 80s linear infinite;
  box-shadow:
    120px  45px  1px rgba(255,255,255,0.80),
    350px  92px  1px rgba(255,255,255,0.60),
    580px  18px  1px rgba(255,255,255,0.75),
    720px 140px  1px rgba(255,255,255,0.50),
    900px  67px  1px rgba(255,255,255,0.70),
   1050px 210px  1px rgba(255,255,255,0.60),
   1300px  35px  1px rgba(255,255,255,0.85),
   1480px 175px  1px rgba(255,255,255,0.55),
   1600px  88px  1px rgba(255,255,255,0.65),
   1780px 250px  1px rgba(255,255,255,0.75),
    220px 310px  1px rgba(255,255,255,0.60),
    445px 380px  1px rgba(255,255,255,0.70),
    670px 295px  1px rgba(255,255,255,0.50),
    840px 440px  1px rgba(255,255,255,0.80),
   1020px 370px  1px rgba(255,255,255,0.65),
   1190px 480px  1px rgba(255,255,255,0.55),
   1420px 330px  1px rgba(255,255,255,0.75),
   1560px 415px  1px rgba(255,255,255,0.60),
   1690px 280px  1px rgba(255,255,255,0.70),
   1850px 390px  1px rgba(255,255,255,0.50),
     80px 520px  1px rgba(255,255,255,0.65),
    310px 610px  1px rgba(255,255,255,0.80),
    520px 570px  1px rgba(255,255,255,0.55),
    760px 660px  1px rgba(255,255,255,0.70),
    990px 590px  1px rgba(255,255,255,0.60),
   1140px 700px  1px rgba(255,255,255,0.75),
   1380px 625px  1px rgba(255,255,255,0.50),
   1510px 720px  1px rgba(255,255,255,0.85),
   1650px 555px  1px rgba(255,255,255,0.60),
   1820px 680px  1px rgba(255,255,255,0.65);
}

/* Medium stars */
.stars--md {
  width: 200%;
  height: 200%;
  background: transparent;
  animation: drift-md 120s linear infinite;
  box-shadow:
    190px  75px  2px rgba(183, 123, 255, 0.70),
    430px 155px  2px rgba(255, 255, 255, 0.80),
    620px  40px  2px rgba(61,  255, 207, 0.65),
    810px 200px  2px rgba(255, 255, 255, 0.70),
   1100px 110px  2px rgba(183, 123, 255, 0.60),
   1350px 280px  2px rgba(61,  255, 207, 0.80),
   1600px 160px  2px rgba(255, 255, 255, 0.65),
   1800px 320px  2px rgba(183, 123, 255, 0.75),
    280px 400px  2px rgba(255, 255, 255, 0.70),
    560px 480px  2px rgba(61,  255, 207, 0.60),
    820px 360px  2px rgba(183, 123, 255, 0.85),
   1060px 440px  2px rgba(255, 255, 255, 0.70),
   1310px 500px  2px rgba(61,  255, 207, 0.65),
   1550px 410px  2px rgba(255, 255, 255, 0.60),
   1750px 470px  2px rgba(183, 123, 255, 0.75);
}

/* Large bright stars */
.stars--lg {
  width: 200%;
  height: 200%;
  background: transparent;
  animation: drift-lg 160s linear infinite;
  box-shadow:
    280px  95px  3px rgba(255, 255, 255, 0.90),
    640px 180px  3px rgba(61,  255, 207, 0.80),
   1080px  60px  3px rgba(183, 123, 255, 0.90),
   1450px 250px  3px rgba(255, 255, 255, 0.85),
   1720px 120px  3px rgba(61,  255, 207, 0.75),
    420px 450px  3px rgba(183, 123, 255, 0.85),
    890px 520px  3px rgba(255, 255, 255, 0.90),
   1250px 400px  3px rgba(61,  255, 207, 0.80),
   1650px 490px  3px rgba(183, 123, 255, 0.85);
}

@keyframes drift-sm {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@keyframes drift-md {
  from { transform: translateY(0) translateX(0); }
  to   { transform: translateY(-50%) translateX(-2%); }
}
@keyframes drift-lg {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(1deg); }
}

/* ── Nebula glows ───────────────────────────────────────────────────────── */
.nebula {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.18;
  animation: nebula-pulse 12s ease-in-out infinite alternate;
}

.nebula--purple {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #b77bff, transparent 70%);
  top: -120px;
  right: -100px;
}

.nebula--teal {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #3dffcf, transparent 70%);
  bottom: -80px;
  left: -80px;
  animation-delay: -6s;
}

@keyframes nebula-pulse {
  from { opacity: 0.12; transform: scale(0.95); }
  to   { opacity: 0.25; transform: scale(1.05); }
}

/* ── Main layout ────────────────────────────────────────────────────────── */
.beta-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  width: 100%;
  padding: 24px 16px;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.beta-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 0 0 1px rgba(183, 123, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.55),
    var(--glow-purple);
  padding: 48px 40px 40px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.beta-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.beta-logo__star {
  font-size: 28px;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(61, 255, 207, 0.8), 0 0 40px rgba(61, 255, 207, 0.4);
  animation: star-spin 8s linear infinite;
  display: inline-block;
}

@keyframes star-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.beta-logo__wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #fff 0%, #b77bff 50%, #3dffcf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Beta badge ─────────────────────────────────────────────────────────── */
.beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(183, 123, 255, 0.12);
  border: 1px solid rgba(183, 123, 255, 0.30);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9a0ff;
  margin-bottom: 24px;
}

.beta-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3dffcf;
  box-shadow: 0 0 8px rgba(61, 255, 207, 0.9);
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── Headline ───────────────────────────────────────────────────────────── */
.beta-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.3px;
  text-align: center;
  color: var(--text);
  margin-bottom: 10px;
}

.beta-subtitle {
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ── Error ──────────────────────────────────────────────────────────────── */
.beta-error {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 70, 90, 0.10);
  border: 1px solid rgba(255, 70, 90, 0.30);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  color: #ff8b96;
  margin-bottom: 20px;
  animation: error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.beta-error__icon {
  font-size: 15px;
  flex-shrink: 0;
}

@keyframes error-shake {
  0%, 100% { transform: translateX(0);  }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px);  }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px);  }
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.beta-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.beta-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.beta-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(200, 185, 230, 0.70);
}

.beta-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.beta-input-icon {
  position: absolute;
  left: 14px;
  font-size: 15px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

.beta-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 12px 16px 12px 42px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

.beta-input::placeholder {
  color: rgba(200, 185, 230, 0.30);
}

.beta-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(61, 255, 207, 0.12), 0 0 12px rgba(61, 255, 207, 0.15);
}

/* ── Submit button ──────────────────────────────────────────────────────── */
.beta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #3dffcf 0%, #7fd4ff 50%, #b77bff 100%);
  border: none;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font);
  color: #0b0c14;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  box-shadow: var(--glow-btn);
}

.beta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.15));
  opacity: 0;
  transition: opacity 0.2s;
}

.beta-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 32px rgba(61, 255, 207, 0.50),
    0 4px 20px rgba(61, 255, 207, 0.30);
}

.beta-btn:hover::before {
  opacity: 1;
}

.beta-btn:active {
  transform: translateY(1px);
  box-shadow: var(--glow-btn);
}

.beta-btn__label {
  letter-spacing: 0.02em;
}

.beta-btn__arrow {
  font-size: 18px;
  transition: transform 0.2s;
}

.beta-btn:hover .beta-btn__arrow {
  transform: translateX(3px);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.beta-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 24px 0 16px;
  color: var(--border);
  font-size: 14px;
}

.beta-divider::before,
.beta-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.beta-footer {
  font-size: 13px;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.7;
}

.beta-footer__link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s, text-shadow 0.2s;
}

.beta-footer__link:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(61, 255, 207, 0.60);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .beta-card {
    padding: 36px 24px 32px;
    border-radius: 20px;
    max-width: 100%;
  }

  .beta-title {
    font-size: 20px;
  }

  .beta-logo__wordmark {
    font-size: 22px;
  }

  .nebula--purple {
    width: 350px;
    height: 350px;
  }

  .nebula--teal {
    width: 300px;
    height: 300px;
  }
}