/* matterbox.work — one typeface, one grid, and a scene behind it all. */

@font-face {
  font-family: "IosevkaTerm Web";
  src: url("../fonts/iosevka-term-regular.3e40d13e.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IosevkaTerm Web";
  src: url("../fonts/iosevka-term-bold.388d3b1d.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --mono: "IosevkaTerm Web", "IosevkaTerm Nerd Font Mono", "Iosevka Term",
    "Iosevka", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* The scene's own palette, so the page and the background agree. */
  --sky: #06040f;
  --ink: #0d0a1a;
  --panel: #120e22;
  --panel-2: #171232;
  --line: #2b2350;
  --fg: #cdc7dd;
  --fg-dim: #8b849f;
  --cyan: #36ece0;
  --pink: #ff5cc6;
  --magenta: #ff3d7f;
  --sun: #ffd21e;

  --measure: 74ch;
  --pad: clamp(1.25rem, 4vw, 3rem);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--sky);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(14px, 0.55vw + 12px, 17px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --- the scene ---------------------------------------------------------- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Nearest-neighbour all the way up: the scene is drawn at a fraction of the
     screen's resolution and its pixels are meant to be seen. */
  image-rendering: pixelated;
}
#scene[hidden] {
  display: none;
}

/* Shown instead of the canvas when WebGL2 is missing: the same sky, still. */
.scene-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 42% at 50% 46%, rgba(255, 61, 127, 0.45), transparent 70%),
    linear-gradient(#06040f 0%, #120a2e 48%, #100a26 52%, #06040f 100%);
}

/* Fades the scene out under the page content as it scrolls up over it. */
#veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--sky);
  opacity: 0;
}

/* --- chrome ------------------------------------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad);
  background: linear-gradient(rgba(6, 4, 15, 0.72), rgba(6, 4, 15, 0));
}

.wordmark {
  color: var(--fg);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wordmark::before {
  content: "$ ";
  color: var(--cyan);
}

nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(13, 10, 26, 0.6);
  color: var(--fg);
  text-decoration: none;
  backdrop-filter: blur(6px);
}
nav a:hover,
nav a:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
}
nav svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  flex: none;
}
@media (max-width: 34rem) {
  nav a .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* --- hero --------------------------------------------------------------- */

main {
  position: relative;
  z-index: 2;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad) clamp(2rem, 8vh, 5rem);
}
/* The scene runs its wireframe straight through the copy. A full-bleed well of
   the sky's own colour puts the text back in front of it — edge to edge, so
   there is no box to see. */
.hero::before {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  pointer-events: none;
  background: linear-gradient(
    rgba(6, 4, 15, 0) 0%,
    rgba(6, 4, 15, 0.55) 28%,
    rgba(6, 4, 15, 0.86) 60%,
    rgba(6, 4, 15, 0.94) 100%
  );
}

.hero-inner {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
  text-align: center;
  position: relative;
}

.hero h1 {
  /* The scene draws the name; this is the line under it. */
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 1.4rem;
  color: #e7e3f2;
}
.hero h1 b {
  color: var(--cyan);
  font-weight: 700;
}

.cmd {
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(13, 10, 26, 0.82);
  backdrop-filter: blur(8px);
  text-align: left;
}
.cmd code {
  font: inherit;
  white-space: nowrap;
  overflow-x: auto;
}
.cmd .prompt {
  color: var(--pink);
}

button.copy {
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 2px;
  background: none;
  color: var(--fg-dim);
  padding: 0 0.4rem;
}
button.copy:hover,
button.copy:focus-visible {
  color: var(--cyan);
  border-color: var(--line);
}

.hero-note {
  margin: 0.9rem 0 0;
  color: var(--fg-dim);
  font-size: 0.85em;
}

.scroll-cue {
  margin: clamp(1.25rem, 5vh, 2.5rem) 0 0;
  color: var(--fg);
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 10px rgba(6, 4, 15, 0.95);
}
.scroll-cue span {
  display: inline-block;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.35em); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span {
    animation: none;
  }
}

/* --- page body ---------------------------------------------------------- */

.page {
  position: relative;
  background: var(--sky);
  border-top: 1px solid var(--line);
  box-shadow: 0 -40px 80px rgba(6, 4, 15, 0.9);
}

section {
  padding: clamp(3rem, 9vh, 6rem) var(--pad);
}
section + section {
  border-top: 1px solid var(--line);
}

