/* ============ Boot / login / lock / shutdown screens ============ */

.session-layer {
  position: fixed; inset: 0; z-index: 10000; background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font); overflow: hidden;
}
.session-layer.fade-out { transition: opacity .5s var(--ease-out); opacity: 0; pointer-events: none; }
.session-layer.fade-in { animation: session-fade-in .4s var(--ease-out); }
@keyframes session-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- boot splash (Plymouth style) --- */
.boot-splash { background: #0e0a12; }
.boot-logo { display: flex; flex-direction: column; align-items: center; gap: 34px; animation: fade-in .8s; }
.boot-wordmark { font-size: 46px; font-weight: 300; letter-spacing: 2px; color: #fff; }
.boot-wordmark b { font-weight: 500; }
.boot-friends { width: 88px; height: 88px; }
.boot-dots { display: flex; gap: 12px; height: 12px; }
.boot-dots span {
  width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.16);
  animation: boot-dot 1.8s infinite;
}
@keyframes boot-dot {
  0%, 55%, 100% { background: rgba(255,255,255,.16); }
  25% { background: #fff; }
}
.boot-dots span:nth-child(1) { animation-delay: 0s; }
.boot-dots span:nth-child(2) { animation-delay: .15s; }
.boot-dots span:nth-child(3) { animation-delay: .3s; }
.boot-dots span:nth-child(4) { animation-delay: .45s; }
.boot-dots span:nth-child(5) { animation-delay: .6s; }
.boot-hint { position: absolute; bottom: 40px; color: rgba(255,255,255,.35); font-size: 13px; animation: pulse 3s infinite; }

/* shutdown spinner */
.shutdown-spinner { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.shutdown-spinner .spin-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.15); border-top-color: #fff;
  animation: spin 1s linear infinite;
}
.shutdown-spinner .msg { font-size: 17px; color: rgba(255,255,255,.85); font-weight: 300; }
.power-off-state { cursor: pointer; }
.power-off-state .sub { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.4); animation: pulse 3s infinite; }

/* --- GDM / lock screen --- */
.lock-screen {
  position: fixed; inset: 0; z-index: 10000; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.lock-screen .lock-bg {
  position: absolute; inset: -30px; background-size: cover; background-position: center;
  filter: brightness(.5) blur(22px); transform: scale(1.06);
  transition: filter .4s;
}
.lock-screen .lock-fg {
  position: relative; z-index: 2; flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .35s var(--ease-over), opacity .3s;
  padding-bottom: 60px;
}
.lock-screen.auth-stage .lock-fg { transform: translateY(-34px); }
.lock-clock { text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.lock-clock .time { font-size: 96px; font-weight: 300; line-height: 1; letter-spacing: 1px; }
.lock-clock .date { font-size: 26px; font-weight: 300; margin-top: 12px; opacity: .92; }
.lock-hint { margin-top: 44px; font-size: 14.5px; color: rgba(255,255,255,.66); animation: pulse 3.4s infinite; }

.lock-auth {
  position: relative; z-index: 2; display: none; flex-direction: column; align-items: center; gap: 16px;
  margin-top: 18px; margin-bottom: 90px; animation: menu-in .25s var(--ease-out);
}
.lock-screen.auth-stage .lock-auth { display: flex; }
.lock-auth .avatar { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 4px 20px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.25); overflow: hidden; }
.lock-auth .username { font-size: 21px; font-weight: 500; }
.lock-auth .pw-row { display: flex; gap: 0; }
.lock-auth input.pw {
  width: 260px; padding: 11px 16px; border: none; border-radius: 999px 0 0 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(10px); color: #fff; font-size: 15px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25);
}
.lock-auth input.pw:focus { box-shadow: inset 0 0 0 2px #fff; }
.lock-auth input.pw::placeholder { color: rgba(255,255,255,.55); }
.lock-auth .go-btn {
  width: 46px; border-radius: 0 999px 999px 0; border: none; background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25), inset -1.5px 0 0 rgba(255,255,255,.25);
}
.lock-auth .go-btn:hover { background: rgba(255,255,255,.25); }
.lock-auth .auth-msg { font-size: 13px; color: #ffb3a0; min-height: 18px; }
.lock-auth .shake { animation: shake .4s; }
@keyframes shake { 0%,100% { transform: translateX(0);} 20% { transform: translateX(-9px);} 40% { transform: translateX(9px);} 60% { transform: translateX(-6px);} 80% { transform: translateX(6px);} }
.lock-auth .pw-hint { font-size: 12.5px; color: rgba(255,255,255,.45); }
.lock-topbar {
  position: relative; z-index: 3; width: 100%; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500;
  text-shadow: 0 0 2px rgba(0,0,0,.8); color: #fff;
}
.lock-bottom {
  position: absolute; bottom: 18px; right: 18px; z-index: 3; display: flex; gap: 6px;
}
.lock-bottom .icon-btn { color: #fff; }
.lock-bottom .icon-btn:hover { background: rgba(255,255,255,.15); }

/* screenshot flash */
.screenshot-flash { position: fixed; inset: 0; z-index: 12000; background: #fff; opacity: 0; pointer-events: none; }
.screenshot-flash.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }