/* ============================================================
   lockscreen.css — macOS-style lock screen
   macOS Desktop Website
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
#macos-lockscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* JS sets to flex */

  align-items: stretch;
  justify-content: stretch;

  background: rgba(10, 10, 20, 0.72);
  backdrop-filter: blur(48px) saturate(1.6);
  -webkit-backdrop-filter: blur(48px) saturate(1.6);
  background-image:
    radial-gradient(ellipse 60% 50% at 25% 35%, rgba(80, 40, 160, 0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 75% 70%, rgba(20, 100, 140, 0.30) 0%, transparent 70%);

  opacity: 0;
  transition: opacity 0.45s ease;
}

#macos-lockscreen.visible {
  opacity: 1;
}

#macos-lockscreen.unlocking {
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Full-height content layout ──────────────────────────────── */
.lock-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8vh 0 10vh;
  color: #fff;
}

/* ── Top: date + time ───────────────────────────────────────── */
.lock-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lock-date {
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
}

.lock-time {
  font-size: clamp(80px, 13vw, 118px);
  font-weight: 100;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

/* ── Bottom: avatar + name + password ────────────────────────── */
.lock-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Avatar — acts as the unlock trigger button */
.lock-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.lock-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.lock-avatar:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45);
}

.lock-avatar:active {
  transform: scale(0.96);
}

.lock-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

/* ── Hint text ───────────────────────────────────────────────── */
.lock-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  transition: opacity 0.2s ease;
}

.lock-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Pill password form ──────────────────────────────────────── */
.lock-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.lock-form.revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* The pill input — dark frosted glass, no border, standalone */
.lock-password {
  width: 240px;
  height: 40px;
  background: rgba(50, 60, 68, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: none;
  border-radius: 100px;
  outline: none;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-system, -apple-system, BlinkMacSystemFont, sans-serif);
  text-align: center;
  letter-spacing: 0.02em;
  cursor: text;
  transition: background 0.2s;
}

.lock-password::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.lock-password:focus {
  background: rgba(55, 68, 78, 0.82);
}

/* "Touch ID or Enter Password" below the pill */
.lock-touchid-hint {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
}

/* ── Wrong password shake ────────────────────────────────────── */
@keyframes lock-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.lock-password.shake {
  animation: lock-shake 0.35s ease;
  background: rgba(140, 30, 30, 0.65);
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #macos-lockscreen,
  .lock-form,
  .lock-avatar { transition: none; }
  .lock-input-wrap.shake { animation: none; }
}