@import url("./style.css");

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --background-color: rgb(10, 10, 12);
    --foreground-color: rgb(30, 30, 35);
    --foreground-color-light: rgb(50, 50, 60);
    --text-color: white;
    --text-color-secondary: rgb(212, 212, 216);
    --text-color-body: rgb(159, 159, 169);
    --text-muted: rgb(113, 113, 123);
}
  :root {
    --bg: #0a0f1f;
    --fg: #f4f7ff;
    --muted: #8aa0c4;
    --card: rgba(20, 28, 54, 0.55);
    --border: rgba(120, 170, 255, 0.18);
    --input-bg: rgba(255,255,255,0.05);
    --primary: #4f8cff;
    --primary-2: #6aa8ff;
    --glow: #4f8cff;
    --radius: 1rem;
  }
  *,*::before,*::after { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
    font-family: "Inter", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }

  main {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
  }

  /* ---- Galaxy background ---- */
  .nebula, .stars, .stars-2, .stars-3, .vignette { position: absolute; inset: 0; pointer-events: none; }

  .nebula {
    background:
      radial-gradient(ellipse 60% 50% at 20% 20%, rgba(110, 80, 220, 0.45), transparent 60%),
      radial-gradient(ellipse 50% 60% at 80% 30%, rgba(70, 140, 255, 0.45), transparent 60%),
      radial-gradient(ellipse 70% 50% at 50% 95%, rgba(90, 60, 200, 0.5), transparent 65%),
      radial-gradient(ellipse 40% 40% at 90% 80%, rgba(80, 180, 255, 0.35), transparent 60%);
    filter: blur(20px);
    animation: nebula-drift 22s ease-in-out infinite;
  }
  @keyframes nebula-drift {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    33% { transform: translate3d(-4%, 3%, 0) scale(1.1); }
    66% { transform: translate3d(3%, -2%, 0) scale(1.05); }
  }

  .stars {
    background-image:
      radial-gradient(1.2px 1.2px at 20px 30px, #eaf0ff 50%, transparent 100%),
      radial-gradient(1px 1px at 80px 90px, #d8e4ff 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 140px 60px, #ffffff 50%, transparent 100%),
      radial-gradient(1px 1px at 200px 150px, #c5d6ff 50%, transparent 100%),
      radial-gradient(1.2px 1.2px at 260px 40px, #eaf0ff 50%, transparent 100%),
      radial-gradient(1px 1px at 320px 180px, #d8e4ff 50%, transparent 100%);
    background-size: 360px 220px;
    animation: stars-drift 120s linear infinite;
    opacity: .8;
  }
  .stars-2 {
    background-image:
      radial-gradient(1.8px 1.8px at 50px 80px, #d4e2ff 50%, transparent 100%),
      radial-gradient(2px 2px at 180px 30px, #ffffff 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 280px 200px, #c1d3ff 50%, transparent 100%),
      radial-gradient(1.8px 1.8px at 380px 120px, #e0eaff 50%, transparent 100%);
    background-size: 480px 280px;
    animation: stars-drift 200s linear infinite, twinkle 4s ease-in-out infinite;
    opacity: .7;
  }
  .stars-3 {
    background-image:
      radial-gradient(2.5px 2.5px at 100px 100px, #c8d8ff 50%, transparent 100%),
      radial-gradient(3px 3px at 350px 250px, #ffffff 50%, transparent 100%),
      radial-gradient(2px 2px at 550px 80px, #a8c0ff 50%, transparent 100%);
    background-size: 700px 400px;
    animation: stars-drift 300s linear infinite, twinkle 6s ease-in-out infinite alternate;
    opacity: .9;
  }
  @keyframes stars-drift {
    from { background-position: 0 0; }
    to { background-position: -1000px 600px; }
  }
  @keyframes twinkle { 0%,100% { opacity: .9; } 50% { opacity: .55; } }

  .shooting-star {
    position: absolute; top: 10%; right: 5%;
    width: 140px; height: 1.5px;
    background: linear-gradient(90deg, transparent, #eaf0ff, #6aa8ff);
    border-radius: 9999px;
    filter: drop-shadow(0 0 6px #6aa8ff);
    animation: shoot 7s ease-in infinite;
    pointer-events: none;
  }
  .shooting-star.delay { top: 60%; right: 15%; animation-delay: 3.5s; animation-duration: 9s; }
  @keyframes shoot {
    0% { transform: translate(0,0) rotate(-25deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(-600px, 300px) rotate(-25deg); opacity: 0; }
  }

  .vignette {
    background: linear-gradient(to top, var(--bg), transparent 60%);
  }

  /* ---- Card ---- */
  .wrap { position: relative; width: 100%; max-width: 28rem; }
  .header { text-align: center; margin-bottom: 2.5rem; }
  .badge {
    width: 3rem; height: 3rem; margin: 0 auto 1.5rem;
    border-radius: 9999px; border: 1px solid var(--border);
    background: rgba(20,28,54,0.4); backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
  }
  .badge .dot {
    width: 10px; height: 10px; border-radius: 9999px;
    background: var(--primary);
    box-shadow: 0 0 20px var(--glow);
  }
  h1 {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
  }
  h1 em { color: var(--primary-2); font-style: italic; }
  .subtitle { margin: .75rem 0 0; color: var(--muted); font-size: .9rem; }

  form {
    position: relative;
    border: 1px solid var(--border);
    background: var(--card);
    backdrop-filter: blur(24px);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 30px 100px -20px rgba(0,0,0,0.8);
  }

  .field + .field { margin-top: 1.25rem; }
  .field label {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .5rem;
    font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
  }
  .field label svg { color: var(--primary-2); }
  .input-wrap {
    display: flex; align-items: center;
    border: 1px solid var(--border);
    background: var(--input-bg);
    padding: .75rem 1rem;
    border-radius: var(--border-radius);
    transition: border-color .2s, background .2s;
  }
  .input-wrap:focus-within {
    border-color: rgba(110, 168, 255, 0.6);
    background: rgba(255,255,255,0.07);
  }
  .input-wrap input {
    flex: 1; background: transparent; border: 0; outline: none;
    color: var(--fg); font-size: 1rem; font-family: inherit;
  }
  .input-wrap input::placeholder { color: rgba(138, 160, 196, 0.6); }

  .toggle {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: var(--muted); padding: .35rem; border-radius: var(--border-radius);
    transition: background .2s, color .2s;
  }
  .toggle:hover { background: rgba(255,255,255,0.06); color: var(--fg); }

  .forgot {
    display: flex; justify-content: flex-end;
    margin-top: .75rem;
  }
  .forgot a {
    font-size: .75rem; color: var(--muted); text-decoration: none;
    transition: color .2s;
  }
  .forgot a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }

  .form-error {
    margin: 1rem 0 0;
    padding: .65rem 1rem;
    border: 1px solid rgba(255, 99, 99, 0.35);
    background: rgba(255, 80, 80, 0.08);
    border-radius: var(--border-radius);
    color: #ff9c9c;
    font-size: .8rem;
  }

  .submit {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-top: 1.75rem;
    padding: .875rem 1.5rem;
    border-radius: var(--border-radius); border: 0; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #0a0f1f; font-size: .9rem; font-weight: 600; font-family: inherit;
    box-shadow: 0 0 60px -10px var(--glow);
    transition: transform .15s;
  }
  .submit:hover { transform: scale(1.01); }
  .submit:active { transform: scale(0.99); }
  .submit:disabled { opacity: .7; cursor: progress; }
  .submit .shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(-100%);
    transition: transform .7s;
  }
  .submit:hover .shimmer { transform: translateX(100%); }
  .submit .arrow { transition: transform .2s; }
  .submit:hover .arrow { transform: translateX(2px); }

.footnote {
    text-align: center; margin-top: 2rem;
    font-size: .75rem; color: var(--muted);
}