.wrap {
  max-width: 78rem;
  margin-inline: auto;
}
.prose {
  max-width: var(--measure);
}

h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  margin: 0 0 0.4rem;
  color: #fff;
}
h2::before {
  content: "## ";
  color: var(--pink);
  font-weight: 400;
}
h3 {
  font-size: 1em;
  margin: 2rem 0 0.4rem;
  color: var(--cyan);
}
h3::before {
  content: "### ";
  color: var(--line);
}

.lede {
  color: var(--fg-dim);
  margin: 0 0 2rem;
  max-width: var(--measure);
}

p {
  margin: 0 0 1rem;
}
a {
  color: var(--cyan);
}
a:hover {
  color: var(--pink);
}

code {
  font-family: var(--mono);
  color: var(--sun);
  background: rgba(255, 210, 30, 0.07);
  padding: 0 0.3ch;
  border-radius: 2px;
}

.sh-wrap {
  position: relative;
  margin: 0 0 1rem;
}
.sh-wrap button.copy {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  opacity: 0;
  background: var(--panel);
}
.sh-wrap:hover button.copy,
.sh-wrap button.copy:focus-visible {
  opacity: 1;
}

pre.sh {
  margin: 0;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  line-height: 1.55;
}
pre.sh code {
  background: none;
  color: var(--fg);
  padding: 0;
}
pre.sh .prompt {
  color: var(--pink);
  user-select: none;
}
pre.sh .c {
  color: var(--fg-dim);
}

/* --- the screenshot ----------------------------------------------------- */

.shot {
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--fg-dim);
  font-size: 0.8em;
}
.shot-bar i {
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}
.shot-bar i:first-child { background: #ff5f57; }
.shot-bar i:nth-child(2) { background: #febc2e; }
.shot-bar i:nth-child(3) { background: #28c840; }
.shot-bar .title {
  margin-left: 0.75ch;
}

/* One character cell is half an em wide and a whole em tall, which is the 2:1
   a terminal draws. Sizing the type off the container width therefore makes the
   frame fill it exactly at --cols columns, at any width. */
pre.tui {
  --tui-pad: 0.6em;
  position: relative;
  margin: 0;
  padding: var(--tui-pad) 0;
  font-family: var(--mono);
  font-size: calc(200cqw / var(--cols));
  line-height: 1;
  white-space: pre;
  color: var(--fg);
  background: var(--ink);
  tab-size: 8;
  overflow: hidden;
}
/* An image the terminal drew over its placeholder cells, put back: the outer
   span is the window those cells left after the pane scrolled, the img inside
   is the whole picture at one image cell per text cell, shifted so the right
   crop shows through. */
pre.tui .kimg {
  position: absolute;
  overflow: hidden;
}
pre.tui .kimg img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Emoji come from the system font and are not on our grid; a terminal gives
   them two columns, so pin them to two. */
pre.tui .w2 {
  display: inline-block;
  width: 1em; /* two cells */
  font-style: normal;
  overflow: hidden;
  vertical-align: top;
}

.shot .narrow { display: none; }
@media (max-width: 60rem) {
  .shot .wide { display: none; }
  .shot .narrow { display: block; }
}

.shot-note {
  margin: 0.75rem 0 0;
  color: var(--fg-dim);
  font-size: 0.85em;
}

/* --- features ----------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.grid article {
  background: var(--ink);
  padding: 1.3rem 1.4rem;
}
.grid h3 {
  margin: 0 0 0.4rem;
}
.grid h3::before {
  content: none;
}
.grid p {
  margin: 0;
  color: var(--fg-dim);
}

/* --- tables ------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92em;
}
th,
td {
  text-align: left;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  color: var(--cyan);
  font-weight: 700;
  white-space: nowrap;
}
tr:last-child td {
  border-bottom: none;
}
td:first-child {
  white-space: nowrap;
  color: var(--sun);
}

/* --- footer ------------------------------------------------------------- */

footer {
  position: relative;
  z-index: 2;
  background: var(--sky);
  border-top: 1px solid var(--line);
  padding: 2.5rem var(--pad) 3.5rem;
  color: var(--fg-dim);
}
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}
footer a {
  color: var(--fg);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--pad);
  top: 0.6rem;
  z-index: 50;
  background: var(--panel);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cyan);
  border-radius: 3px;
}