/* bankstack.ai — the holding page's stage: the homepage hero's black set, its
   glow and its particle mark (assets/holding.js), with two lines of text.
   No inline style anywhere: the CSP allows this file and nothing else. */

/* Archivo, served from the site (font-src 'self'): Google Fonts' latin file,
   variable in weight and width. SIL OFL 1.1; the licence is served beside it. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;
  --ink: #030409;
  --fg: #eef3fb;
  --blue-hot: #93c5fd;
  --blue-mid: #3b82f6;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* No film grain over the window: until 2026-11-05 a full-window layer showed as
   lines across the whole screen in Edge. */
.holding {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  text-align: center;
}

.holding::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 50% 36%, rgba(37, 99, 235, .30), transparent 60%),
    radial-gradient(700px 420px at 6% 105%, rgba(30, 64, 175, .24), transparent 70%);
}

/* The mark takes what the two lines leave, and never pushes them off a short screen. */
.field-wrap {
  position: relative;
  width: min(100%, 62vh, 680px);
  width: min(100%, 62svh, 680px);
  aspect-ratio: 1 / 1;
}

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 14px rgba(96, 165, 250, .55));
  cursor: crosshair;
  touch-action: none;
}

/* With no script the canvas stays empty: the mark itself, where the points would gather. */
.mark {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
}

h1 {
  position: relative;
  margin: clamp(4px, 1.5vh, 16px) 0 0;
  font-size: clamp(38px, min(7vw, 8vh), 76px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}

h1 i {
  font-style: normal;
  font-weight: 400;
  color: var(--blue-mid);
}

.tagline {
  position: relative;
  max-width: 24ch;
  margin: clamp(6px, 1.2vh, 12px) 0 0;
  color: var(--blue-hot);
  font-size: clamp(24px, min(4.4vw, 5.4vh), 50px);
  font-stretch: 62.5%;
  font-weight: 900;
  line-height: 1.04;
  text-shadow: 0 0 28px rgba(96, 165, 250, .55), 0 0 80px rgba(37, 99, 235, .45);
  text-wrap: balance;
}

@media (min-width: 720px) {
  .tagline { max-width: none; }
}