/* A single lock-screen scene, contained in the existing service card. */
.service-card--lockscreen {
  --lock-mint: #def0e4;
  --lock-paper: #f2f8f2;
  --lock-line: #c9dfd4;
  isolation: isolate;
  background: linear-gradient(150deg, var(--color-border), #91aaa1 52%, var(--color-green-muted));
}

.lockscreen-scene { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; }
.lockscreen-scene svg, .lockscreen-notification svg { fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.lockscreen-status { position: absolute; top: 14px; left: 6.5%; z-index: 3; color: var(--color-green-dark); }
.lockscreen-device {
  position: absolute; top: 4%; left: 63%; width: clamp(185px, 36cqw, 290px); aspect-ratio: 71.9 / 150;
  padding: 5px; border: 1px solid var(--color-bg); border-radius: 15% / 7.2%;
  background: linear-gradient(120deg, var(--color-border), var(--color-bg) 46%, #8c9a94);
  box-shadow: 9px 16px 30px rgba(0, 46, 41, .22); transform: rotate(-9deg); transform-origin: 50% 30%;
}
.lockscreen-device::after { content: ""; position: absolute; right: -3px; top: 27%; height: 10%; width: 2px; border-radius: 2px; background: var(--color-border); }
.lockscreen-display {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border: 3px solid #101715; border-radius: 13.5% / 6.5%; color: var(--color-green-dark);
  background: linear-gradient(160deg, var(--lock-paper) 0%, var(--lock-mint) 40%, #a4c1af 100%);
  font-family: var(--font-sans);
}
.lockscreen-display::before { content: ""; position: absolute; left: -19%; top: 30%; width: 148%; height: 75%; border: 1px solid rgba(0, 46, 41, .13); border-radius: 50%; background: rgba(255, 253, 250, .08); }
.lockscreen-island { position: absolute; left: 50%; top: 3%; width: 21%; height: 3.1%; transform: translateX(-50%); border-radius: 50px; background: #101715; }
.lockscreen-island::after { content: ""; position: absolute; right: 10%; top: 28%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: #263d35; }
.lockscreen-lock { position: absolute; top: 9%; left: 47%; width: 6%; height: 4%; opacity: .8; }
.lockscreen-date { position: absolute; top: 14%; left: 0; width: 100%; font-size: clamp(11px, 1.55cqw, 15px); font-weight: 700; text-align: center; white-space: nowrap; }
.lockscreen-clock { position: absolute; top: 18%; left: 0; width: 100%; font-size: clamp(46px, 9.2cqw, 76px); font-weight: 400; line-height: 1.2; letter-spacing: -.07em; text-align: center; }
.lockscreen-character { position: absolute; top: 34%; left: 7%; width: 86%; height: 37%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(0, 46, 41, .1)); }
.lockscreen-reminder { position: absolute; top: 73%; left: 5%; width: 90%; display: flex; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid rgba(255, 253, 250, .3); border-radius: 20px; background: rgba(242, 248, 242, .64); font-size: clamp(9px, 1.3cqw, 12px); }
.lockscreen-reminder > svg { flex: 0 0 20px; width: 20px; height: 24px; }
.lockscreen-reminder > div { flex: 1; min-width: 0; }
.lockscreen-reminder strong { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 3px; font-size: clamp(10px, 1.65cqw, 15px); line-height: 1.4; }
.lockscreen-reminder strong span { white-space: nowrap; }
.lockscreen-reminder > div > span { display: block; text-wrap: pretty; }
.lockscreen-reminder .lockscreen-reminder-arrow { flex-basis: 13px; width: 13px; height: 13px; }
.lockscreen-shortcuts { position: absolute; left: 8%; right: 8%; bottom: 5%; display: flex; align-items: center; justify-content: space-between; }
.lockscreen-shortcuts > span { display: grid; place-items: center; width: 15%; aspect-ratio: 1; border: 1px solid rgba(255, 253, 250, .2); border-radius: 50%; background: rgba(242, 248, 242, .3); }
.lockscreen-shortcuts svg { width: 48%; height: 48%; }
.lockscreen-shortcuts .lockscreen-shortcut-agent { width: 20%; background: var(--color-green-dark); }
.lockscreen-shortcut-agent img { width: 72%; height: auto; }
.lockscreen-home { position: absolute; bottom: 1.5%; left: 36%; width: 28%; height: .55%; border-radius: 10px; background: var(--color-green-dark); }

.lockscreen-notification {
  position: absolute; z-index: 3; top: 14%; left: 6.5%; width: 49%; padding: 16px;
  border: 1px solid rgba(255, 253, 250, .68); border-radius: 24px;
  background: linear-gradient(150deg, rgba(255, 253, 250, .96), rgba(242, 248, 242, .87));
  color: var(--color-green-dark); box-shadow: 0 8px 25px rgba(0, 46, 41, .07);
  font-family: var(--font-sans); transition: box-shadow var(--transition-default), transform var(--transition-default);
}
.lockscreen-notification:hover { transform: translateY(-2px); box-shadow: 0 11px 28px rgba(0, 46, 41, .15); }
.lockscreen-notification:focus-visible { outline: 2px solid var(--color-green-dark); outline-offset: 4px; }
.lockscreen-notification-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; letter-spacing: .045em; }
.lockscreen-notification-header img { flex: 0 0 24px; width: 24px; height: 24px; }
.lockscreen-notification-header > span { margin-left: auto; font-size: 10px; color: var(--color-green-muted); }
.lockscreen-notification-title { display: flex; flex-wrap: wrap; gap: 3px 13px; font-size: 19px; line-height: 1.4; }
.lockscreen-notification-title > span { white-space: nowrap; }
.lockscreen-notification-body { display: block; width: calc(100% - 36px); margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--color-green-muted); text-wrap: pretty; }
.lockscreen-notification-arrow { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 34px; aspect-ratio: 1; border: 1px solid var(--lock-line); border-radius: 50%; background: var(--lock-mint); }
.lockscreen-notification-arrow svg { width: 19px; height: 19px; }
.service-card--lockscreen .service-card-overlay { z-index: 2; background: linear-gradient(0deg, rgba(0, 46, 41, .88), rgba(0, 46, 41, .12) 62%, transparent 82%); }
.service-card--lockscreen .service-card-overlay .heading-3 { max-width: 85%; text-wrap: balance; }
.service-card--lockscreen .service-card-overlay p { max-width: 67%; text-wrap: pretty; }

@media (min-width: 768px) and (max-width: 1050px) {
  .lockscreen-notification { width: 57%; padding: 12px; }
  .lockscreen-notification-header { gap: 5px; margin-bottom: 6px; font-size: 10px; }
  .lockscreen-notification-header img { flex-basis: 20px; width: 20px; height: 20px; }
  .lockscreen-notification-title { gap: 2px 9px; font-size: 15px; }
  .lockscreen-notification-body { margin-top: 6px; font-size: 11px; }
  .lockscreen-notification-arrow { width: 27px; right: 10px; bottom: 10px; }
  .lockscreen-notification-arrow svg { width: 15px; height: 15px; }
  .lockscreen-device { left: 55%; width: 150px; }
  .service-card--lockscreen .service-card-overlay p { font-size: 14px; line-height: 1.6; }
}

@media (max-width: 767px) {
  .lockscreen-status { top: 10px; left: 6.5%; font-size: 9px; }
  .lockscreen-notification { top: 12%; width: 53%; padding: 13px; }
  .lockscreen-notification-header { gap: 5px; margin-bottom: 6px; }
  .lockscreen-notification-header img { flex-basis: 20px; width: 20px; height: 20px; }
  .lockscreen-notification-title { gap: 2px 9px; font-size: 15px; }
  .lockscreen-notification-body { margin-top: 6px; font-size: 11px; }
  .lockscreen-notification-arrow { width: 27px; right: 10px; bottom: 10px; }
  .lockscreen-notification-arrow svg { width: 15px; height: 15px; }
  .lockscreen-device { top: 4%; left: 55%; width: clamp(140px, 36cqw, 220px); }
  .service-card--lockscreen .service-card-overlay .heading-3 { max-width: 85%; font-size: 24px; }
  .service-card--lockscreen .service-card-overlay p { max-width: 67%; font-size: 13px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .lockscreen-notification { transition: none; }
  .lockscreen-notification:hover { transform: none; }
}