/* --- Stage Layout --- */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

/* Zooming part (photo + overlay scale together) */
.camera {
  position: absolute;
  inset: 0;
  transform-origin: 2% 46.31%;
  animation: camZoom 6s cubic-bezier(.22,.61,.36,1) 3s forwards; /* 3s pause, 6s zoom */
}
.camera img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Black fade layer */
.black {
  position: absolute;
  inset: 0;
  background: black;
  opacity: 0;
  z-index: 4;
  animation:
    blackIn 0.35s ease-out 5.8s forwards,
    blackOut 0.6s ease-out 6.2s forwards;
}

/* Login screen */
.login {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  /* Windows background with a light darken to boost contrast */
  background: url("../assets/images/windows-login.jpg") center / cover no-repeat;
  background-color: rgba(0,0,0,0.25);
  background-blend-mode: multiply;

  animation: loginIn 0.6s ease-out 6.2s forwards;
}

.login-container {
  text-align: center;
  transform: translateY(-20%); /* shift up a bit like Windows */
}

/* Profile picture + name */
.user-pic {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,0.95);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  margin-bottom: 15px;
}
.login-container h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 12px rgba(255,255,255,.18);
}

/* Password box */
.password-box {
  width: 350px;
  height: 50px;
  margin: 20px auto 0;
  display: flex;
  justify-content: center;   /* center contents horizontally */
  align-items: center;       /* center vertically */
  border-radius: 8px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}

/* Center the active label (placeholder or dots) */
.placeholder,
.password-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Placeholder text (visible first) */
.placeholder {
  color: rgba(255,255,255,.88);
  font-size: 1.5rem;
  animation: fadeOut 0.4s ease 7.2s forwards; /* hide before dots start */
}

/* Dots container (fades in one-by-one) */
.password-dots {
  display: flex;
  gap: 8px;
}

/* Each dot */
.password-dots span {
  opacity: 0;
  color: #fff;
  font-size: 1.5rem;
  font-family: monospace;      /* fixed spacing */
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  animation: fadeInDot 0.2s forwards;
}

/* Staggered delays for 14 dots */
.password-dots span:nth-child(1)  { animation-delay: 7.6s; }
.password-dots span:nth-child(2)  { animation-delay: 7.8s; }
.password-dots span:nth-child(3)  { animation-delay: 8.0s; }
.password-dots span:nth-child(4)  { animation-delay: 8.2s; }
.password-dots span:nth-child(5)  { animation-delay: 8.4s; }
.password-dots span:nth-child(6)  { animation-delay: 8.6s; }
.password-dots span:nth-child(7)  { animation-delay: 8.8s; }
.password-dots span:nth-child(8)  { animation-delay: 9.0s; }
.password-dots span:nth-child(9)  { animation-delay: 9.2s; }
.password-dots span:nth-child(10) { animation-delay: 9.4s; }
.password-dots span:nth-child(11) { animation-delay: 9.6s; }
.password-dots span:nth-child(12) { animation-delay: 9.8s; }
.password-dots span:nth-child(13) { animation-delay: 10.0s; }
.password-dots span:nth-child(14) { animation-delay: 10.2s; }

/* --- Animations --- */
@keyframes camZoom { from { transform: scale(1); } to { transform: scale(8); } }
@keyframes blackIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes blackOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes loginIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeInDot { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .camera { animation: none; transform: none; }
  .black, .login { animation: none; opacity: 1; }
}