/* The viewfinder nav: mono links on a black page, the brackets of a camera's focus frame and its shutter. */
:root {
  --page: #000000;          /* the page */
  --text: #f2f2f0;          /* the current link, and the one in focus */
  --muted: #8b8e94;         /* the other links */
  --hunt: #ffffff;          /* the frame while it looks for focus */
  --lock: #4dff88;          /* the frame once in focus */
  --ghost: #4a4d53;         /* the faint frame left on the current link */
  --arm: 9px;               /* how long the arms of the brackets are */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Spline Sans Mono Variable', ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

.vf {
  position: relative;
  font-size: clamp(12px, 1.45vw, 16px);
}

.vf__list {
  position: relative;
  display: flex;
  gap: clamp(4px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.vf__link {
  display: block;
  padding: 15px clamp(9px, 1.5vw, 16px);
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.vf__link span {
  display: block;
}

.vf__link[aria-current='page'],
.vf__link.is-focus {
  color: var(--text);
}

.vf__link:focus {
  outline: none;
}

/* the keys: besides the focus frame, a dashed outline round the link that has the focus */
.vf__link:focus-visible {
  outline: 1px dashed var(--muted);
  outline-offset: 2px;
}

/* the frames: boxes of four brackets, placed and sized by the script. Each on a layer of its own: moved and resized
   on the page, Safari leaves traces of the brackets behind */
.vf__frame {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}

.vf__frame i {
  position: absolute;
  width: var(--arm);
  height: var(--arm);
  border: 0 solid currentColor;
}

.vf__frame i:nth-of-type(1) {
  left: 0;
  top: 0;
  border-width: var(--line) 0 0 var(--line);
}

.vf__frame i:nth-of-type(2) {
  right: 0;
  top: 0;
  border-width: var(--line) var(--line) 0 0;
}

.vf__frame i:nth-of-type(3) {
  right: 0;
  bottom: 0;
  border-width: 0 var(--line) var(--line) 0;
}

.vf__frame i:nth-of-type(4) {
  left: 0;
  bottom: 0;
  border-width: 0 0 var(--line) var(--line);
}

.vf__frame--ghost {
  --line: 1px;
  color: var(--ghost);
}

.vf__frame--af {
  --line: 2px;
  color: var(--hunt);
  transition: color 0.12s linear;
}

.vf__frame--af.is-locked {
  color: var(--lock);
}

/* the light of the picture being taken, inside the frame */
.vf__flash {
  position: absolute;
  inset: -10px -14px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 55%, rgba(255, 255, 255, 0));
  opacity: 0;
}

/* the shutter: two black blades that close over the nav from above and below and open again */
.vf__shutter {
  position: absolute;
  inset: -8px -12px;
  pointer-events: none;
}

.vf__shutter i {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: var(--page);
  transform: scaleY(0);
}

.vf__shutter i:first-child {
  top: 0;
  transform-origin: 50% 0;
}

.vf__shutter i:last-child {
  bottom: 0;
  transform-origin: 50% 100%;
}