/* Entry chrome is intentionally independent of the portfolio's blue chrome. */
.lockscreen{
 --lock-top-height:clamp(96px,30vw,130px);
 --lock-bottom-height:clamp(96px,30vw,130px);
 --lock-track-width:min(86.5vw,374px);
 --lock-track-height:clamp(54px,16.5vw,71px);
 --lock-knob-width:clamp(68px,21vw,91px);
 --lock-drag:0px;--lock-label-opacity:1;
 position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;
 color:#fff;background:#a9b3b6;user-select:none;-webkit-user-select:none;
 font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
}
.lock-wallpaper{position:absolute;inset:0;background:url('../assets/optimized/water-droplets-full-b04f38802fd01b2a.webp') center center/cover no-repeat}
.lock-top,.lock-bottom{
 position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;
 background:linear-gradient(to bottom,#555b60ed 0%,#34393de8 48%,#181c20ed 50%,#080a0cf5 100%);
 border-top:1px solid #ffffff3b;border-bottom:1px solid #000b;
 box-shadow:0 1px 0 #ffffff24,inset 0 1px 0 #ffffff13;
 text-shadow:0 -1px 1px #0009;
}
.lock-top{top:0;height:calc(var(--lock-top-height) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);flex-direction:column;gap:0}
.lockscreen:focus{outline:none}
.lock-time{font-family:"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-size:clamp(66px,20vw,86px);font-weight:300;line-height:1;letter-spacing:-2.5px;font-variant-numeric:tabular-nums}
.lock-date{margin:0;padding:1px 0 7px;font-size:clamp(16px,4.9vw,21px);font-weight:400;line-height:1.3}
.lock-bottom{bottom:0;height:calc(var(--lock-bottom-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:linear-gradient(to bottom,#696d70bb 0%,#43474bd1 21%,#282c30e8 49%,#0a0c0ef0 51%,#080a0bf5 100%)}
.lock-slider{
 position:relative;flex:none;width:var(--lock-track-width);height:var(--lock-track-height);
 border:1px solid #a3a5a866;border-top-color:#000e;border-radius:13px;
 background:linear-gradient(#050607,#111214 52%,#090a0c);
 box-shadow:inset 0 2px 5px #000c,0 1px 0 #ffffff4a;
}
.lock-label{
 position:absolute;inset:0 2px 0 calc(var(--lock-knob-width) + 6px);
 display:flex;justify-content:center;align-items:center;white-space:nowrap;
 font-size:clamp(23px,6.9vw,30px);font-weight:400;letter-spacing:-.55px;
 color:#777;text-shadow:none;opacity:var(--lock-label-opacity);
 background:linear-gradient(100deg,#727272 0%,#727272 38%,#a0a0a0 44%,#fafafa 49%,#c7c7c7 53%,#727272 62%,#727272 100%) -200% 50%/300% 100%;
 /* A repeated tile starts a second, unfinished gleam near the loop boundary.
    Keep a solid text-clipped base while the single gradient travels offscreen. */
 background-color:#727272;background-repeat:no-repeat;
 -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 animation:lock-shimmer 3.1s linear infinite;
}
.lock-knob{
 --lock-knob-bevel:0 1px 3px #000a,inset 0 0 0 1px #ffffff60,inset 0 -1px 0 #f5f5f57d;
 position:absolute;top:2px;bottom:2px;left:2px;width:var(--lock-knob-width);
 display:grid;place-items:center;padding:0;border-radius:10px;
 border:1px solid #d5d7d9;border-top-color:#fff;border-bottom-color:#979b9e;
 background:linear-gradient(#fff 0%,#f4f5f5 47%,#d8dbdd 50%,#b7bbbe 100%);
 box-shadow:var(--lock-knob-bevel);
 transform:translate3d(var(--lock-drag),0,0);touch-action:none;cursor:grab;
}
.lock-knob:disabled{opacity:1;cursor:wait}
.lock-knob:active{cursor:grabbing}
.lock-knob:focus-visible{outline:2px solid #fff;outline-offset:4px;box-shadow:0 0 0 5px #24374799}
/* Prevent the initial programmatic focus from carrying keyboard modality into
   a pointer drag. Keep the original bevel and the keyboard focus rule above. */
.lockscreen[data-input="pointer"] .lock-knob:focus{outline:none;box-shadow:var(--lock-knob-bevel)}
.lock-knob svg{width:49%;height:62%;fill:#8e969b;filter:drop-shadow(0 1px 0 #fff);overflow:visible}
body[data-entry-state="dragging"] .lock-label,body[data-entry-state="unlocking"] .lock-label{animation-play-state:paused}
/* The opaque overlay masks a normally rendered, inert shell. This lets its
   visible lazy images load before the reveal rather than popping in afterward. */
body[data-entry-state="unlocking"] #shell{pointer-events:none}
body[data-entry-state="unlocking"] .lockscreen{background:transparent}
@keyframes lock-shimmer{0%,12%{background-position:100% 50%}82%,100%{background-position:-100% 50%}}
/* Wide landscape uses the iPad's compact, centered slider and shallow bars.
   Portrait tablets retain the phone composition; no device sniffing. */
@media(min-width:720px) and (orientation:landscape){
 .lockscreen{--lock-top-height:106px;--lock-bottom-height:104px;--lock-track-width:266px;--lock-track-height:54px;--lock-knob-width:65px}
 .lock-time{font-size:72px;letter-spacing:-2px}
 .lock-date{font-size:17px;padding-bottom:4px}
 .lock-label{font-size:23px;letter-spacing:-.5px}
}
@media(max-height:500px) and (orientation:landscape){
 .lockscreen{--lock-top-height:76px;--lock-bottom-height:78px;--lock-track-width:256px;--lock-track-height:50px;--lock-knob-width:62px}
 .lock-time{font-size:50px}.lock-date{font-size:14px}.lock-label{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.lock-label{animation:none;background-position:45% 50%}}
@media(forced-colors:active){.lock-label{-webkit-text-fill-color:CanvasText;background:none}.lock-knob{border:2px solid ButtonText}.lock-knob svg{fill:ButtonText;filter:none}}