/* register.css — pantalla de registro neon ScortsMX */

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(ellipse at top left, #2e003f 0%, #0d0018 100%);
  min-height: 100vh;
  color: #fdf4ff;
  animation: bgmove 13s ease-in-out infinite alternate;
}

@keyframes bgmove {
  0% {
    background-position: 20% 30%;
  }
  100% {
    background-position: 80% 70%;
  }
}

.neon-card {
  background: rgba(18, 0, 24, 0.98);
  border: 3px solid;
  border-image: linear-gradient(
    120deg,
    #a040fd 10%,
    #ff31b6 70%,
    #00ffc3 100%
  ) 1;
  box-shadow: 0 0 48px 16px #a040fd77, 0 8px 60px #000c;
  animation: borderGlow 2.2s linear infinite alternate;
  border-radius: 2rem;
  backdrop-filter: blur(3px);
  overflow: hidden;
}

@keyframes borderGlow {
  0% {
    box-shadow: 0 0 36px 6px #a040fdcc, 0 8px 80px #000b;
    border-color: #a040fd;
  }
  50% {
    box-shadow: 0 0 80px 22px #ff31b6dd, 0 8px 90px #a040fd88;
    border-color: #00ffc3;
  }
  100% {
    box-shadow: 0 0 36px 6px #a040fdcc, 0 8px 80px #000b;
    border-color: #a040fd;
  }
}

.input-neon {
  background: #210030;
  border: 2px solid #a040fd;
  color: #fdf4ff;
  font-weight: bold;
  box-shadow: 0 0 8px #a040fd88;
  transition: box-shadow 0.3s, border 0.3s, background 0.2s;
}

.input-neon::placeholder {
  color: #d6b3ff;
}

.input-neon:focus {
  border: 2.2px solid #00ffc3;
  box-shadow: 0 0 15px #00ffc3, 0 0 20px #a040fd66;
  outline: none;
  background: #260038;
}

/* Botón principal */
.btn-neon {
  background: linear-gradient(
    90deg,
    #a040fd 30%,
    #ff31b6 70%,
    #00ffc3 100%
  );
  color: #fff;
  font-weight: bold;
  box-shadow: 0 0 18px #a040fd77, 0 2px 15px #00ffc399;
  border: none;
  transition: filter 0.18s, transform 0.17s;
  filter: brightness(1.09);
  position: relative;
  overflow: hidden;
}

.btn-neon:hover {
  filter: brightness(1.18) drop-shadow(0 0 10px #00ffc3);
  transform: scale(1.045);
}

/* Flama */
.animate-flame {
  display: inline-block;
  animation: flameFlicker 0.8s infinite alternate;
  filter:
    drop-shadow(0 0 10px #ff8b17cc)
    drop-shadow(0 0 7px #ff31b6cc);
}

@keyframes flameFlicker {
  0% {
    transform: scale(1) rotate(-3deg);
  }
  100% {
    transform: scale(1.14) rotate(6deg);
  }
}

/* Divider "O crea tu cuenta..." */
.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1.5px solid #a040fd55;
}

.divider:not(:empty)::before {
  margin-right: 0.75em;
}
.divider:not(:empty)::after {
  margin-left: 0.75em;
}

/* Links login / volver */
.login-link {
  color: #00ffc3;
  font-weight: 600;
  text-decoration: underline dotted #a040fd;
  transition: color 0.16s, text-decoration-thickness 0.16s;
}

.login-link:hover {
  color: #ff31b6;
  text-decoration-thickness: 3px;
}

/* Texto de bienvenida overlay */
.neon-glow-welcome {
  color: #ff31b6;
  text-shadow:
    0 0 18px #a040fd,
    0 0 38px #00ffc3,
    0 0 8px #ff31b6cc;
  letter-spacing: 1.5px;
  filter: brightness(1.3);
  animation: welcomeglow 1.4s infinite alternate;
}

@keyframes welcomeglow {
  0% {
    text-shadow:
      0 0 18px #a040fd,
      0 0 32px #00ffc3,
      0 0 10px #ff31b6;
  }
  100% {
    text-shadow:
      0 0 28px #ff31b6,
      0 0 44px #a040fd,
      0 0 18px #00ffc3;
  }
}

/* Overlay de bienvenida */
#welcome-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(16, 0, 26, 0.98);
  backdrop-filter: blur(3px);
}