/* overlays.css — boot, lock, sleep, spotlight, switcher, brightness veil */

/* boot */
#boot {
  position: absolute; inset: 0;
  z-index: 10000;
  background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 90px;
  opacity: 1;
  transition: opacity 0.55s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.boot-logo svg { height: 78px; width: auto; }
.boot-bar {
  width: 240px; height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.boot-fill { width: 0%; height: 100%; background: #fff; border-radius: 3px; transition: width 2.1s ease-in-out; }
.boot-bar.go .boot-fill { width: 100%; }
.boot-spinner { display: none; }

/* lock screen */
#lock {
  position: absolute; inset: 0;
  z-index: 9900;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(10, 14, 28, 0.35);
  backdrop-filter: blur(28px) saturate(1.3) brightness(0.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.3) brightness(0.9);
  opacity: 0;
  transition: opacity 0.4s ease, backdrop-filter 0.5s ease;
  color: #fff;
}
#lock.shown { opacity: 1; }
#lock.unlocking { opacity: 0; backdrop-filter: blur(0px) saturate(1) brightness(1.25); }
.lock-time { margin-top: 9vh; text-align: center; }
.lock-clock { font-size: 17vw; font-weight: 500; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25); }
.lock-clock { font-size: clamp(90px, 15vw, 190px); }
.lock-date { font-size: 20px; font-weight: 500; opacity: 0.9; margin-top: 2px; }
.lock-center { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lock-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(150deg, #7d7aff, #4c7ef3);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.lock-name { font-size: 17px; font-weight: 600; }
.lock-input {
  width: 210px;
  padding: 6px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.22);
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-align: center;
  font-size: 13px;
}
.lock-input::placeholder { color: rgba(255, 255, 255, 0.75); }
.lock-input:focus { background: rgba(255, 255, 255, 0.3); outline: 3px solid rgba(255, 255, 255, 0.28); }
.lock-hint { font-size: 12px; opacity: 0.75; margin-top: 2px; }
.lock-bottom { margin-bottom: 26px; display: flex; gap: 34px; }
.lock-btn {
  padding: 5px 14px;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
}
.lock-btn:hover { background: rgba(255, 255, 255, 0.14); }

/* sleep */
#sleep {
  position: absolute; inset: 0;
  z-index: 9990;
  background: #000;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#sleep.shown { opacity: 1; }

/* shutdown veil */
.shutdown-veil {
  position: absolute; inset: 0;
  z-index: 9995;
  background: #000;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: all;
}
.shutdown-veil.on { opacity: 1; }

/* brightness veil */
#brightness-veil {
  position: absolute; inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* spotlight */
#spotlight {
  position: absolute;
  left: 50%; top: 22%;
  transform: translateX(-50%) scale(1.05);
  width: min(680px, 92vw);
  z-index: 9600;
  background: var(--panel-bg);
  backdrop-filter: blur(54px) saturate(1.8);
  -webkit-backdrop-filter: blur(54px) saturate(1.8);
  border: 0.5px solid var(--window-border);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  opacity: 0;
  transition: transform 0.2s var(--ease-macos), opacity 0.2s ease;
}
#spotlight.open { transform: translateX(-50%) scale(1); opacity: 1; }
.sp-field { display: flex; align-items: center; gap: 12px; padding: 13px 18px; }
.sp-magnifier { display: flex; opacity: 0.6; }
.sp-input {
  flex: 1;
  border: none; background: none; outline: none;
  font-size: 24px; font-weight: 300;
  color: var(--text);
}
.sp-input::placeholder { color: var(--text-tertiary); }
.sp-clear { width: 16px; height: 16px; border-radius: 50%; background: var(--fill-strong); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; opacity: 0; }
#spotlight .sp-input:not(:placeholder-shown) ~ .sp-clear { opacity: 1; }
.sp-results { max-height: 42vh; border-top: 0.5px solid var(--sep); padding: 6px; }
.sp-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
}
.sp-row.active { background: var(--accent); color: #fff; }
.sp-row.active .sp-sub { color: rgba(255, 255, 255, 0.7); }
.sp-icon { width: 30px; height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: center; }
.sp-icon svg { width: 100%; height: 100%; border-radius: 7px; }
.sp-text { min-width: 0; }
.sp-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-sub { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-hint { padding: 8px 12px; color: var(--text-tertiary); font-size: 13px; }

/* app switcher */
#switcher {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9700;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sw-strip {
  display: flex; gap: 10px;
  padding: 16px 20px;
  background: rgba(40, 40, 44, 0.55);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.14s ease, transform 0.14s var(--ease-macos);
}
#switcher.open .sw-strip { opacity: 1; transform: scale(1); }
.sw-item {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.sw-item.active { background: rgba(255, 255, 255, 0.22); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); }
.sw-icon { width: 58px; height: 58px; }
.sw-icon svg { width: 100%; height: 100%; }
.sw-label {
  color: #fff;
  font-size: 15px; font-weight: 500;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  padding: 3px 12px;
  background: rgba(20, 20, 24, 0.5);
  border-radius: 7px;
}

/* toasts (rare system messages) */
#toasts { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 9400; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sys-toast {
  padding: 8px 16px;
  background: var(--panel-bg);
  backdrop-filter: blur(30px);
  border: 0.5px solid var(--window-border);
  border-radius: 10px;
  font-size: 12.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.25s var(--ease-macos);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* small screens */
@media (max-width: 900px) {
  #spotlight { top: 12%; }
  .lock-clock { font-size: 96px; }
}