/* 05-lockscreen — MOBILE (below 1024 px). Owner: LOCK-WALL. Every selector starts with #lockscreen .v-mobile
   Phones: title and one line, then the real moments edge to edge (16 px gutters) over a faint "9:41".
   The three real moments fade one into the next in the card's place. Tablets get a bigger stage. */
#lockscreen .v-mobile {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #fff 0%, var(--sky-0) 20%, var(--sky-1) 100%);
}
#lockscreen .v-mobile .lk { padding: var(--section-y) max(16px, env(safe-area-inset-left)) calc(var(--section-y) + 8px) max(16px, env(safe-area-inset-right)); }
#lockscreen .v-mobile .lk-head { max-width: 560px; margin: 0 auto; text-align: center; }
#lockscreen .v-mobile .lk-head .h2 { margin: 0 auto; }
#lockscreen .v-mobile .lk-head .lede { max-width: 21em; margin: 14px auto 0; }

/* ---------- A ---------- */
#lockscreen .v-mobile .lk-a {
  --cw: min(100%, 600px);
  position: relative; display: grid; justify-items: center; margin-top: 28px; padding-top: 20vw;
}
@media (min-width: 640px) { #lockscreen .v-mobile .lk-a { padding-top: 120px; } }
#lockscreen .v-mobile .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: min(40vw, 280px); 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-mobile .lk-seq { position: relative; z-index: 1; width: var(--cw); aspect-ratio: 844 / 300; margin: 0; padding: 0; list-style: none; }
#lockscreen .v-mobile .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-mobile .lk-s.on { opacity: 1; transform: scale(1); }
#lockscreen .v-mobile .lk-s img { display: block; width: 100%; height: auto; }
#lockscreen .v-mobile .lk-s1 img { width: 96%; filter: drop-shadow(0 14px 18px rgba(15, 26, 43, .24)); }
#lockscreen .v-mobile .lk-s2 img, #lockscreen .v-mobile .lk-s3 img { border-radius: 6.4% / 18%; box-shadow: 0 30px 48px -24px rgba(11, 58, 140, .48), 0 10px 22px -10px rgba(15, 26, 43, .24); }
#lockscreen .v-mobile .lk-dots { position: relative; z-index: 1; display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
#lockscreen .v-mobile .lk-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 98, 184, .22); transition: background-color .6s, transform .6s; }
#lockscreen .v-mobile .lk-dots i.on { background: var(--accent); transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) {
  #lockscreen .v-mobile .lk-s { transition: none; }
  #lockscreen .v-mobile .lk-s1, #lockscreen .v-mobile .lk-s3 { opacity: 0 !important; }
  #lockscreen .v-mobile .lk-s2 { opacity: 1 !important; transform: none !important; }
  #lockscreen .v-mobile .lk-dots { display: none; }
}

/* ---- RT-LOOP-M · ONE TYPE SCALE (founder 30 Sep; the hero is the reference): h2 30/1.1/-0.025em (28 under 360,
   40 on tablets) · lede 17/1.5/350 (19 on tablets) · labels 14/600 accent · in-section titles 22 · body 16–17 ---- */
#lockscreen .v-mobile .lk-head .h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
#lockscreen .v-mobile .lk-head .lede { font-size: 17px; line-height: 1.5; font-weight: 350; }
@media (max-width: 359.98px) { #lockscreen .v-mobile .lk-head .h2 { font-size: 28px; } }
@media (min-width: 768px) { #lockscreen .v-mobile .lk-head .h2 { font-size: 40px; } #lockscreen .v-mobile .lk-head .lede { font-size: 19px; } }