@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  color: #d2e7ff;
  background: radial-gradient(circle at 20% 20%, #071525, #02050b 65%);
  overflow-x: hidden;
  font-weight: 500;
}

#spaceCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #9ad4ff55, transparent),
    radial-gradient(1px 1px at 70% 60%, #8bc8ff66, transparent),
    radial-gradient(2px 2px at 40% 80%, #b495ff4a, transparent),
    radial-gradient(1px 1px at 85% 25%, #76b5ff70, transparent);
  animation: twinkle 8s linear infinite;
  z-index: 1;
}

.aurora {
  position: fixed;
  inset: -30% -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 35%, #3d98d128, transparent 42%),
    radial-gradient(circle at 70% 65%, #2ba5ca22, transparent 42%),
    radial-gradient(circle at 50% 20%, #5b74b81e, transparent 46%);
  filter: blur(28px);
  animation: drift 12s ease-in-out infinite alternate;
  z-index: 2;
}

.orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.orbs span {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, #4aa2cc2b, transparent 65%);
  filter: blur(8px);
  animation: orbMove 14s ease-in-out infinite;
}

.orbs span:nth-child(1) { left: 6%; top: 16%; }
.orbs span:nth-child(2) { right: 10%; top: 32%; animation-delay: 2.5s; }
.orbs span:nth-child(3) { left: 38%; bottom: 8%; animation-delay: 5s; }

.symbols {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.symbols span {
  position: absolute;
  color: #c9e5ff3d;
  font-size: 22px;
  animation: floatUp 10s linear infinite;
}

.symbols span:nth-child(1) { left: 8%; top: 80%; animation-delay: 0s; }
.symbols span:nth-child(2) { left: 24%; top: 92%; animation-delay: 2s; }
.symbols span:nth-child(3) { left: 50%; top: 85%; animation-delay: 4s; }
.symbols span:nth-child(4) { left: 72%; top: 90%; animation-delay: 1s; }
.symbols span:nth-child(5) { left: 88%; top: 82%; animation-delay: 3s; }


@keyframes twinkle {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

@keyframes drift {
  from { transform: translate3d(-2%, -2%, 0) scale(1); }
  to { transform: translate3d(2%, 3%, 0) scale(1.05); }
}

@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translateY(-120vh) scale(1.2); opacity: 0; }
}

@keyframes orbMove {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.35; }
  50% { transform: translate3d(20px, -35px, 0) scale(1.15); opacity: 0.55; }
  100% { transform: translate3d(-25px, 15px, 0) scale(0.95); opacity: 0.35; }
}


.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 10;
}

.card {
  position: relative;
  width: min(680px, 100%);
  border: 1px solid #3c61824a;
  border-radius: 20px;
  padding: 32px;
  background: linear-gradient(145deg, #040b16d9, #020711d9);
  box-shadow:
    0 26px 70px #000000bf,
    0 0 0 1px #79c6ff2b,
    0 0 28px #4aa6e03a,
    inset 0 0 18px #6fc4ff14;
  backdrop-filter: blur(3px);
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(110, 186, 236, 0) 0%,
    rgba(110, 186, 236, 0.85) 35%,
    rgba(110, 186, 236, 0) 70%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderFlow 3.2s linear infinite;
  pointer-events: none;
}

.card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 18px;
  background: linear-gradient(145deg, #050d1ad6, #030913d6);
  pointer-events: none;
}

.card > * {
  position: relative;
  z-index: 1;
}

@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

h1 {
  margin: 0 0 10px;
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.subtitle {
  margin: 0 0 24px;
  color: #c3ddf5;
  font-size: 1.08rem;
  font-weight: 500;
}

.form {
  display: grid;
  gap: 10px;
}

label {
  font-size: 1.02rem;
  color: #d7ebff;
  font-weight: 600;
}

input,
textarea {
  border: 1px solid #33546e73;
  border-radius: 12px;
  padding: 12px;
  font-size: 1.05rem;
  background: #040a13;
  color: #cfe6ff;
  font-weight: 600;
}

textarea {
  min-height: 180px;
  resize: vertical;
}

input,
textarea,
.btn {
  min-height: 44px;
}

.gender-group {
  display: block;
  margin-bottom: 4px;
}

.gender-segment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #2f4f6e73;
  background: linear-gradient(180deg, #071320, #050d18);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}

.gender-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 9px;
  background: linear-gradient(180deg, #0f3553, #0c2d47);
  box-shadow: 0 0 0 1px #6ab6e44a, 0 0 12px #2f7faa38;
  transition: transform 0.25s ease;
}

.gender-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  justify-content: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 0.2s ease;
  color: #97bbd8;
}

.gender-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gender-option:has(input:checked) {
  color: #d4ebff;
  font-weight: 700;
}

.gender-segment:has(.right input:checked) .gender-thumb {
  transform: translateX(calc(100% + 0px));
}

input:focus,
textarea:focus {
  outline: 1px solid #6ea8cf;
  box-shadow: 0 0 0 3px #4f8cb524;
}

.btn {
  display: inline-block;
  margin-top: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: linear-gradient(45deg, #184b77, #27648f);
  color: #d7ecff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 90%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #8ed1ff44, transparent);
  transform: skewX(-20deg);
  animation: btnShine 3s ease-in-out infinite;
}

@keyframes btnShine {
  0%, 100% { left: -120%; }
  55% { left: 150%; }
}

.alert {
  margin-bottom: 14px;
  border: 1px solid #ff9f9f88;
  color: #ffdede;
  background: #3f1e2d99;
  padding: 12px;
  border-radius: 10px;
}

.success p {
  margin-top: 0;
  color: #9fd6ff;
}

@media (max-width: 900px) {
  .container {
    padding: 18px;
  }

  .card {
    width: min(100%, 640px);
    padding: 24px 20px;
    border-radius: 16px;
  }

  .card::before {
    border-radius: 16px;
  }

  .card::after {
    border-radius: 14px;
  }

  h1 {
    font-size: 1.6rem;
  }

  .subtitle {
    margin-bottom: 18px;
    font-size: 0.96rem;
  }
}

@media (max-width: 640px) {
  .container {
    align-items: start;
    min-height: 100dvh;
    padding: 12px;
  }

  .card {
    margin: 4px 0 10px;
    width: 100%;
    padding: 18px 14px;
    border-radius: 14px;
  }

  .card::before {
    border-radius: 14px;
  }

  .card::after {
    border-radius: 12px;
  }

  h1 {
    font-size: 1.35rem;
    margin-bottom: 8px;
  }

  .subtitle {
    margin-bottom: 14px;
    font-size: 0.9rem;
  }

  label {
    font-size: 0.9rem;
  }

  input,
  textarea {
    font-size: 16px;
    padding: 11px;
    border-radius: 10px;
  }

  .gender-group {
    margin-bottom: 2px;
  }

  .gender-segment {
    max-width: 100%;
  }

  .gender-option {
    padding: 10px 8px;
    border-radius: 10px;
  }

  .btn {
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
  }

  .orbs span {
    width: 150px;
    height: 150px;
  }

  .symbols span {
    font-size: 16px;
    opacity: 0.7;
  }

}

@media (prefers-reduced-motion: reduce) {
  .stars,
  .aurora,
  .orbs span,
  .symbols span,
  .card::before,
  .btn::after {
    animation: none !important;
  }
}