.BG {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;     /* stretch background to window width */
  height: auto;    /* keep aspect */
}

.welcomeWord {
  display: flex;
  position: absolute;
  top: 12vw;             /* stays 20% down */
  left: 50vw;            /* centered horizontally */
  transform: translate(-50%, -50%);
}

.letter {
  width: 60vw;          /* each letter is 15% of viewport width */
  height: auto;
  opacity: 0;
  animation: fadeDown 0.4s ease forwards;
}

/* overlap scales with screen size too */
.letter:not(:first-child) {
  margin-left: -60vw;  /* half the width of a letter */
}

/* animation delays */
.l1 { animation-delay: 0.4s; }
.l2 { animation-delay: 0.55s; }
.l3 { animation-delay: 0.7s; }
.l4 { animation-delay: 0.85s; }
.l5 { animation-delay: 1s; }
.l6 { animation-delay: 1.15s; }
.l7 { animation-delay: 1.3s; }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-2vh); /* drop distance scales with screen height */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sparkle {
  display: flex;
  position: absolute;
  top: 30vw;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  height: 40vw;     /* keep proportions */
  z-index: 99;
  pointer-events: none;   /* <<< key: don’t block clicks */

  opacity: 0; /* hidden at first */
  animation: sparkleShow 1.4s ease forwards;
  animation-delay: 1.3s; /* wait 2s before showing */
}

@keyframes sparkleShow {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  60%  { opacity: 0; }
 
}





.loginBox {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  position: absolute;
  top: 33vw;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 30vw;
  z-index: 20;

  /* new */
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 1.5s; /* wait 2 seconds before showing */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}


.loginInput {
  padding: 1.5vw 3vw;
  border: none;
  border-radius: 1vw;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 1.7vw;
}

.loginInput::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.loginButton {
  padding: 2vw 2vw;
  border: none;
  border-radius: 1vw;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 2vw;
  cursor: pointer;
  transition: background 0.3s ease;
}

.loginButton:hover {
  background: rgba(255, 255, 255, 0.15);
}

.errorMsg{ margin-top: .5rem; color: #ab8f8f; font-size: 1rem; }

/* -------- Email panel (placeholder) -------- */
.mailPanel{
  position: absolute; z-index: 2000;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(80vw, 900vh);
  height: min(90vh);
  background: rgb(12, 12, 12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(139, 136, 136, 0.25);
}
.mailPanelInner{
  position: absolute;
  color: white;
 top: 10%; left: 50%; transform: translate(-50%, -50%);
  
}
/* Optional: focus style */
.loginInput:focus{ outline: 2px solid rgba(255,255,255,.35); }