/* Parallax: the radar world, played as one film. Black ground, white ink, one alert red for possibility
   (light scheme, from the system setting: white ground, black ink, the same red).
   All tone is 1-bit dither. The screen stays pinned; scrolling drives the timeline (film.js). */
@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --ink: #fff;
  --ground: #000;
  --red: #ff3b1f;
  --dim: #b8b8b8;            /* secondary text: 10.7:1 on black */
  --mute: #9a9a9a;           /* tertiary text, placeholders */
  --veil: rgba(0,0,0,.82);   /* ground over the dither, behind text */
  --on-red: #000;            /* text on red, both schemes */
  --edge: clamp(20px, 3.4vw, 56px);
  --rule: 2px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --bar: 34px;               /* the round bar */
  --col: 37vw;               /* the copy column on wide screens */
}
@media (prefers-color-scheme: light) {
  :root { --ink: #000; --ground: #fff; --dim: #474747; --mute: #6b6b6b; --veil: rgba(255,255,255,.86); }
}
/* contrast, as the system asks (film.js gives the canvas the same palette) */
@media (prefers-contrast: more) {
  :root { --dim: #e8e8e8; --mute: #d4d4d4; --veil: #000; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --dim: #1a1a1a; --mute: #2e2e2e; --veil: #fff; --red: #cc260a; --on-red: #fff; }   /* deeper red: its text holds 5:1 */
}
@media (prefers-contrast: less) {
  :root { --ink: #d6d6d6; --ground: #111; --dim: #9e9e9e; --mute: #828282; --veil: rgba(17,17,17,.86); }
}
@media (prefers-contrast: less) and (prefers-color-scheme: light) {
  :root { --ink: #282828; --ground: #f2f2f2; --dim: #5e5e5e; --mute: #787878; --veil: rgba(242,242,242,.86); }
}

* { box-sizing: border-box; }
html { background: var(--ground); overflow: hidden; height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Unbounded", system-ui, sans-serif;
  font-weight: 315;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  height: 100%; overflow: hidden; overscroll-behavior: none;
}
::selection { background: var(--red); color: var(--on-red); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, p { margin: 0; }
em { font-style: normal; color: var(--red); }
.red { color: var(--red); }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip { position: absolute; left: var(--edge); top: -60px; z-index: 50; background: var(--red); color: var(--on-red); padding: 10px 16px; font-size: 12px; letter-spacing: .14em; text-decoration: none; }
.skip:focus { top: 12px; }

h1, h2 {
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .98;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5vw, 92px); }
h2 { font-size: clamp(34px, 3.8vw, 68px); margin-bottom: .5em; }
h2.big { font-size: clamp(44px, 5.4vw, 96px); line-height: .92; }

/* ============ the film: a pinned screen; the page height is the timeline ============ */
.film { position: fixed; inset: 0 0 var(--bar) 0; }    /* the page does not scroll: gestures page the film */
.screen {
  position: absolute; inset: 0;
  height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar));
  overflow: hidden;
}
.screen canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dither { image-rendering: pixelated; image-rendering: crisp-edges; }
.xfade { pointer-events: none; opacity: 0; }                /* reduced motion: the frame being left, fading out */

/* beats: positioned in the screen, crossfaded by film.js (opacity, a small lift and a blur) */
.beat {
  position: absolute;
  opacity: 0; visibility: hidden;
  will-change: opacity, transform, filter;
}
.beat.on { visibility: visible; }
.beat-side, .beat-hero, .beat-close {
  left: var(--edge); top: 0; bottom: 0;
  width: calc(var(--col) - var(--edge) * 1.6);
  display: flex; flex-direction: column; justify-content: center;
}
.beat-side p { color: var(--dim); max-width: 34ch; }
.beat-side .lens-sub { color: var(--ink); font-size: 19px; margin-bottom: 1.1em; max-width: 30ch; }
.beat-side h2 + p { margin-top: .2em; }

.beat-hero { justify-content: space-between; padding: calc(var(--edge) * .9) 0 calc(var(--edge) * .8); }
.mark-space { height: 48px; flex: none; }                  /* the masthead's place in the first page */
/* the masthead, over the film: on the first page the full logo and the DeadStar mark; after it they fade and the
   spider (drawn exactly over the logo's own) stays in the corner until the close, whose footer carries the logo */
.masthead {
  position: absolute; z-index: 4; left: var(--edge); top: calc(var(--edge) * .9);
  width: calc(var(--col) - var(--edge) * 1.6);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; pointer-events: none;
}
.masthead a { pointer-events: auto; }
.brand { position: relative; display: block; width: 198.7px; height: 48px; }   /* 414 x 100 at 48 high */
.brand.compact { width: 48px; }
.brand picture { position: absolute; left: 0; top: 0; }
.brand-full img { width: 198.7px; height: 48px; display: block; }
.brand.compact .brand-full { pointer-events: none; }
.brand-mark img { width: 48px; height: 48px; display: block; }   /* the 48 px dashed-mark minimum */
.masthead .by { margin: 0; }
.by a { display: block; line-height: 0; }
.by img { width: 48px; height: 48px; display: block; }   /* the same height as the Parallax logo beside it */
/* the headline's longest line is "COUNTER-STRIKE 2." (kept whole, about 12.3em wide): the headline takes the left half
   of the screen (the spider has the right) and its size follows the width, so that line always fits */
.beat-hero h1 { width: calc(50vw - var(--edge) - 32px); font-size: calc((50vw - var(--edge) - 32px) / 12.6); }
.hero-main .lede { margin-top: 1.4em; color: var(--dim); max-width: 31ch; }

/* the waitlist form (both instances) */
.join { position: relative; }
.join-hero { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join input[type=email] {
  min-width: 0;
  background: var(--ground); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  font: inherit; font-size: 15px;
  padding: 15px 16px;
  caret-color: var(--red);
  transition: border-color .2s var(--ease);
}
.join input[type=email]::placeholder { color: var(--mute); }
.join input[type=email]:hover, .join input[type=email]:focus { border-color: var(--red); }
.join input[type=email]:focus-visible { outline: none; }   /* focus shows on its own border, not a second ring */
.join input[type=email][aria-invalid="true"] { border-color: var(--red); }
.join button[type=submit] {
  position: relative; overflow: hidden;
  background: var(--red); color: var(--on-red); border: 0; border-radius: 0;
  font-weight: 620; font-size: 12px; letter-spacing: .16em;
  padding: 0 20px;
}
.join button[type=submit] span { position: relative; z-index: 1; }
.join button[type=submit]::before {          /* a dither wipe on hover */
  content: ""; position: absolute; inset: 0;
  background: var(--ground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E");
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E");
  transform: translateX(-101%);
  transition: transform .45s var(--ease);
}
.join button[type=submit]:hover::before, .join button[type=submit]:focus-visible::before { transform: none; }
.join button[type=submit][disabled] { opacity: .55; cursor: progress; }
.join-msg { grid-column: 1 / -1; min-height: 1.4em; font-size: 13px; color: var(--dim); margin-top: 6px; }
.join-msg.ok { color: var(--ink); }
.join-msg.err { color: var(--red); }
.join-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; letter-spacing: .06em; color: var(--mute); max-width: 60ch; }   /* privacy, set like the footer's line */
.join-note a { color: inherit; text-underline-offset: 2px; }
.join-note a:hover { color: var(--red); }
.join.done .join-note { display: none; }
.join.done input[type=email], .join.done button[type=submit] { display: none; }

/* radar HUD: placed by film.js around the radar's rectangle */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { position: absolute; pointer-events: auto; }
.hud.off > * { pointer-events: none; }

/* futures: a reranking board. Rows keep identity; a changed row stays lit. */
.futures {
  width: 340px; margin: 0; padding: 0; list-style: none;
  background: var(--ground); border: 2px solid var(--red);
}
.futures li {
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: 1fr 52px; gap: 10px; align-items: center;
  height: 34px; padding: 0 12px;
  font-size: 11px; letter-spacing: .14em;
  border-top: 1px solid rgba(255,59,31,.35);
  transition: transform .55s var(--ease), color .4s;
}
.futures li b { font-weight: 560; text-align: right; color: var(--red); font-variant-numeric: tabular-nums; }
.futures li.lit { color: var(--red); box-shadow: inset 3px 0 0 var(--red); }   /* a row that just moved: red words, a red edge */

/* features: a grid of blocks; the dither engine fills each block's box underneath (film.js reads them) */
.beat-board { left: var(--edge); right: var(--edge); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
.beat-board h2 { max-width: 18ch; margin-bottom: .9em; }
.feats { list-style: none; margin: 0; padding: 0; max-width: 1240px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.feat {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  min-height: 170px; padding: 18px 18px 20px;
  border: 2px solid var(--ink); background: var(--veil);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.feat-n { font-size: 11px; letter-spacing: .14em; color: var(--mute); font-variant-numeric: tabular-nums; }
.feat h3 { margin: 22px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .16em; }
.feat p { color: var(--dim); font-size: 14px; line-height: 1.45; }
.feat-ico { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; fill: currentColor; transition: fill .25s var(--ease); }
.feat:hover { border-color: var(--red); }
.feat:hover .feat-ico { fill: var(--red); }
.feat:hover .feat-n { color: var(--red); }

@media (min-width: 901px) and (max-height: 760px) {         /* short laptop screens: lower blocks */
  .feat { min-height: 0; padding: 14px 14px 16px; }
  .feat h3 { margin-top: 14px; }
  .beat-board h2 { margin-bottom: .6em; }
}

/* close */
.beat-close {                                              /* the whole width, above the footer: words left, the form right */
  right: var(--edge); width: auto; bottom: var(--foot-h, 0);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 96px);
  align-content: center; align-items: start;
}
.beat-close h2 { grid-column: 1; margin-bottom: 0; }
.beat-close .status { grid-column: 1; }
.beat-close .join-close { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
.beat-close .join-line { grid-template-columns: 1fr; }
.beat-close .join-close button[type=submit] { padding: 18px 30px; }
.beat-close .status { margin-top: 1.2em; color: var(--dim); max-width: 44ch; font-size: 19px; background: var(--ground); box-shadow: 0 0 0 8px var(--ground); }
.join-close { margin-top: 2.6em; }   /* (on wide screens it sits beside the words) */
.roles { border: 0; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.roles legend { font-size: 11px; letter-spacing: .26em; color: var(--dim); margin-bottom: 12px; padding: 0; }
.roles label { position: relative; cursor: pointer; }
.roles input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.roles span { display: block; border: 2px solid var(--ink); background: var(--ground); padding: 11px 15px; font-size: 11px; letter-spacing: .18em; transition: background .25s var(--ease), color .25s, border-color .25s; }
.roles label:hover span { border-color: var(--red); color: var(--red); }
.roles input:checked + span { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.roles input:focus-visible + span { border-color: var(--red); color: var(--red); }
.join-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-close input[type=email] { font-size: 18px; padding: 20px; }
.join-close button[type=submit] { padding: 0 30px; font-size: 13px; }

/* the footer: part of the last page. A legal row, then the logo across the whole width, dithered (solid at the top,
   breaking up toward the bottom), cut by the page's edge; film.js assembles it as the page arrives */
.foot {
  position: fixed; left: 0; right: 0; bottom: var(--bar); z-index: 5; opacity: 0; pointer-events: none;
  height: var(--foot-h, 240px); overflow: hidden;
  display: flex; flex-direction: column; background: var(--ground);
  font-size: 12px; letter-spacing: .06em; color: var(--mute);
}
.foot-row { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; padding: 22px var(--edge) 18px; }
.foot-row img { width: 120px; height: auto; }
.foot-row a { color: inherit; text-underline-offset: 2px; }
.foot-row a:hover { color: var(--red); }
.foot-logo, .by a { display: block; line-height: 0; transition: opacity .2s; }
.foot-logo:hover, .by a:hover { opacity: .7; }
.foot.on { pointer-events: auto; }
.foot-word { display: block; width: 100%; flex: none; image-rendering: pixelated; image-rendering: crisp-edges; }
.rb-line { cursor: pointer; }
.rb-line::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }

/* ============ the round bar: one timeline across the film ============ */
.roundbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--bar);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 0 var(--edge);
  background: var(--ground);
  font-size: 11px; letter-spacing: .2em;
}
.rb-line { position: relative; height: 2px; background: var(--ink); }
.rb-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); }
.rb-mark { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; margin-left: -6px; border: 2px solid var(--red); background: var(--ground); }
.rb-time { font-variant-numeric: tabular-nums; font-weight: 560; letter-spacing: .08em; font-size: 12px; min-width: 3.2em; text-align: right; }

/* ============ reduced motion (the system setting; film.js follows the same setting) ============
   Nothing travels: transitions that move become fades; text crossfades in place. */
@media (prefers-reduced-motion: reduce) {
  .beat { transition: opacity .5s linear; visibility: visible; }   /* film.js sets the opacity; this smooths each change */
  .beat:not(.on) { pointer-events: none; }
  .brand-full, .brand-mark, .masthead .by { transition: opacity .5s linear; }
  .join button[type=submit]::before { transform: none; opacity: 0; transition: opacity .25s linear; }
  .join button[type=submit]:hover::before, .join button[type=submit]:focus-visible::before { opacity: 1; }
  .futures li { transition: color .3s linear; }
}

/* ============ forced colours (Windows high contrast): system colours throughout. The browser recolours text and
   borders; what is drawn with backgrounds (the round bar, a chosen role, a lit future) is given system colours here,
   and red means Highlight. The canvas takes the same colours in film.js. ============ */
@media (forced-colors: active) {
  :root { --red: Highlight; --on-red: HighlightText; --ink: CanvasText; --ground: Canvas; --dim: CanvasText; --mute: GrayText; --veil: Canvas; }
  em, .red, .feat:hover .feat-n { forced-color-adjust: none; color: Highlight; }
  .join button[type=submit] { border: 2px solid ButtonText; }
  .join button[type=submit]::before { display: none; }
  .join input[type=email]:focus, .join input[type=email]:hover, .feat:hover, .roles label:hover span, .roles input:focus-visible + span { forced-color-adjust: none; border-color: Highlight; }
  .roles input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .futures li.lit { forced-color-adjust: none; color: Highlight; box-shadow: inset 3px 0 0 Highlight; }
  .feat-ico { forced-color-adjust: none; fill: CanvasText; }
  .feat:hover .feat-ico { fill: Highlight; }
  .rb-line { forced-color-adjust: none; background: CanvasText; }
  .rb-fill { forced-color-adjust: none; background: Highlight; }
  .rb-mark { forced-color-adjust: none; background: Canvas; border-color: Highlight; }
}

/* ============ print: film.js builds one sheet per page of the film (#print) just before printing.
   Portrait paper is narrow, so the phone layout applies by itself; landscape gets the wide one. Paper is white. ===== */
#print { display: none; }
@media print {
  @page { margin: 0; }
  :root { --ink: #000; --ground: #fff; --dim: #333; --mute: #555; --veil: rgba(255,255,255,.9); --red: #ff3b1f; --on-red: #000; }
  html, body { height: auto; overflow: visible; background: #fff; color: #000; }
  body > :not(#print) { display: none !important; }
  #print { display: block; }
  .print-set { display: none; }
  .print-page { position: relative; width: 100vw; height: 100vh; overflow: hidden; break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
  .print-page .beat { opacity: 1; visibility: visible; transform: none; filter: none; }
  .print-page .hud { opacity: 1; }
  .print-page .join { display: none; }
  .print-page .beat-close { bottom: 0; }                  /* (the screen's footer is not on paper) */
  .print-page .hero-main::after, .print-page .beat-close .status::after {
    content: "parallax.deadstar.co"; display: block; margin-top: 1.4em; color: #000;
    font-size: 13px; font-weight: 560; letter-spacing: .14em; text-transform: uppercase;
  }
  .print-foot { position: absolute; left: var(--edge); right: var(--edge); bottom: 18px; display: flex; gap: 20px; align-items: center; font-size: 10px; color: #555; }
  .print-foot img { width: 96px; height: auto; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print and (orientation: landscape) { .print-landscape { display: block; } }
@media print and (orientation: portrait) { .print-portrait { display: block; } }

/* ============ phones and narrow windows: copy on top, the scene underneath ============ */
@media (max-width: 900px) {
  body { font-size: 16px; }
  :root { --col: 100vw; }
  .beat-side, .beat-hero, .beat-close { left: var(--edge); right: var(--edge); width: auto; top: 0; bottom: auto; height: 46%; justify-content: flex-start; padding-top: 7svh; }
  .beat-side { padding-top: 82px; }                          /* below the masthead's spider (18 + 48 + room) */
  .beat-hero { height: 47%; padding: 18px 0 0; justify-content: flex-start; gap: 2.4svh; }
  .masthead { top: 18px; right: var(--edge); width: auto; }
  .beat-hero h1 { width: auto; font-size: calc((100vw - 2 * var(--edge)) / 12.6); }
  .beat-hero .lede { font-size: 14px; margin-top: .9em; }
  .beat-hero .join-hero { grid-template-columns: 1fr auto; }
  .beat-hero .join-hero input[type=email] { padding: 12px; font-size: 14px; }
  .beat-hero .join-hero button[type=submit] { padding: 0 14px; font-size: 11px; }
  .beat-close { display: flex; flex-direction: column; height: auto; bottom: var(--foot-h, 0); justify-content: center; padding-top: 0; }
  .beat-close .join-close { margin-top: 1.4em; }
  .beat-close .status { font-size: 15px; margin-top: .8em; }
  .beat-close .roles { margin-bottom: 10px; }
  .beat-close .roles span { padding: 9px 11px; }
  .join-close input[type=email] { font-size: 15px; padding: 14px; }
  .beat-side p { font-size: 15px; }
  .beat-side .lens-sub { font-size: 16px; }
  h2.big { font-size: clamp(36px, 10vw, 56px); }
  .futures { width: calc(100% - 44px); }
  .futures li { height: 30px; }
  .feats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .feat { min-height: 0; padding: 10px 11px 12px; gap: 5px; }
  .feat h3 { margin-top: 12px; font-size: 10.5px; letter-spacing: .12em; }   /* clears the icon */
  .feat p { font-size: 12px; line-height: 1.35; }
  .feat-n { font-size: 9px; }
  .feat-ico { top: 9px; right: 9px; width: 24px; height: 24px; }
  .beat-board h2 { font-size: 26px; margin-bottom: .6em; }
  .join-line { grid-template-columns: 1fr; }
  .join button[type=submit] { padding: 16px 20px; }
  .foot-row { grid-template-columns: auto auto; justify-content: space-between; gap: 6px 12px; padding: 12px var(--edge) 10px; font-size: 10px; }
  .foot-row p:first-of-type { grid-column: 1 / -1; grid-row: 2; }
  .foot-row img { width: 96px; }
  .join-note { font-size: 10px; letter-spacing: .072em; }   /* = the footer line on phones (0.72px) */
  .roundbar { grid-template-columns: 1fr auto; }
  .roundbar .rb-round { display: none; }
}
@media (max-width: 900px) and (max-height: 700px) {          /* small phones: the grid has to fit one screen */
  .feat-n { display: none; }
  .feat-ico { width: 12px; height: 12px; top: 8px; right: 8px; }
  .feat h3 { margin-top: 0; padding-right: 14px; }
  .feat { padding: 8px 10px 10px; gap: 3px; }
  .feat p { font-size: 11px; line-height: 1.3; }
  .beat-board h2 { font-size: 22px; }
  .beat-close h2.big { font-size: 28px; }
  .beat-close .roles span { padding: 7px 10px; }
  .beat-close .roles { gap: 6px; }
  .beat-close .roles legend { margin-bottom: 8px; }
  .beat-close .status { margin-top: .5em; }
  .beat-close .join-close { margin-top: 1em; }
  .beat-hero .lede { display: none; }                         /* small phones: the form and its note need the room */
}