/* Pointer Break marketing site.
   Hand-authored: there is no build step, so what is here is what ships.
   Every colour, size and duration comes from the design handoff. Deck yellow
   (#f2dc59) and wheel blue (#2a9eeb) are the app renderer's own values, so
   they are exact. The palette was audited at WCAG AA — if the ground is
   darkened or the panels lightened, re-audit the small mono type. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('fonts/instrument-sans-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Gabarito';
  src: url('fonts/gabarito-variable.woff2') format('woff2');
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-variable.woff2') format('woff2');
  font-weight: 400 500;
  font-display: swap;
}

:root {
  --ground: #2b5fa8;
  --panel: #366dba;
  --ink: #f2f6fb;
  --ink-2: #e0ebf7;
  --ink-label: #eef4fb;
  --ink-panel: #f4f8fd;
  --link: #dcefff;
  --accent: #f2dc59;
  --accent-light: #ffeaa0;
  --button-ink: #17170f;
  --wheel: #2a9eeb;
  --rule-bright: rgba(255, 255, 255, 0.26);
  --rule: rgba(255, 255, 255, 0.2);
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Gabarito', var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Skatter, the wordmark face in the handoff, is not bundled: its commercial
     licence is unconfirmed. Add it to the front of this stack to swap it in. */
  --wordmark: var(--display);
  --band: 104px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The light sits above the board rather than filling the page, so the blue
   reads as lit. It is on this element, not body, so overscroll stays flat. */
.page {
  min-height: 100vh;
  background: radial-gradient(120% 70% at 50% -8%, #5793dc 0%, #3a78c6 30%, #2b5fa8 62%, #204a8d 100%);
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible,
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding: 22px 0;
}

.brand,
.nav a,
.cta-note,
.shot figcaption,
.file-name,
.footer,
.spec dt,
.spec dd,
.mechanics dt,
.tag {
  font-family: var(--mono);
}

.brand {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--ink-label);
}

.nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nav a { font-size: 11.5px; letter-spacing: 0.08em; color: var(--ink-label); }
.nav a.nav-accent { color: var(--link); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px 44px;
  padding: 30px 0 40px;
}

.hero-copy { flex: 1 1 340px; }
.hero-media { flex: 1 1 440px; min-width: 0; }

.board-stage {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-glow {
  position: absolute;
  width: min(300px, 80vw);
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 226, 255, 0.30) 0%, rgba(191, 226, 255, 0.10) 42%, rgba(191, 226, 255, 0) 68%);
  pointer-events: none;
}

/* The board is a sprite walk, not a canvas or a JS timer: it is
   compositor-driven, so a busy main thread cannot starve it, and the page
   needs no JavaScript at all. The atlas is 32 flip columns by 8 shove rows of
   256px cells, drawn at 200px — background-size is cols x 200 by rows x 200.
   Flip fast, shove eight times slower, so the same silhouette never repeats
   twice in a row. */
.board {
  position: relative;
  width: 200px;
  height: 200px;
  background-image: url('media/board-atlas.png');
  background-size: 6400px 1600px;
  background-repeat: no-repeat;
  animation: flip 1.8s steps(32) infinite, shove 14.4s steps(8) infinite;
}

@keyframes flip { to { background-position-x: -6400px; } }
@keyframes shove { to { background-position-y: -1600px; } }

.wordmark {
  font-family: var(--wordmark);
  font-size: clamp(40px, 6.6vw, 82px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.005em;
  margin: 0;
}

.hero-text {
  max-width: 42ch;
  margin-top: 18px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.cta-note { font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink-label); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 14px 24px;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff0a8 0%, #f2dc59 46%, #d9c247 100%);
  color: var(--button-ink);
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 24px rgba(12, 26, 48, 0.38);
}

.button:hover { background: #ffe97a; color: var(--button-ink); }

/* The listing does not exist yet, so this one is a statement, not a link. */
.button-waiting {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%);
  color: var(--ink);
  border: 1px solid var(--rule-bright);
  box-shadow: none;
  cursor: default;
}

/* ── Panels ──────────────────────────────────────────────────────────────── */

.panel {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(0, 0, 0, 0.10) 100%),
    var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 18px 40px rgba(12, 26, 48, 0.42);
  overflow: hidden;
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
}

.dots { display: inline-flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #8fb8e8; }
.file-name { font-size: 11.5px; color: var(--ink-label); }

.video-body { position: relative; aspect-ratio: 16 / 9; }

/* The clip and its still occupy the same box, and exactly one of them is
   displayed — see the reduced-motion block at the end of this file. The dark
   background is what shows while the poster is still being fetched, so it
   matches the panel rather than flashing white. */
.clip,
.clip-still {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: #24508f;
}

.clip-still { display: none; }

/* ── Screenshots ─────────────────────────────────────────────────────────── */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
  padding: 14px 0 0;
}

.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 12px 28px rgba(12, 26, 48, 0.34);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The captions sit on a photograph of a desktop now, so they need their own
   ground rather than relying on whatever happens to be behind them. */
.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 12px 12px;
  font-size: 11px;
  color: var(--ink-panel);
  background: linear-gradient(180deg, rgba(10, 24, 46, 0) 0%, rgba(10, 24, 46, 0.72) 62%, rgba(10, 24, 46, 0.86) 100%);
}

/* ── Features ────────────────────────────────────────────────────────────── */

/* flex-wrap, not grid: with five cards a grid leaves a phantom empty cell on
   the second row and the top border rules stop short. */
.features {
  display: flex;
  flex-wrap: wrap;
  gap: 36px 32px;
  padding: var(--band) 0 0;
}

.card {
  flex: 1 1 230px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--rule-bright);
  padding-top: 14px;
}

.tag {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--accent-light);
}

.card-title {
  margin: 0;
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.card-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ── How it works, and Get it ────────────────────────────────────────────── */

.how,
.get {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 48px;
  padding: var(--band) 0 0;
}

.get { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

.head {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.prose {
  margin: 0 0 16px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

.mechanics,
.spec { margin: 0; display: flex; flex-direction: column; }
.mechanics { gap: 12px; }
.spec { gap: 10px; }

.mechanics .row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 11px;
}

.mechanics dt { font-size: 12.5px; color: var(--link); }
.mechanics dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.spec .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 7px;
}

.spec dt { font-size: 12.5px; color: var(--ink-label); }
.spec dd { margin: 0; font-size: 12.5px; color: var(--ink); text-align: right; }

.fine { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-2); }
.fine code { font-family: var(--mono); }

.rough { display: flex; flex-direction: column; gap: 16px; }
.rough article { border-left: 2px solid var(--wheel); padding-left: 14px; }
.rough h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; }
.rough p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: var(--band);
  padding: 20px 0 44px;
  border-top: 1px solid var(--rule-bright);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-label);
}

.notfound { padding: 80px 0 120px; }

/* The board animation is decorative, so it stops entirely when asked, holding
   frame 0: level, nose right, which is the shape the wordmark sits next to in
   the design. The gameplay clip autoplays, and no CSS can reach that attribute,
   so the clip is removed from the page altogether and its poster shown in its
   place — the visitor still sees the board, it simply does not move. */
@media (prefers-reduced-motion: reduce) {
  .board { animation: none; background-position: 0 0; }
  .clip { display: none; }
  .clip-still { display: block; }
}