/* ============================================
   BETA PORTAL — Registration Page CSS
   ============================================ */

.register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 24px;
  /* Slow rotating mesh-gradient for extra depth */
  background:
    radial-gradient(ellipse 120% 80% at 50% 50%, rgba(124,58,237,0.06) 0%, transparent 60%),
    var(--bg-base);
}

/* ── Animated Gradient Orbs ─────────────────── */
.orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Orb 1 – purple, top-left, large sweeping path */
.orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle at 40% 40%,
    rgba(124, 58, 237, 0.5) 0%,
    rgba(124, 58, 237, 0.15) 40%,
    transparent 70%
  );
  filter: blur(70px);
  top: -250px; left: -250px;
  animation: orb-path-1 18s ease-in-out infinite;
}

/* Orb 2 – blue, bottom-right, diagonal drift */
.orb-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle at 60% 60%,
    rgba(59, 130, 246, 0.45) 0%,
    rgba(59, 130, 246, 0.12) 45%,
    transparent 70%
  );
  filter: blur(80px);
  bottom: -200px; right: -200px;
  animation: orb-path-2 22s ease-in-out infinite;
  animation-delay: -7s;
}

/* Orb 3 – cyan, centre-right, tighter loop */
.orb-3 {
  width: 450px; height: 450px;
  background: radial-gradient(circle at 50% 50%,
    rgba(6, 182, 212, 0.38) 0%,
    rgba(6, 182, 212, 0.1) 45%,
    transparent 70%
  );
  filter: blur(60px);
  top: 30%; left: 55%;
  animation: orb-path-3 14s ease-in-out infinite;
  animation-delay: -3s;
}

/* Orb 4 – pink accent, small & fast */
.orb-4 {
  width: 300px; height: 300px;
  background: radial-gradient(circle at 50% 50%,
    rgba(219, 39, 119, 0.35) 0%,
    rgba(219, 39, 119, 0.08) 50%,
    transparent 70%
  );
  filter: blur(50px);
  top: 60%; left: 20%;
  animation: orb-path-4 11s ease-in-out infinite;
  animation-delay: -5s;
}

/* ── Unique keyframe paths ───────────────────── */
@keyframes orb-path-1 {
  0%   { transform: translate(0px,   0px)   scale(1);    }
  20%  { transform: translate(120px, 80px)  scale(1.08); }
  40%  { transform: translate(60px,  200px) scale(0.95); }
  60%  { transform: translate(220px, 140px) scale(1.12); }
  80%  { transform: translate(80px,  60px)  scale(1.03); }
  100% { transform: translate(0px,   0px)   scale(1);    }
}

@keyframes orb-path-2 {
  0%   { transform: translate(0px,    0px)    scale(1);    }
  25%  { transform: translate(-140px, -80px)  scale(1.1);  }
  50%  { transform: translate(-60px,  -200px) scale(0.9);  }
  75%  { transform: translate(-200px, -100px) scale(1.05); }
  100% { transform: translate(0px,    0px)    scale(1);    }
}

@keyframes orb-path-3 {
  0%   { transform: translate(0px,   0px)   scale(1);    }
  30%  { transform: translate(-80px, 100px) scale(1.15); }
  60%  { transform: translate(60px,  180px) scale(0.88); }
  100% { transform: translate(0px,   0px)   scale(1);    }
}

@keyframes orb-path-4 {
  0%   { transform: translate(0px,   0px)   scale(1);   }
  33%  { transform: translate(100px, -60px) scale(1.2); }
  66%  { transform: translate(-40px, 80px)  scale(0.8); }
  100% { transform: translate(0px,   0px)   scale(1);   }
}

/* ── Layout ─────────────────────────────────── */
.register-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* ── Brand ──────────────────────────────────── */
.register-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  font-size: 2rem;
  line-height: 1;
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ── Card ───────────────────────────────────── */
.register-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 40px 36px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255,255,255,0.07) inset;
}

/* ── Badge ──────────────────────────────────── */
.register-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 20px;
}

.register-badge .dot {
  width: 6px; height: 6px;
  background: #c4b5fd;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ── Typography ─────────────────────────────── */
.register-title {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 10px;
  line-height: 1.2;
}

.register-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 28px;
}

/* ── Input ──────────────────────────────────── */
.input-wrap {
  position: relative;
  margin-bottom: 12px;
}

.input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.input-wrap input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px 14px 44px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all var(--transition);
  outline: none;
}

.input-wrap input:focus {
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(124, 58, 237, 0.05);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.input-wrap input::placeholder { color: var(--text-muted); }

/* ── Submit ─────────────────────────────────── */
.reg-submit {
  width: 100%;
  padding: 15px 24px;
  margin-top: 8px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #7c3aed, #3b82f6);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.reg-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.45);
}

.reg-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Spinner ────────────────────────────────── */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error ──────────────────────────────────── */
.form-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
  font-size: 0.83rem;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

/* ── Disclaimer ─────────────────────────────── */
.register-disclaimer {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: 16px;
  text-align: center;
}

/* ── Success Step ───────────────────────────── */
.success-icon {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 16px;
  animation: pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Footer ─────────────────────────────────── */
.register-footer {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Hidden util ────────────────────────────── */
.hidden { display: none !important; }