/* Holding page. Values are taken from the design export in design/holding-page-desktop.html;
   at a 1440x900 viewport this renders the same frame. Below that the lockup scales with the
   viewport width and site.js regenerates the tile field for the space available. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/fonts/geist-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;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #FFFFFF; }

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #0B0B14;
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 320px;
  overflow: hidden;
  background: #FFFFFF;
}

.field { position: absolute; left: 0; top: 0; }

.centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

/* 548px is the lockup's width at the design's 72px wordmark; 48px keeps a 24px margin each side. */
.lockup {
  display: flex;
  align-items: center;
  font-size: min(72px, calc((100vw - 48px) * 72 / 548));
  gap: 0.2778em;
}

.mark { width: 1.2222em; height: 1.2222em; flex-shrink: 0; }

.wordmark {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  padding-bottom: 0.1111em;
  white-space: nowrap;
}
.wordmark .ink { color: #0B0B14; }
.wordmark .accent { color: #7C3AED; }

.pill {
  padding: 12px 18px 12px 20px;
  border-radius: 2px;
  background: #F1EFF7;
  font-family: 'Geist', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0B0B14;
}

.nojs {
  max-width: 34em;
  padding: 0 24px;
  text-align: center;
  font-family: 'Geist', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #3A3946;
}

.foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 35px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.2em;
  font-family: 'Geist', "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #3A3946;
}

.pi-tile { position: absolute; width: var(--tile, 16px); height: var(--tile, 16px); border-radius: 2px; background: #F1EFF7; }

.pi-cell {
  position: absolute;
  width: var(--tile, 16px);
  height: var(--tile, 16px);
  border-radius: 2px;
  opacity: 0;
  animation-name: pi-blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
}
.pi-cell.pi-static { animation: none; opacity: 1; }

@keyframes pi-blink {
  0%, 100% { opacity: 0; }
  18%, 58% { opacity: 1; }
  76% { opacity: 0; }
}

.pi-halo {
  position: absolute;
  width: var(--tile, 16px);
  height: var(--tile, 16px);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s cubic-bezier(0.3, 0, 0.2, 1);
}

.pi-rise { animation: pi-rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.pi-rise-2 { animation-delay: 0.18s; }

@keyframes pi-rise {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-cell { animation: none; opacity: 1; }
  .pi-halo { transition: none; }
  .pi-rise { animation: none; }
}