/* almaawali.fyi
   One focal point, 46% down the screen. The lock sits on it, the void opens from it,
   and the same caret types back from it. */

:root {
  /* the lock page: a blank page with four slots on it */
  --page: #ffffff;
  --ink: #171717;
  --rule: rgba(23, 23, 23, .24);
  --rule-hover: rgba(23, 23, 23, .38);
  --rule-next: rgba(23, 23, 23, .62);

  /* the void looks the same whichever theme you arrive from */
  --void-glow: #17181c;
  --void: #0a0a0c;
  --void-edge: #030304;
  --voice: #d7d8dc;
  --selection: rgba(104, 130, 172, .5);
  --dust: 222, 224, 230;
  --black: #000000;

  --ground: var(--page);

  --f-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --focal: 46%;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #121212;
    --ink: #e8e8e6;
    --rule: rgba(232, 232, 230, .2);
    --rule-hover: rgba(232, 232, 230, .34);
    --rule-next: rgba(232, 232, 230, .6);
    color-scheme: dark;
  }
}
/* once you're through, everything underneath is pure black */
:root.is-void { --ground: var(--black); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; touch-action: manipulation; /* fast taps on the black don't zoom */ }
html { overflow: hidden; background: var(--ground); }
body { overflow: hidden; background: var(--ground); color: var(--ink); -webkit-tap-highlight-color: transparent; }

@keyframes blink { 0%, 46% { opacity: 1 } 54%, 100% { opacity: 0 } }

/* ---------- the lock ---------- */
.lock {
  position: fixed; z-index: 2;
  left: 50%; top: var(--focal);
  translate: -50% -50%;
  -webkit-user-select: none; user-select: none;
}
.code {
  position: relative;
  display: flex;
  gap: .42em;
  font-family: var(--f-mono);
  font-weight: 300;
  font-size: clamp(34px, 8vw, 44px);
  line-height: 1;
  color: var(--ink);
}
.cell {
  --line: var(--rule);
  position: relative;
  display: grid;
  place-items: center;
  width: 1.08em;
  height: 1.5em;
}
.code:hover .cell { --line: var(--rule-hover); }
.code.is-focused .cell.is-next { --line: var(--rule-next); }
.code .cell.is-filled { --line: var(--ink); }
.cell::after {
  content: "";
  position: absolute;
  left: .06em; right: .06em; bottom: 0;
  height: 1.5px;
  border-radius: 1px;
  background: var(--line);
  transition: background-color .3s ease;
}
/* the caret */
.cell::before {
  content: "";
  position: absolute;
  left: 50%; top: .3em;
  width: 1.5px; height: .84em;
  margin-left: -.75px;
  background: var(--ink);
  opacity: 0;
}
.cell.is-caret::before { animation: blink 1.06s linear infinite; }
.digit { display: block; }

/* one real input lies over the four slots and takes every keystroke */
#pin {
  position: absolute; z-index: 1;
  left: -12px; top: -14px;
  width: calc(100% + 24px); height: calc(100% + 28px);
  margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent;
  font-size: 16px;
  -webkit-appearance: none; appearance: none;
  cursor: text;
}
#pin::selection { background: transparent; }

/* ---------- the void ----------
   #sky is drawn with WebGL (the black hole, then the dithered glow); the CSS gradient
   underneath only shows if WebGL isn't available. */
.void {
  position: fixed; inset: 0; z-index: 4;
  visibility: hidden;
  background: radial-gradient(125% 95% at 50% var(--focal), var(--void-glow) 0%, var(--void) 46%, var(--void-edge) 100%);
}
.void canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.is-entering .void, .is-void .void { visibility: visible; }

/* ---------- the voice: the same caret, typing back ---------- */
.voice {
  position: fixed; z-index: 5;
  left: 0; right: 0; top: var(--focal);
  translate: 0 -50%;
  padding-inline: 20px;
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  font-family: var(--f-mono);
  font-weight: 300;
  font-size: clamp(14px, .9vw + 10px, 18px); /* small, so the dark around it feels vast */
  line-height: 1.5;
  color: var(--voice);
}
.voice .ln { white-space: pre; min-height: 1.5em; }
.voice mark { background: var(--selection); color: inherit; }
.caret {
  display: inline-block;
  width: 1px; height: 1.08em;
  margin-right: -1px; /* takes no room, so the line stays centred */
  vertical-align: -.2em;
  background: var(--voice);
  animation: blink 1.06s linear infinite;
}
.caret.is-solid { animation: none; opacity: 1; }
.caret.is-away { visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.is-entering, .is-entering * { cursor: default; }
.is-void, .is-void * { cursor: none; }