/* the screen saver: ink, one piece drifting, a clock in pixel type, Kagi asleep */
#ossaver { position: fixed; inset: 0; z-index: 90; background: #0E0F12; color: var(--bone); opacity: 0; transition: opacity 1.6s ease; pointer-events: none; overflow: hidden; }
#ossaver.on { opacity: 1; }
#ossaver.off { opacity: 0; transition-duration: 1.2s; }
#ossaver .sv-stage { position: absolute; inset: 0; }
#ossaver .sv-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
#ossaver .sv-slide.on { opacity: 1; }
#ossaver .sv-slide img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: brightness(.55) saturate(.85); transform: translate(0, 0) scale(1); }
#ossaver .sv-slide.on img { animation: sv-drift 16s ease-in-out both; }
@keyframes sv-drift { from { transform: translate(-1.5%, 1%) scale(1); } to { transform: translate(1.5%, -1%) scale(1.06); } }
#ossaver .sv-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 15, 18, .92) 0, rgba(14, 15, 18, .35) 40%, rgba(14, 15, 18, .15) 70%, rgba(14, 15, 18, .5) 100%); }
#ossaver .sv-clock { position: absolute; top: 48px; right: 56px; text-align: right; display: grid; gap: 10px; }
#ossaver .sv-time { font-family: 'Doto', var(--mono); font-weight: 800; font-size: clamp(64px, 9vw, 132px); line-height: 1; letter-spacing: .04em; color: var(--bone); text-shadow: 0 0 30px rgba(255, 250, 248, .25); }
#ossaver .sv-date { font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-45); }
#ossaver .sv-copy { position: absolute; left: 56px; bottom: 56px; max-width: min(70vw, 820px); display: grid; gap: 12px; }
#ossaver .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-45); }
#ossaver .eyebrow .dot { width: 5px; height: 5px; background: #2BB673; box-shadow: 0 0 10px #2BB673; animation: sv-blink 2.4s steps(1) infinite; }
@keyframes sv-blink { 50% { opacity: .35; } }
#ossaver .sv-title { margin: 0; font-family: 'Doto', var(--mono); font-weight: 800; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--bone); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ossaver .sv-rail { margin: 0; font: 500 9.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
#ossaver .sv-kagi { position: absolute; right: 56px; bottom: 52px; opacity: .9; }
#ossaver .sv-px { position: absolute; bottom: -4px; width: 2px; height: 2px; background: rgba(255, 250, 248, .7); box-shadow: 0 0 6px rgba(255, 250, 248, .6); animation: sv-rise var(--d, 16s) linear infinite; opacity: 0; }
@keyframes sv-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .5; } 100% { transform: translate(var(--w, 0), -100vh); opacity: 0; } }
#ossaver .sv-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; font: 500 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 250, 248, .22); }
body.saver #oshand { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #ossaver, #ossaver .sv-slide { transition-duration: .3s; } #ossaver .sv-slide.on img { animation: none; } #ossaver .sv-px, #ossaver .eyebrow .dot { animation: none; } }
@media (max-width: 700px) { #ossaver .sv-clock { top: 28px; right: 24px; } #ossaver .sv-copy { left: 24px; right: 24px; bottom: 96px; max-width: none; } #ossaver .sv-kagi { right: 24px; bottom: 24px; } }