/* Reset some default browser styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  background-color: #000;
  overflow: hidden;
  font-family: sans-serif;
}

/* Container to center everything */
.container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animated background lights */
.background-light {
  position: absolute;
  width: 400px;
  height: 400px;
  opacity: 0.3;
  filter: blur(120px);
}
.light1 {
  background: #a855f7; /* light-purple */
  animation: moveLight 8s infinite alternate ease-in-out;
  left: 0;
  top: 0;
}
.light2 {
  background: #f472b6; /* light-pinkish-reddish */
  animation: moveLight2 10s infinite alternate ease-in-out;
  right: 0;
  bottom: 0;
}

@keyframes moveLight {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(50%, 50%);
  }
}
@keyframes moveLight2 {
  0%,
  100% {
    transform: translate(50%, 50%);
  }
  50% {
    transform: translate(-50%, -50%);
  }
}

/* Frosted glass input field styles */
.input-field {
  position: relative;
  width: 320px;
  padding: 12px 16px;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  outline: none;
  transition: transform 0.3s ease-out;
}

/* When focused (after animation) */
.focused {
  transform: translateY(-12px);
}

/* Animation for the initial focus effect (rising and bouncing) */
.animate-rise {
  animation: rise 0.5s ease-out forwards;
}

@keyframes rise {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(-12px);
  }
}

/* Placeholder style */
::placeholder {
  color: #ccc;
}

/* Frosted glass button styles */
.button-field {
  margin-top: 16px;
  width: 320px;
  padding: 12px 16px;
  font-size: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  outline: none;
}

/* Hover and focus styles for button */
.button-field:hover,
.button-field:focus {
  background: rgba(255, 255, 255, 0.15);
}