@font-face { font-family: 'Courier Prime'; font-weight: 400; font-display: block; src: url(../fonts/courier-prime-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-weight: 700; font-display: block; src: url(../fonts/courier-prime-latin-700-normal.woff2) format('woff2'); }
:root { --bone: #E8E2D2; --ink: #030303; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--ink); color: var(--bone); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
html { scrollbar-width: none; } ::-webkit-scrollbar { display: none; }
body { overflow-x: hidden; }
#scroller { position: relative; width: 1px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(90% 60% at 50% 40%, #0D0D0C 0%, #060606 60%, #030303 100%); }
.spot { position: absolute; left: 50%; top: -18vh; width: 150vw; height: 95vh; transform: translateX(-50%); pointer-events: none; opacity: 0;
  background: radial-gradient(50% 60% at 50% 0%, rgba(232,226,210,.065), rgba(232,226,210,0) 70%); }

/* the word */
#lkwrap { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
#lockup { position: absolute; will-change: transform, opacity; }
#lockup .gl { position: absolute; top: 0; overflow: visible; will-change: transform, opacity, filter; }
#keybox { position: absolute; }
#key3d { display: block; width: 100%; height: 100%; overflow: visible; }
.hint { position: absolute; bottom: 38px; left: 50%; width: 1px; height: 40px; margin-left: -.5px; overflow: hidden; pointer-events: none; }
.hint i { position: absolute; left: 0; top: 0; width: 1px; height: 40px; background: linear-gradient(transparent, rgba(232,226,210,.7), transparent); }

/* evidence bags */
.bw { position: absolute; left: 50%; top: 46%; width: 290px; height: 360px; margin: -180px 0 0 -145px; will-change: transform, opacity, filter; opacity: 0; pointer-events: none; }
.shadow { position: absolute; left: 50%; width: 230px; height: 30px; margin-left: -115px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.7), rgba(0,0,0,0)); filter: blur(6px); }
.bag { width: 290px; height: 360px; position: relative; transform-style: preserve-3d; will-change: transform; }
.bag > .item, .bag > .body, .bag > .strip, .bag > .tearline { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.back { position: absolute; inset: 0; transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; }
.back .strip { pointer-events: none; }
.hit { position: absolute; left: 0; top: 48px; width: 290px; height: 312px; z-index: 5; touch-action: pan-y; cursor: grab; }
.iw { position: relative; }
.iw img { width: 100%; }
.v3d { position: absolute; opacity: 0; pointer-events: none; }
.item { position: absolute; left: 50%; top: 57%; transform: translate(-50%, -50%); z-index: 1; will-change: transform, filter; }
.item img, .flyer img, .mini img { display: block; height: auto; pointer-events: none; -webkit-user-drag: none; }
.body { position: absolute; left: 0; top: 48px; width: 290px; height: 312px; z-index: 2; overflow: visible; pointer-events: none; }
.strip { position: absolute; left: 0; top: 0; width: 290px; height: 48px; z-index: 3; touch-action: none; cursor: grab; outline: none; }
.strip:active { cursor: grabbing; }
.strip .half { position: absolute; inset: 0; pointer-events: none; }
.strip svg { display: block; overflow: visible; }
.tearline { position: absolute; left: 0; top: 42px; z-index: 3; overflow: visible; pointer-events: none; }
.flyer { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: 20; will-change: transform; }
.tray { position: absolute; left: 50%; bottom: calc(7vh + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 12px; opacity: 0; pointer-events: none; }
.slot { width: 46px; height: 58px; border-radius: 7px; border: 1px solid rgba(232,226,210,.09); position: relative; }
.slot .mini { position: absolute; left: 50%; top: 50%; opacity: 0; }
.minibag { width: 30px; height: 37px; border-radius: 2px 2px 4px 4px; border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.05); position: relative; }
.minibag::after { content: ''; position: absolute; left: 10px; top: 5px; width: 9px; height: 4px; background: #D9D2C2; opacity: .85; border-radius: 1px; }

/* the end */
#endwrap { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 44px; opacity: 0; pointer-events: none; }
#endwrap svg.lock { width: 150px; height: auto; overflow: visible; }
.cbtn { width: 54px; height: 54px; border-radius: 27px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(232,226,210,.2);
  transition: background-color .5s ease, border-color .5s ease; }
.cbtn:hover, .cbtn:focus-visible { background: rgba(232,226,210,.08); border-color: rgba(232,226,210,.35); outline: none; }
.cbtn svg { width: 20px; height: 20px; }

/* the screen it is all seen through */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#grain { display: none; }
.scan { display: none; }
.vig { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 46%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%); }

@media (min-width: 900px) {
  .tray { gap: 18px; bottom: 6vh; } .slot { width: 64px; height: 80px; }
  #endwrap svg.lock { width: 200px; }
}