/* ======================================================
Fonts
====================================================== */

@font-face {
  font-family: 'Schengen B';
  src: url('/fonts/ABCSchengenB-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schengen B';
  src: url('/fonts/ABCSchengenB-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schengen A';
  src: url('/fonts/ABCSchengenA-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schengen A Mono';
  src: url('/fonts/ABCSchengenAMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ======================================================
Reset
====================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* ======================================================
Theme
====================================================== */

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-grey1: #757575;
  --color-grey3: #202020;
  --color-grey7: #292929;
  --color-green: #22c55e;
  --color-red: #ff2c2c;

  --display-fonts: 'Schengen B', sans-serif;
  --body-fonts: 'Schengen A', sans-serif;
  --alt-fonts: 'Schengen A Mono', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--body-fonts);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle ambient glow behind the card */
body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(720px, 90vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 65%
  );
  pointer-events: none;
  z-index: 0;
}

/* ======================================================
Layout
====================================================== */

.form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.title {
  margin: 0 0 32px;
  font-family: var(--alt-fonts);
  font-weight: 400;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-grey1);
}

/* ======================================================
Input — subtle underline with an animated focus line
====================================================== */

.field {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 4px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-white);
  font-family: var(--body-fonts);
  font-size: 17px;
  letter-spacing: 0.2px;
  text-align: center;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder {
  color: var(--color-grey1);
  transition: color 0.3s var(--ease);
}

.input:focus::placeholder {
  color: #4a4a4a;
}

/* Base line — always visible, subtle */
.field::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-grey7);
}

/* Focus line — sweeps left to right over the base line */
.field::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease);
}

.field:focus-within::after {
  transform: scaleX(1);
}

.error .field::before {
  background: rgba(255, 44, 44, 0.4);
}

.error .field::after {
  background: var(--color-red);
  transform: scaleX(1);
}

/* ======================================================
Button
====================================================== */

.button {
  position: relative;
  overflow: hidden;
  align-self: center;
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: 1000px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--alt-fonts);
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s ease-in-out,
    color 0.2s ease-in-out,
    transform 0.15s var(--ease),
    opacity 0.3s var(--ease);
}

.button:hover {
  background: color-mix(in srgb, var(--color-white) 80%, transparent);
}

.button:active {
  transform: scale(0.985);
}

.button__label {
  display: inline-block;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

/* Loading state */
.loading .button {
  cursor: progress;
  color: var(--color-black);
}

.loading .button:hover {
  background: var(--color-white);
}

.loading .button__label {
  opacity: 0;
  transform: translateY(-6px);
}

.button__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--color-black);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.loading .button__spinner {
  opacity: 1;
  animation: auth-spin 0.65s linear infinite;
}

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

.submit-success .button {
  background: var(--color-green);
  color: var(--color-black);
  pointer-events: none;
}

.submit-success .button:hover {
  background: var(--color-green);
}

/* ======================================================
Messages
====================================================== */

.message {
  height: 16px;
  margin: 16px 0 0;
  font-family: var(--body-fonts);
  font-size: 12px;
  letter-spacing: 0.1px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.success {
  color: var(--color-green);
}

.errorMessage {
  color: var(--color-red);
}

.submit-success .success,
.error .errorMessage {
  opacity: 1;
  transform: translateY(0);
}