/* One swarm of points sits behind the whole page (the #swarm canvas, drawn by
   app.js) and re-forms into a new shape for every screen. The page is a
   single light theme; the product screens flip ground and ink. */

/* Fonts: self-hosted, latin subset only. The unicode-range is what Google
   Fonts serves for the same subset, so glyphs outside it (the arrows in the
   notes, for one) fall back exactly as they did in the prototype. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-v9-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/dm-mono-v16-latin-400.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens */
:root {
  --ground: #F1FF90;
  --ink: #0A0A0A;
  --ink-70: color-mix(in srgb, var(--ink) 74%, transparent);
  --ink-20: color-mix(in srgb, var(--ink) 24%, transparent);
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(16px, 4vw, 56px);
  --nav-height: calc(76px + env(safe-area-inset-top, 0px));
  color-scheme: light;
}
/* app.js sets this while a product screen is in view. The same two colours,
   swapped; the canvas crossfades between them in step. */
:root.products {
  --ground: #0A0A0A;
  --ink: #F1FF90;
}

/* Base */
* { box-sizing: border-box; }
html { background: var(--ground); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body, nav, .rail a, .brand i { transition: color .5s, border-color .5s, background-color .5s; }
a { color: inherit; }
em { font-style: normal; color: var(--ink-70); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#swarm { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: pan-y; }

/* Nav */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) var(--gutter) 20px;
  /* The bar spans the viewport but only its children should catch clicks,
     so the canvas underneath still gets pointer events. Same for main. */
  pointer-events: none;
}
nav > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; letter-spacing: -.01em; }
.brand i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink); position: relative; overflow: hidden; }
.brand i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.35); } }
.tagline { color: var(--ink-70); }

/* Section rail */
.rail {
  position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 10;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.rail a { display: block; height: 1.5px; width: 14px; background: var(--ink-20); position: relative; transition: width .5s cubic-bezier(.2,.8,.2,1), background .3s; }
.rail a::before { content: ""; position: absolute; inset: -8px -4px; }
.rail a.on { width: 40px; background: var(--ink); }

/* Screens: one viewport each, copy pinned to the left */
main { position: relative; z-index: 1; pointer-events: none; }
main a, main button { pointer-events: auto; }
.screen { min-height: 100svh; height: 100svh; display: flex; align-items: center; padding-inline: var(--gutter); }
.copy { max-width: min(36ch, 38vw); display: flex; flex-direction: column; gap: 18px; }
.copy .k { color: var(--ink-70); display: flex; gap: 14px; }
.copy h2 {
  margin: 0;
  font-weight: 400;
  font-size: calc(1.08 * clamp(44px, 5.6vw, 88px));
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.copy h2.big { font-size: calc(1.08 * clamp(64px, 10vw, 168px)); line-height: .88; letter-spacing: -.045em; }
.copy p { margin: 0; color: var(--ink-70); font-size: clamp(15px, 1.15vw, 17px); max-width: 38ch; }
.copy .note { color: var(--ink); }
/* Heading words rise into place when their screen becomes the current one */
.w { display: inline-block; transform: translateY(.25em); opacity: .35; transition: transform .9s cubic-bezier(.2,.8,.1,1), opacity .9s; }
.on .w { transform: none; opacity: 1; }

/* Hero */
.hero { align-items: flex-end; padding-bottom: clamp(28px, 6vh, 56px); }
.hero-bar { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lede { margin: 0; font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; letter-spacing: -.015em; max-width: 24ch; text-wrap: balance; }
.scroll { display: flex; align-items: center; gap: 12px; color: var(--ink-70); }
.scroll i { width: 44px; height: 1.5px; background: var(--ink-20); position: relative; overflow: hidden; }
.scroll i::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: run 2s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Products */
.prod-intro .copy { max-width: min(60ch, 62vw); }
.plist { display: flex; flex-wrap: wrap; gap: 10px; }
.plist a { text-decoration: none; font-weight: 500; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ink); transition: background .3s, color .3s; }
.plist a:hover { background: var(--ink); color: var(--ground); }

.prod { justify-content: space-between; gap: clamp(24px, 5vw, 80px); }
.prod h2 { white-space: nowrap; }
.go { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; text-decoration: none; font-weight: 500; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--ground); transition: gap .3s; }
.go:hover { gap: 16px; }

/* The screenshot card. Shadows use the product ink, which is also the ground
   colour everywhere else, so they stay dark on both palettes. */
.shot {
  --shadow-ink: #F1FF90;
  margin: 0 clamp(0px, 4vw, 64px) 0 0;
  width: min(44vw, 640px); max-width: 100%; aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--shadow-ink) 14%, transparent),
              0 30px 80px -30px color-mix(in srgb, var(--shadow-ink) 50%, transparent);
  transform: translateY(24px) rotate(-1.2deg) scale(.96); opacity: .5;
  transition: transform 1.1s cubic-bezier(.2,.8,.1,1), opacity 1s;
  pointer-events: auto;
}
#s6 .shot { transform: translateY(24px) rotate(1.2deg) scale(.96); }
.prod.on .shot { transform: none; opacity: 1; }
.shot.wide { aspect-ratio: auto; height: auto; }
.shot img { display: block; width: 100%; height: auto; }


/* Contact */
.contact { position: relative; }
.contact .copy h2 { font-size: clamp(56px, 7.6vw, 124px); }
.mail { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mail code { font-family: var(--font-mono); font-size: clamp(14px, 1.4vw, 17px); user-select: all; border-bottom: 1px solid var(--ink); padding-bottom: 3px; word-break: break-all; }
.mail button {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--ground); border: 0; border-radius: 999px; padding: 9px 16px;
  cursor: pointer; transition: transform .3s;
}
.mail button:hover { transform: scale(1.06); }
.foot {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-70);
}

/* Narrow screens: copy drops to the bottom, the rail becomes a row of ticks,
   screenshots stack above the copy. */
@media (max-width: 760px) {
  .screen { align-items: flex-end; padding-bottom: clamp(64px, 12vh, 110px); }
  .copy { max-width: 100%; }
  .prod-intro .copy { max-width: 100%; }
  .rail { top: auto; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: none; flex-direction: row; align-items: center; }
  .rail a { width: 1.5px; height: 12px; }
  .rail a.on { width: 1.5px; height: 28px; }
  .hero { padding-bottom: 72px; }
  .hero-bar { flex-direction: column; align-items: flex-start; }
  .scroll { display: none; }
  .prod { flex-direction: column-reverse; justify-content: flex-end; align-items: stretch; padding-top: var(--nav-height); padding-bottom: 64px; gap: 46px; }
  .prod .copy { gap: 12px; }
  .shot { margin-right: 0; width: 100%; }
  .shot.wide { width: min(100%, calc(40svh * 1.6)); align-self: center; }
  .contact { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .w { transform: none; opacity: 1; }
  .shot { transform: none !important; opacity: 1; }
}