/* Why Arcade: shared tokens, type and pieces for every page.
   Brand (channels/why-arcade/identity.md): ink #121110, paper #F3F0E8, vermilion #FF4A1C (only ever the square).
   Jost for the wordmark and titles, Instrument Sans for words, Geist Mono for numbers and labels. Lowercase. */

@font-face { font-family: "Jost"; src: url("/assets/fonts/Jost.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/InstrumentSans.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #121110;
  --ink-0: #0b0a09;          /* deeper than ink, for wells behind films */
  --ink-2: #1a1817;          /* raised surfaces */
  --ink-3: #242120;
  --paper: #f3f0e8;
  --paper-70: rgba(243, 240, 232, 0.7);
  --paper-50: rgba(243, 240, 232, 0.5);
  --paper-30: rgba(243, 240, 232, 0.3);
  --paper-12: rgba(243, 240, 232, 0.12);
  --paper-06: rgba(243, 240, 232, 0.06);
  --vermilion: #ff4a1c;

  --f-word: "Jost", ui-sans-serif, system-ui, sans-serif;
  --f-text: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 72px);
  --max: 1680px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: dark;
}
@media (min-width: 2200px) { :root { --max: 2600px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-text);
  font-size: clamp(16px, 0.35vw + 14.5px, 22px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--vermilion); color: var(--ink); }
:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.02em; }
.label { font-family: var(--f-mono); font-weight: 500; font-size: 0.72em; letter-spacing: 0.12em; text-transform: lowercase; color: var(--paper-50); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the mark: one stroke "?" with a vermilion square dot ---- */
.mark { height: 1em; width: auto; overflow: visible; color: var(--paper); }
.mark .mark-dot { transform-box: fill-box; transform-origin: 50% 100%; }
.mark.hop .mark-dot { animation: hop 620ms var(--ease-out); }
@keyframes hop {
  0%   { transform: translateY(0) scale(1, 1); }
  35%  { transform: translateY(-0.9px) scale(0.92, 1.08); }
  68%  { transform: translateY(0) scale(1.28, 0.7); }
  84%  { transform: translateY(-0.12px) scale(0.96, 1.04); }
  100% { transform: translateY(0) scale(1, 1); }
}
/* the brand "?" ending a question: sits on the baseline like a glyph */
.q-mark { display: inline-block; height: 0.78em; margin-left: 0.06em; vertical-align: -0.04em; }
.q-mark .mark-q { stroke-width: 0.6; }

/* ---- lockup: ? why arcade ---- */
/* proportions from brand/export.mjs: word size = 0.56 x mark height, gap = 0.26 x mark height */
.lockup { display: inline-flex; align-items: center; gap: 0.46em; text-decoration: none; font-family: var(--f-word); font-weight: 600; letter-spacing: 0; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lockup .mark { height: 1.79em; }
.lockup span { transform: translateY(0.02em); }

/* ---- header ---- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: clamp(14px, 2vw, 28px) 0; pointer-events: none; }
.site-head::before { content: ""; position: absolute; inset: 0 0 -70% 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(18,17,16,0.97) 0%, rgba(18,17,16,0.9) 50%, rgba(18,17,16,0) 100%); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-head a, .site-head button { pointer-events: auto; }
.site-head .lockup { font-size: clamp(15px, 0.7vw + 10px, 26px); }
.platforms { display: flex; gap: clamp(12px, 1.6vw, 28px); font-family: var(--f-mono); font-size: clamp(12px, 0.35vw + 10px, 16px); letter-spacing: 0.06em; }
.platforms a { text-decoration: none; color: var(--paper-70); transition: color 0.2s; }
.platforms a:hover { color: var(--paper); }
@media (max-width: 560px) { .site-head .platforms { display: none; } }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--paper-12); padding: 40px 0 48px; margin-top: clamp(80px, 12vw, 200px); font-size: 0.85em; color: var(--paper-50); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--paper); }

/* ---- film pieces ---- */
.film-video { width: 100%; height: 100%; object-fit: cover; background: var(--ink-0); }
.ambient { position: absolute; inset: -18%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out); filter: blur(clamp(40px, 6vw, 110px)) saturate(1.5); transform: translateZ(0); }
.ambient.on { opacity: 0.55; }
.ambient canvas { width: 100%; height: 100%; }

/* a film that hasn't come out yet: a dark slot, its question, the square blinking like a cursor */
.slot { position: relative; aspect-ratio: 9 / 16; background: var(--ink-2); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(14px, 1.4vw, 24px); }
.slot::before { /* faint pixel grid: the world isn't drawn yet */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--paper-06) 1px, transparent 1px), linear-gradient(90deg, var(--paper-06) 1px, transparent 1px);
  background-size: 12px 12px; mask-image: linear-gradient(to top, transparent 20%, #000 100%); -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 100%); opacity: 0.6;
}
.cursor { display: inline-block; width: 0.5em; height: 0.5em; background: var(--vermilion); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- legal pages ---- */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(120px, 14vw, 180px) var(--gutter) 0; }
.doc h1 { font-family: var(--f-word); font-weight: 600; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 12px; }
.doc h2 { font-family: var(--f-word); font-weight: 600; font-size: 1.25em; margin: 2.2em 0 0.4em; }
.doc p, .doc li { color: var(--paper-70); }
.doc ul { padding-left: 1.1em; }
.doc li { margin: 0.4em 0; }
.doc a { color: var(--paper); text-decoration-color: var(--vermilion); text-underline-offset: 3px; }
.doc .updated { font-family: var(--f-mono); font-size: 0.8em; color: var(--paper-50); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}