/* 05-lockscreen — DESKTOP (1024 px and wider). Owner: LOCK-WALL. Every selector starts with #lockscreen .v-desktop
   A calm sky band. Faint oversized "9:41" behind; the moments at about 2× phone scale.
   The hero: the three real moments (island 5 of 8, card 7 of 8, Done) fading one into the next. */
#lockscreen .v-desktop {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #fff 0%, var(--sky-0) 24%, var(--sky-1) 100%);
  padding: var(--section-y) 0 calc(var(--section-y) + 24px);
}
#lockscreen .v-desktop .lk { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
#lockscreen .v-desktop .lk-head { text-align: center; }
#lockscreen .v-desktop .lk-head .h2 { margin: 0; font-size: clamp(44px, 3.9vw, 56px); }
#lockscreen .v-desktop .lk-head .lede { max-width: 26em; margin: 16px auto 0; }

/* ---------- the stage ---------- */
#lockscreen .v-desktop .lk-a {
  --cw: clamp(540px, 44vw, 640px);
  position: relative; display: grid; place-items: center;
  margin-top: 36px; padding: calc(var(--cw) * .27) 0 24px;
}
/* the time, as type: huge and barely there */
#lockscreen .v-desktop .lk-time {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 0;
  font-family: system-ui, -apple-system, sans-serif; font-weight: 600; letter-spacing: -.045em;
  font-size: calc(var(--cw) * .5); line-height: .8; color: rgba(61, 143, 230, .13);
  pointer-events: none; user-select: none; white-space: nowrap;
}

/* the three real moments, one after another in a steady stage (the card's shape; the island is centred in it) */
#lockscreen .v-desktop .lk-seq { position: relative; z-index: 1; width: var(--cw); aspect-ratio: 844 / 300; margin: 0; padding: 0; list-style: none; }
#lockscreen .v-desktop .lk-s {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(.955); transition: opacity .6s var(--ease, ease), transform .9s var(--ease, ease);
}
#lockscreen .v-desktop .lk-s.on { opacity: 1; transform: scale(1); }
#lockscreen .v-desktop .lk-s img { display: block; width: 100%; height: auto; }
#lockscreen .v-desktop .lk-s1 img { width: 96%; filter: drop-shadow(0 24px 30px rgba(15, 26, 43, .24)); }
#lockscreen .v-desktop .lk-s2 img, #lockscreen .v-desktop .lk-s3 img { border-radius: 6.4% / 18%; box-shadow: 0 50px 80px -34px rgba(11, 58, 140, .50), 0 18px 34px -16px rgba(15, 26, 43, .28); }
#lockscreen .v-desktop .lk-dots { position: relative; z-index: 1; display: flex; gap: 8px; justify-content: center; margin-top: 34px; }
#lockscreen .v-desktop .lk-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 98, 184, .22); transition: background-color .6s, transform .6s; }
#lockscreen .v-desktop .lk-dots i.on { background: var(--accent); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  #lockscreen .v-desktop .lk-s { transition: none; }
  #lockscreen .v-desktop .lk-s1, #lockscreen .v-desktop .lk-s3 { opacity: 0 !important; }
  #lockscreen .v-desktop .lk-s2 { opacity: 1 !important; transform: none !important; }
  #lockscreen .v-desktop .lk-dots { display: none; }
}

/* ==== ONE TYPE SCALE (founder 30 Sep: "in some places size is big, in some size is small"; the hero is the reference) ====
   Section h2 44/500/1.08/-0.03em at every desktop width · lede 19/350/1.5 in --body · in-section titles 26/500 · body and lists 17/350/1.5 (scaled down 30 Sep: "reduce the size little").
   Kept identical in every desktop section file; RT-LOOP-D. */
#lockscreen .v-desktop .lk-head .h2 { font-size: 44px; font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
#lockscreen .v-desktop .lk-head .lede { font-size: 19px; font-weight: 350; line-height: 1.5; color: var(--body); }