/* Fixed typography: Pixel for the status, Mono for the credits. */
@font-face {
  font-family: 'Geist Mono';
  src: url('assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Pixel';
  src: url('assets/fonts/GeistPixel-Variable.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
:root { --pixel-shape: 0; }
.coming-soon {
  font-family: 'Geist Pixel', monospace;
  font-variation-settings: 'ELSH' var(--pixel-shape);
  animation: status-fade .8s ease .2s both;
  text-shadow: none;
  background: none;
  color: #59636f;
}
footer {
  color: #626872;
  opacity: .65;
  font-family: 'Geist Mono', monospace;
  font-size: clamp(9px, 2.8vw, 12px);
  justify-self: stretch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  column-gap: 16px;
}
footer .credits { margin: 0; }
footer .legal {
  font-size: clamp(8.5px, 2.2vw, 10px);
  letter-spacing: .04em;
  text-decoration: none;
}
footer .legal:first-child { justify-self: start; }
footer .legal:last-child { justify-self: end; }
/* Narrow screens: the credits keep their single line, the legal links sit centred beneath. */
@media (max-width: 600px) {
  footer { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 2px; }
  footer .credits { grid-column: 1 / -1; grid-row: 1; }
  footer .legal { grid-row: 2; }
  footer .legal:first-child { justify-self: end; }
  footer .legal:last-child { justify-self: start; }
}

/* The status resolves first (status.js); the assembly starts after it.
   Without JavaScript it simply fades in. */
@keyframes status-fade { from { opacity: 0; } to { opacity: 1; } }
.coming-soon.is-scrambled { position: relative; animation: none; }
.status-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.status-glyphs { display: inline-block; white-space: nowrap; }
.status-slot { display: inline-block; text-align: center; }
.status-slot.is-idle, .is-pending .status-slot { color: transparent; }
.status-slot.is-noise { color: #3f4955; }
.status-slot.is-locked { animation: status-lock .7s ease-out both; }
@keyframes status-lock { from { color: #b4c6d6; } to { color: #59636f; } }
.status-caret {
  position: absolute;
  top: 50%;
  left: 0;
  width: .5em;
  height: .95em;
  margin-top: -.5em;
  margin-left: .08em;
  background: #768da9;
  opacity: 0;
  pointer-events: none;
}
.is-typing .status-caret { opacity: .75; }
.is-resolved .status-caret { animation: status-caret-out .9s ease-out both; }
@keyframes status-caret-out { 0%, 35% { opacity: .75; } 100% { opacity: 0; } }
.emblem { animation-delay: 1.8s, 5.6s; }
.assembly path { animation-delay: 1.8s; }
.assembly path:first-child { animation-delay: 2.1s; }
.presence { animation-delay: 2.8s; }
.presence::before { animation-delay: 3.1s, 7.8s; }
.wordmark { animation-delay: 3.65s; }
footer { animation-delay: 4.8s; }
@keyframes footer-arrive { from { opacity: 0; } to { opacity: .65; } }
footer:focus-within { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .coming-soon { animation: none; }
}