* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===== MAIN SECTION ===== */
section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fef3c7;
}

/* ===== BACKGROUND ===== */
section .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
}

/* ===== TREES LAYER ===== */
section .trees {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  pointer-events: none;
}

/* ===== GIRL ANIMATION ===== */
section .girl {
  position: absolute;
  scale: 0.65;
  z-index: 3;
  pointer-events: none;
  animation: animateGirl 12s linear infinite;
}

@keyframes animateGirl {
  0% {
    transform: translateX(calc(100% + 100vw));
  }
  50% {
    transform: translateX(calc(-100% - 100vw));
  }
  50.01% {
    transform: translateX(calc(-100% - 100vw)) rotateY(180deg);
  }
  100% {
    transform: translateX(calc(100% + 100vw)) rotateY(180deg);
  }
}

/* ===== LOGIN CARD ===== */
.login {
  position: relative;
  z-index: 10;
  width: 420px;
  padding: 50px 45px;
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(18px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* ===== LOGIN TITLE ===== */
.login h2 {
  text-align: center;
  font-size: 2.4em;
  font-weight: 600;
  color: #8f2c24;
}

/* ===== INPUT BOX ===== */
.login .inputBox {
  position: relative;
  width: 100%;
}

.login .inputBox input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 1.05em;
  color: #8f2c24;
  background: #ffffff;
  border: none;
  outline: none;
  margin-bottom: 20px;
}

.login .inputBox input::placeholder {
  color: #8f2c24;
}

/* ===== LOGIN BUTTON ===== */
.login .inputBox #btn {
  background: #8f2c24;
  color: #fff;
  cursor: pointer;
  font-weight: 500;
  transition: 0.4s ease;
}

.login .inputBox #btn:hover {
  background: #d64c42;
}

/* ===== LINKS ===== */
.login .group {
  display: flex;
  justify-content: space-between;
}

.login .group a {
  font-size: 1em;
  color: #8f2c24;
  font-weight: 500;
  text-decoration: none;
}

.login .group a:last-child {
  text-decoration: underline;
}

/* ===== FALLING LEAVES ===== */
.leaves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.leaves .set {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

.leaves .set div {
  position: absolute;
  display: block;
}

/* Leaf positions & speed */
.leaves .set div:nth-child(1) { left: 20%; animation: animate 20s linear infinite; }
.leaves .set div:nth-child(2) { left: 50%; animation: animate 14s linear infinite; }
.leaves .set div:nth-child(3) { left: 70%; animation: animate 12s linear infinite; }
.leaves .set div:nth-child(4) { left: 5%;  animation: animate 15s linear infinite; }
.leaves .set div:nth-child(5) { left: 85%; animation: animate 18s linear infinite; }
.leaves .set div:nth-child(6) { left: 90%; animation: animate 12s linear infinite; }
.leaves .set div:nth-child(7) { left: 15%; animation: animate 14s linear infinite; }
.leaves .set div:nth-child(8) { left: 60%; animation: animate 15s linear infinite; }

@keyframes animate {
  0% {
    opacity: 0;
    top: -10%;
    transform: translateX(20px) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  40% {
    transform: translateX(-20px) rotate(90deg);
  }
  60% {
    transform: translateX(20px) rotate(180deg);
  }
  100% {
    top: 110%;
    transform: translateX(20px) rotate(225deg);
  }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 520px) {
  .login {
    width: 90%;
    padding: 40px 25px;
  }

  .login h2 {
    font-size: 2em;
  }
}