/* NOCLIP - camcorder viewfinder chrome, boot card and tape-cut flash. */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body { font-family:"Courier New",Courier,monospace; cursor:none; }
body.unlocked { cursor:default; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; }

#vf { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .5s; z-index:5;
  text-shadow:0 0 3px rgba(0,0,0,.9), 0 0 8px rgba(255,255,255,.25);
  color:#fdfdfd; font-size:15px; letter-spacing:1px; }
#vf.on { opacity:.92; }
#vf.glitch { animation:vfg .18s steps(2) infinite; }
@keyframes vfg { 0%{transform:translate(0,0)} 50%{transform:translate(2px,-1px)} 100%{transform:translate(-1px,1px)} }

.vf-corner { position:absolute; width:34px; height:34px; border:2px solid rgba(255,255,255,.75); }
.vf-corner.tl { top:26px; left:34px; border-right:0; border-bottom:0; }
.vf-corner.tr { top:26px; right:34px; border-left:0; border-bottom:0; }
.vf-corner.bl { bottom:26px; left:34px; border-right:0; border-top:0; }
.vf-corner.br { bottom:26px; right:34px; border-left:0; border-top:0; }

#vf-rec { position:absolute; top:30px; left:82px; display:flex; align-items:center; gap:9px; font-weight:bold; }
#vf-rec .dot { width:12px; height:12px; border-radius:50%; background:#e33; box-shadow:0 0 9px #e33; animation:blink 1.6s steps(1) infinite; }
@keyframes blink { 0%,55%{opacity:1} 56%,100%{opacity:.05} }

#vf-bat { position:absolute; top:30px; right:82px; display:flex; align-items:center; gap:8px; }
#bat-bar { display:inline-block; width:56px; height:13px; border:2px solid #fdfdfd; padding:1px; }
#bat-bar i { display:block; height:100%; width:100%; background:#fdfdfd; transition:width .4s; }
#vf-bat.low #bat-bar i, #vf-bat.low #bat-pct, #vf-bat.low #bat-lbl { background:#ff5a3c; color:#ff5a3c; }
#vf-bat.low #bat-lbl, #vf-bat.low #bat-pct { background:none; }

#vf-time { position:absolute; bottom:32px; right:82px; font-size:17px; }
#vf-date { position:absolute; bottom:32px; left:82px; font-size:17px; }
#vf-sig  { position:absolute; bottom:58px; left:82px; font-size:13px; opacity:.85; display:flex; gap:7px; align-items:center; }
#sig-bar { display:inline-block; width:70px; height:9px; border:1px solid rgba(253,253,253,.8); }
#sig-bar i { display:block; height:100%; width:0%; background:#fdfdfd; transition:width .6s; }
#vf-mode { position:absolute; bottom:58px; right:82px; font-size:13px; opacity:.85; }

#vf-warn { position:absolute; top:50%; left:0; right:0; text-align:center; font-size:20px; letter-spacing:4px;
  color:#ff5a3c; opacity:0; transform:translateY(-140px); }
#vf-warn.on { animation:warn 2.4s ease-out; }
@keyframes warn { 0%{opacity:0} 8%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

#vf-sub { position:absolute; left:0; right:0; bottom:104px; text-align:center; font-size:16px;
  letter-spacing:2px; opacity:0; transition:opacity .7s; color:#efeade; padding:0 12%; line-height:1.6; }
#vf-sub.on { opacity:.95; }

#hint { position:fixed; left:0; right:0; bottom:11px; text-align:center; z-index:7;
  color:rgba(240,236,220,.5); font-family:"Courier New",monospace; font-size:12px; letter-spacing:2px;
  transition:opacity 1s; pointer-events:none; }
#hint.gone { opacity:0; }

#tapecut { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; z-index:9; transition:opacity .12s; }
#tapecut.on { opacity:1; }

#boot { position:fixed; inset:0; z-index:10; background:#000; color:#cfcabb;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:26px; letter-spacing:9px; text-align:center; transition:opacity .8s; }
#boot small { display:block; font-size:12px; letter-spacing:5px; opacity:.5; margin-top:14px; }
#boot.gone { opacity:0; pointer-events:none; }

[hidden] { display:none !important; }