/* yeknam studios: one black screen, black json, white balls. no scrolling, no selecting.
   type matches chrome's raw json view: font-family: monospace, 13px, normal weight. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; overscroll-behavior: none; }
html { height: 100vh; height: 100dvh; }
body { height: 100vh; height: 100dvh; color: #000; }
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
a { color: #000; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
a:focus-visible { color: #fff; outline: 1px solid #fff; outline-offset: 3px; } /* keyboard users can see focus */

/* the stage (and its white copy inside .lens) is exactly one viewport. the dot wave draws over the hidden text so the text never shows through it */
.flow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; touch-action: none; }
.blk {
  position: absolute; margin: 0;
  font-family: monospace; font-size: 13px; font-weight: normal; letter-spacing: normal;
  line-height: 2.2; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 46vw;
}
/* one span per line, hanging indent so wrapped strings line up under their key */
.blk.m { display: none; }
.ln { display: block; padding-left: var(--i); text-indent: calc(-1 * var(--i)); }

/* home: name + bio dead center, contact in a corner, the four names hidden (main.js scatters them) */
.ctr { left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(640px, calc(100vw - 40px)); }
.ct { left: 6vw; bottom: 6vh; }
.nm { line-height: 1.6; white-space: nowrap; max-width: none; }
.nm a { display: inline-block; padding: 6px 4px; margin: -6px -4px; } /* a slightly bigger tap target */
/* where the names sit without js; main.js moves them somewhere random on every load */
.nm-ian { left: 12vw; top: 18vh; } .nm-mark { right: 14vw; top: 22vh; }
.nm-jack { right: 10vw; bottom: 16vh; } .nm-franco { left: 30vw; bottom: 22vh; }

/* person pages: blocks spread over the screen */
.p-hi { left: 7vw; top: 9vh; }
.p-ab { right: 8vw; top: 30vh; }
.p-bk { left: 7vw; bottom: 8vh; }
.p-ft { right: 8vw; bottom: 8vh; }
.franco .p-ab, .jack .p-ab { right: 14vw; top: 42vh; }
/* ian has the projects too */
.big .p-hi { left: 6vw; top: 6vh; }
.big .p-ab { right: 6vw; top: 10vh; max-width: 40vw; }
.big .blk { line-height: 1.9; }
.big .p-b1 { left: 6vw; top: 27vh; max-width: 45vw; }
.big .p-b2 { right: 5vw; top: 38vh; max-width: 41vw; }
.big .p-b3 { left: 24vw; bottom: 12vh; max-width: 40vw; }
.big .p-bk { left: 6vw; bottom: 5vh; }
.big .p-ft { right: 6vw; bottom: 5vh; }

/* phones */
@media (max-width: 700px) {
  .blk { line-height: 1.85; max-width: calc(100vw - 40px); }
  .ct { left: 20px; bottom: 4dvh; }
  .ctr { left: 20px; right: 20px; transform: translateY(-50%); max-width: none; }
  .ln { padding-left: var(--im); text-indent: calc(-1 * var(--im)); }
  .nm-ian { left: 20px; top: 12dvh; } .nm-mark { right: 20px; top: 24dvh; }
  .nm-jack { right: 20px; bottom: 18dvh; } .nm-franco { left: 30px; bottom: 26dvh; }
  /* person pages just flow down the screen, evenly spaced */
  .person { display: flex; flex-direction: column; justify-content: space-evenly; padding: 3dvh 20px; box-sizing: border-box; }
  .person .blk { position: static; transform: none; max-width: none; }
  .person .p-ab, .person .p-b2, .person .p-ft { align-self: flex-end; }
  /* ian: the packed phone version of the same info */
  .big .blk.d { display: none; }
  .big .blk.m { display: block; align-self: stretch; line-height: 1.5; }
  .big { justify-content: center; gap: 0; }
}

/* the balls: a white copy of the stage, clipped to the balls' shapes by the js */
.lens { position: fixed; inset: 0; z-index: 2; background: #fff; pointer-events: none; overflow: hidden; clip-path: path("M0 0Z"); }
html.grabbing, html.grabbing * { cursor: grabbing !important; }
html.over-ball { cursor: grab; }

/* reduced motion: no balls flying around, so just show the text */
@media (prefers-reduced-motion: reduce) {
  body, a { color: #fff; }
  .lens { display: none; }
}

/* "visible": a link-looking button pinned to the bottom-right corner, always on top. flips the site white */
.vis { position: fixed; right: 6vw; bottom: 6vh; z-index: 3; margin: 0; padding: 6px 4px; border: 0; background: none;
  font: 13px/1 monospace; color: #fff; text-decoration: underline; cursor: pointer; mix-blend-mode: difference; }
.vis:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) { .vis { right: 20px; bottom: 4dvh; } }
html.light, html.light body { background: #fff; }
html.light body, html.light a { color: #000; }
html.light .lens { display: none; }
html.light, html.light * { cursor: auto; }
html.light a, html.light .vis { cursor: pointer; }