/* FACTION5 website. Fonts are self-hosted (SIL Open Font License, see assets/fonts/FONTS.txt). */
@font-face { font-family: "Big Shoulders Stencil Display"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/bigshoulders-stencil-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/plexsans-var.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plexmono-500.woff2") format("woff2"); }

:root {
  --ink: #0a0c0c;
  --bone: #e9e4d8;             /* primary text: warm off-white, like the graffiti */
  --bone-dim: #b9b3a6;
  --signal: #b80000;           /* the F5 logo red: fills, borders, large type */
  --signal-hi: #e2392f;        /* the same red lifted for small text and focus rings on black */
  --signal-ink: #fff4ef;       /* text on red */
  --line: rgba(233, 228, 216, 0.28);
  --pad: clamp(16px, 4vw, 56px);
  --display: "Big Shoulders Stencil Display", "Arial Narrow", Impact, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* where the TV sits in each video frame: used to keep it in view when the viewport crops the video */
  --focus-desktop: 64% 46%;
  --focus-mobile: 56% 47%;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* component display rules must never un-hide unconfigured controls */
html { background: var(--ink); color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: transparent; color: var(--bone);   /* the html element carries the dark base so the fixed stage shows */
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- background stage */
.stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.stage__still, .stage__still img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: var(--focus-desktop);
}
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 600ms ease; }
.stage__canvas.is-playing { opacity: 1; }
/* texture source only: kept in the layout (some browsers stop decoding hidden videos) but invisible */
.stage__video { position: absolute; left: 0; top: 0; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
/* legibility: darken the quiet side where the interface sits, never the TV */
.stage__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 7, 7, 0.82) 0%, rgba(5, 7, 7, 0.55) 30%, rgba(5, 7, 7, 0.0) 52%),
    linear-gradient(0deg, rgba(5, 7, 7, 0.65) 0%, rgba(5, 7, 7, 0.0) 26%);
}

/* ---------------------------------------------------------------- shared */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 1px solid var(--line); border-radius: 2px;
  font: 600 0.92rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--bone); background: rgba(10, 12, 12, 0.55); cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn:hover { border-color: var(--bone); background: rgba(10, 12, 12, 0.75); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { background: #d4140c; border-color: #d4140c; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- homepage: the scene and one row of links */
.home { grid-template-rows: 1fr auto; }
.foot { display: flex; align-items: center; justify-content: center; padding: 0 var(--pad) max(var(--pad), env(safe-area-inset-bottom)); }
.foot__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 30px; }
.foot__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 0.78rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.foot__links a:hover { color: var(--bone); }
.foot__links a.foot__alpha { padding: 0 18px; border: 1px solid var(--line); color: var(--bone); background: rgba(10, 12, 12, 0.5); }
.foot__links a.foot__alpha:hover { border-color: var(--signal-hi); color: var(--signal-hi); }
.home .stage__scrim { background: linear-gradient(0deg, rgba(5, 7, 7, 0.7) 0%, rgba(5, 7, 7, 0.0) 22%); }

/* ---------------------------------------------------------------- document pages (Play the Alpha, Terms, Privacy) */
.doc .stage__still img { filter: blur(2px); transform: scale(1.02); }
.doc .stage__scrim { background: rgba(6, 8, 8, 0.86); }
.top { display: flex; align-items: center; padding: var(--pad) var(--pad) 0; }
.mark { display: inline-flex; width: clamp(52px, 5vw, 68px); border-radius: 50%; }
.mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6)); }
.page { width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vh, 56px) var(--pad) clamp(40px, 8vh, 96px); }
.page h1 { margin: 0 0 8px; font: 800 clamp(2.8rem, 7vw, 4.6rem)/0.9 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.page h1 span { color: var(--signal); }
.page h2 { margin: 2.4em 0 0.6em; font: 600 0.8rem/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-hi); }
.page h3 { margin: 1.6em 0 0.4em; font-size: 1rem; font-weight: 600; }
.page p, .page li { color: var(--bone-dim); max-width: 68ch; }
.page strong { color: var(--bone); font-weight: 600; }
.page ul { padding-left: 1.2em; }
.page li { margin: 0.35em 0; }
.page a { color: var(--bone); text-underline-offset: 3px; }
.page a:hover { color: var(--signal-hi); }
.page a.btn { text-decoration: none; }
.page a.btn--primary, .page a.btn--primary:hover { color: var(--signal-ink); }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--bone) !important; }
.meta { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-dim); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 24px 0 0; padding: 18px 20px; border: 1px solid var(--line); background: rgba(10, 12, 12, 0.5); }
.facts dt { font: 500 0.72rem/1.6 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-dim); }
.facts dd { margin: 0; color: var(--bone); }
.todo { background: #ffd54a; color: #1a1400; padding: 0 4px; border-radius: 2px; font-weight: 600; }   /* owner value missing (preview only) */
.doc .foot { padding-top: 24px; flex-direction: column; gap: 4px; }
.copy { margin: 0; font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; color: rgba(185, 179, 166, 0.7); text-align: center; }

/* signup form */
.signup { margin-top: 18px; padding: 22px; border: 1px solid var(--line); background: rgba(10, 12, 12, 0.6); }
.signup label { display: block; }
.field__label { display: block; margin-bottom: 8px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-dim); }
.signup .field + .field { margin-top: 16px; }
.field input, .field select {
  width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 2px;
  background: rgba(0, 0, 0, 0.45); color: var(--bone); font: 400 1rem var(--sans);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bone-dim) 50%), linear-gradient(135deg, var(--bone-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { background: #101313; color: var(--bone); }
.field input:focus, .field select:focus { border-color: var(--signal-hi); outline: none; box-shadow: 0 0 0 1px var(--signal-hi); }
.consent { display: flex !important; gap: 12px; align-items: flex-start; margin: 16px 0; color: var(--bone-dim); font-size: 0.95rem; }
.consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--signal); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot */
.signup__status { min-height: 1.5em; margin: 14px 0 0; }
.signup__status[data-kind="ok"] { color: #7fe0a0; }
.signup__status[data-kind="error"] { color: #ff8a7a; }
.signup__turnstile:not(:empty) { margin: 0 0 16px; }   /* only takes space if Turnstile shows a challenge */
.signup + .meta { max-width: none; margin-top: 12px; }   /* spans the full width of the form box */

/* ---------------------------------------------------------------- focus + skip link */
:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--bone); color: var(--ink);
  font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- portrait / phone: mobile render */
@media (max-aspect-ratio: 4/5) {
  .stage__still, .stage__still img { object-position: var(--focus-mobile); }
  .foot__links { gap: 6px 22px; }
  .foot__links a.foot__alpha { flex: 1 1 100%; justify-content: center; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage__canvas { transition: none; }
  .btn { transition: none; }
}

@media (forced-colors: active) {
  .btn, .foot__alpha { border: 1px solid ButtonText; }
}