@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url(/fonts/plex-mono-400.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300; font-display: swap; src: url(/fonts/jost-300.woff2) format("woff2"); }

:root {
  --bar: 3.5rem; --pad: clamp(1rem, 3vw, 2rem); --ink: #000; --paper: #fff; --mute: .5;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Jost", "Futura", "Avenir Next", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fall: cubic-bezier(.55, 0, .85, .3);
  --dive: 14s; /* one loop of the dive: two rings */
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; font: 13px/1.4 var(--mono); letter-spacing: .01em; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; }

/* header: logo left, nav centre, sign in right */
header { position: sticky; top: 0; z-index: 10; height: var(--bar); padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
header .brand { justify-self: start; position: relative; display: block; line-height: 0; width: 28px; height: 28px; }
header .brand img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .3s; }
header .brand .alt { opacity: 0; }
header .brand .main { opacity: 1; }
header .brand:hover .main { opacity: 0; }
header .brand:hover .alt { opacity: 1; }
header nav { display: flex; gap: clamp(1.1rem, 4vw, 2.25rem); }
header .signin { justify-self: end; }

/* text links: faded; a hairline draws in on hover and stays under the current page */
header nav a, header .signin, footer a { position: relative; padding: .75rem 0; opacity: var(--mute); transition: opacity .25s; }
header nav a::after, header .signin::after, footer a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .55rem;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
header nav a:hover, header .signin:hover, footer a:hover, [aria-current="page"] { opacity: 1; }
header nav a:hover::after, header .signin:hover::after, footer a:hover::after, [aria-current="page"]::after { transform: scaleX(1); }

main { flex: 1; min-height: 0; }
footer { padding: .5rem var(--pad) .75rem; display: flex; justify-content: center; }

/* home: one screen, the mark contained by the space between header and footer */
body.home { height: 100dvh; }
body.home main { container-type: size; display: grid; place-items: center; padding: var(--pad); }
.logo { position: relative; display: block; line-height: 0; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.logo svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .4s; }
.logo .alt { opacity: 1; }
.logo .main { opacity: 0; }
.logo:hover .main { opacity: 1; }
.logo:hover .alt { opacity: 0; }

/* the dive: each ring is the last one shrunk by .78 and turned 6deg about the vanishing point,
   so scaling by 1/.78^2 and turning -12deg about it puts every ring where the one two further out was: a seamless loop */
.dive { transform-box: view-box; transform-origin: 222.69px 153.28px; animation: dive var(--dive) linear infinite; }
@keyframes dive {
  0% { transform: rotate(-0.00deg) scale(1.00000); }
  5% { transform: rotate(-0.60deg) scale(1.02516); }
  10% { transform: rotate(-1.20deg) scale(1.05095); }
  15% { transform: rotate(-1.80deg) scale(1.07739); }
  20% { transform: rotate(-2.40deg) scale(1.10449); }
  25% { transform: rotate(-3.00deg) scale(1.13228); }
  30% { transform: rotate(-3.60deg) scale(1.16076); }
  35% { transform: rotate(-4.20deg) scale(1.18996); }
  40% { transform: rotate(-4.80deg) scale(1.21990); }
  45% { transform: rotate(-5.40deg) scale(1.25059); }
  50% { transform: rotate(-6.00deg) scale(1.28205); }
  55% { transform: rotate(-6.60deg) scale(1.31430); }
  60% { transform: rotate(-7.20deg) scale(1.34737); }
  65% { transform: rotate(-7.80deg) scale(1.38127); }
  70% { transform: rotate(-8.40deg) scale(1.41601); }
  75% { transform: rotate(-9.00deg) scale(1.45164); }
  80% { transform: rotate(-9.60deg) scale(1.48816); }
  85% { transform: rotate(-10.20deg) scale(1.52559); }
  90% { transform: rotate(-10.80deg) scale(1.56397); }
  95% { transform: rotate(-11.40deg) scale(1.60332); }
  100% { transform: rotate(-12.00deg) scale(1.64366); }
}
/* first load: the rings surface from the abyss outward */
.logo .alt .dive path { animation: ring-in .9s var(--ease) both; animation-delay: calc(var(--d) * 1ms); }
.logo .alt .frame { animation: ring-in 1.2s var(--ease) .95s both; }
@keyframes ring-in { from { opacity: 0; } }

/* pages that are not built yet */
main.soon { display: grid; place-items: center; align-content: center; gap: 1.75rem; padding: var(--pad); }
main.soon .mark { width: clamp(72px, 14vmin, 120px); height: auto; }
main.soon p { margin: 0 -.32em 0 0; font: 300 13px/1 var(--display); letter-spacing: .32em; text-transform: uppercase; }
main.soon .dots i { font-style: normal; animation: dot 1.8s steps(1) infinite; }
main.soon .dots i:nth-child(2) { animation-delay: .3s; }
main.soon .dots i:nth-child(3) { animation-delay: .6s; }
@keyframes dot { 0%, 85% { opacity: 1; } 50% { opacity: .15; } }

/* page transitions: the header holds still while the page changes beneath it */
@view-transition { navigation: auto; }
header { view-transition-name: ff-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
/* into the mark: the page falls through its vanishing point; back home: the page surfaces out of it */
html:active-view-transition-type(dive)::view-transition-old(root) { transform-origin: var(--vx) var(--vy);
  animation: plunge .9s var(--fall) both, fade-out .35s .55s ease-in both; }
html:active-view-transition-type(dive)::view-transition-new(root) { animation: fade-in .4s .6s ease-out both; }
html:active-view-transition-type(surface)::view-transition-old(root) { animation: fade-out .25s ease-in both; }
html:active-view-transition-type(surface)::view-transition-new(root) { transform-origin: var(--vx) var(--vy);
  animation: plunge 1s var(--fall) reverse both, fade-in .35s ease-out both; }
@keyframes plunge { to { transform: rotate(-50deg) scale(8); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

@media (max-width: 480px) {
  header { gap: .5rem; font-size: 12px; }
  header nav { gap: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dive, .logo .alt .dive path, .logo .alt .frame, main.soon .dots i { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}