/* A reactor HUD in Redline's own palette: neon on deep space, the heat ramp
   (blue → orange → red → white-hot) as the signature, angular type and the
   outlined cards of the in-game menu. */

@font-face {
  font-family: "Chakra Petch";
  src: url("/redline/fonts/chakra-petch-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Chakra Petch";
  src: url("/redline/fonts/chakra-petch-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/redline/fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/redline/fonts/barlow-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow";
  src: url("/redline/fonts/barlow-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* Colours come from Palette.swift and MenuStyle in the game. */
:root {
  --space: #03030a;
  --space-2: #080918;
  --line: #1d2135;
  --text: #eff6ff;
  --text-soft: #a9b4c8;
  --cold: #3db8ff;
  --warm: #ff9a2e;
  --hot: #ff2e3c;
  --white-hot: #ffc4b4;
  --nova: #fff4e0;
  --nova-ring: #ff8a3d;
  --hull: #6cffb0;
  --gold: #ffcc40;
  --mission: #66bfff;
  --link: #ff6a72;
  --heat: linear-gradient(90deg, var(--cold) 0%, var(--warm) 60%, var(--hot) 85%, var(--white-hot) 100%);
  --display: "Chakra Petch", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "Chakra Petch", ui-monospace, monospace;
  --wrap: 1120px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--space);
  color: var(--text);
  font: 18px/1.6 "Barlow", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

/* Stars and nebulae, fixed behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 42%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 71%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 66%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 88%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 51% 93%, #fff4 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 46%, #fff4 50%, transparent 51%),
    radial-gradient(ellipse 60% 45% at 85% 10%, #3a1e7a40, transparent 70%),
    radial-gradient(ellipse 55% 40% at 5% 55%, #0e4a6e38, transparent 70%),
    radial-gradient(ellipse 60% 40% at 70% 100%, #5a184033, transparent 70%);
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--white-hot); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5em;
}

h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: 0.08em; }

p { margin: 0 0 1em; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { max-width: 760px; }

.label {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  padding: 8px 14px;
  background: var(--gold);
  color: var(--space);
  font-weight: 600;
  z-index: 10;
}
.skip-link:focus { top: 12px; }

/* Header */

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

.brand {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--text);
  text-decoration: none;
}

.site-header nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }

.site-header nav a {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
}
.site-header nav a:hover { color: var(--text); }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  padding: 56px 0 40px;
}

/* "In testing phase" inked across the hero like a SECRET stamp on a file
   folder: rough edges from an SVG noise mask, slammed on at load. */
.hero { position: relative; }

.stamp {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-11deg);
  animation: stamp 0.45s cubic-bezier(.2, 1.6, .4, 1) 0.4s both;
}

.stamp span {
  display: block;
  padding: 0.12em 0.5em 0.08em;
  border: 0.09em solid currentColor;
  outline: 0.035em solid currentColor;
  outline-offset: 0.07em;
  border-radius: 0.08em;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 7.4vw, 6.2rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ff3a48;
  text-shadow: 0 0 18px #ff2e3c80;
  box-shadow: 0 0 26px #ff2e3c40, inset 0 0 26px #ff2e3c30;
  opacity: 0.9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes stamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-4deg) scale(1.8); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-11deg) scale(1); }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 6px 14px;
  border: 1px solid var(--hull);
  border-radius: 999px;
  color: var(--hull);
}

.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hull);
  box-shadow: 0 0 10px var(--hull);
}

.wordmark {
  font-size: clamp(4rem, 13vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin: 0;
  background: linear-gradient(180deg, var(--nova) 0%, var(--white-hot) 35%, var(--hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 24px #ff2e3c66);
}

.tagline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  letter-spacing: 0.4em;
  color: var(--hot);
  margin: 14px 0 26px;
  text-transform: uppercase;
}

.lead { font-size: 1.2rem; color: var(--text); max-width: 34em; }
.lead em { color: var(--white-hot); font-style: normal; font-weight: 600; }

.reactor {
  position: relative;
  justify-self: center;
  width: min(100%, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.reactor::before,
.reactor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* Heat bloom behind the icon, breathing like the redline heartbeat. */
.reactor::before {
  inset: -6%;
  background: radial-gradient(circle, #ff2e3c55 0%, #ff8a3d22 45%, transparent 70%);
  animation: heartbeat 1.6s ease-in-out infinite;
}

/* The critical ring closing in. */
.reactor::after {
  inset: 0;
  border: 2px solid var(--nova-ring);
  box-shadow: 0 0 18px var(--nova-ring), inset 0 0 18px #ff8a3d55;
  opacity: 0;
  animation: closing 3.2s cubic-bezier(.5, 0, .7, 1) infinite;
}

.reactor img {
  position: relative;
  width: 68%;
  height: auto;
  border-radius: 22%;
  box-shadow: 0 0 0 1px #ffffff14, 0 20px 60px #ff2e3c40;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  15% { transform: scale(1.06); opacity: 1; }
  30% { transform: scale(1.01); opacity: 0.85; }
  45% { transform: scale(1.05); opacity: 1; }
}

@keyframes closing {
  0% { transform: scale(1.25); opacity: 0; }
  20% { opacity: 1; }
  85% { transform: scale(0.72); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

/* The heat gauge: the four weapon tiers along the bar, as in the game's HUD. */

.gauge { padding: 8px 0 72px; }

.gauge-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--heat);
  box-shadow: 0 0 24px #ff2e3c44;
}

/* The redline zone pulses. */
.gauge-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85%;
  right: 0;
  border-radius: 0 7px 7px 0;
  box-shadow: 0 0 20px 3px var(--hot);
  animation: redline 0.8s ease-in-out infinite alternate;
}

@keyframes redline { from { opacity: 0.35; } to { opacity: 1; } }

.gauge-tiers {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 64px;
}

.gauge-tiers li {
  position: absolute;
  top: 0;
  padding: 14px 0 0 10px;
  border-left: 1px solid #ffffff55;
  height: 100%;
}

.gauge-tiers b {
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
}

.gauge-tiers span { font-size: 0.85rem; color: var(--text-soft); }

.gauge-tiers .t1 { left: 0; color: var(--cold); }
.gauge-tiers .t2 { left: 30%; color: #a8f2ff; }
.gauge-tiers .t3 { left: 60%; color: var(--warm); }
.gauge-tiers .t4 { left: 85%; color: var(--hot); }

/* Sections */

section { padding: 72px 0; }

.band {
  background: linear-gradient(180deg, transparent, var(--space-2) 12%, var(--space-2) 88%, transparent);
}

.section-head { margin-bottom: 40px; max-width: 720px; }
.section-head .label { display: block; margin-bottom: 12px; }
.section-head .label b { color: var(--hot); font-weight: 600; margin-right: 10px; }
.section-head p { color: var(--text-soft); font-size: 1.1rem; }

/* How it plays: four steps up the heat ramp. */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  --c: var(--cold);
  position: relative;
  padding: 26px 22px 22px;
  background: #ffffff05;
  border: 1px solid var(--line);
  border-top: 3px solid var(--c);
  border-radius: 4px 4px 12px 12px;
}

.step:nth-child(2) { --c: var(--warm); }
.step:nth-child(3) { --c: var(--hot); }
.step:nth-child(4) { --c: var(--nova); }

.step .num {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--c);
  text-shadow: 0 0 18px var(--c);
  margin-bottom: 14px;
}

.step h3 { color: var(--text); }
.step p { color: var(--text-soft); margin: 0; font-size: 1rem; }

.callout {
  margin: 34px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--hot);
  background: linear-gradient(90deg, #ff2e3c1a, transparent);
  color: var(--text);
}

.callout strong { color: var(--white-hot); font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; }

/* Screens */

.screens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.screens figure { margin: 0; text-align: center; }

.phone {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto 16px;
  border-radius: 26px;
  border: 2px solid #2a3044;
  box-shadow: 0 0 0 6px #080918, 0 0 40px #3db8ff1f;
}

/* Stand-in until the real screenshots arrive: a dark screen with the heat ramp. */
.phone-soon {
  display: grid;
  place-items: center;
  aspect-ratio: 462 / 1000;
  background-color: var(--space-2);
  background-image:
    radial-gradient(120% 60% at 50% 100%, #ff2e3c22, transparent 70%),
    repeating-linear-gradient(0deg, #ffffff06 0 1px, transparent 1px 4px);
}

.phone-soon span {
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  border-image: var(--heat) 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.screens figure:nth-child(2) .phone { box-shadow: 0 0 0 6px #080918, 0 0 44px #ff2e3c40; }
.screens figure:nth-child(3) .phone { box-shadow: 0 0 0 6px #080918, 0 0 44px #ff8a3d40; }

.screens figcaption {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.screens figcaption span {
  display: block;
  font-family: "Barlow", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* Modes: the outlined cards of the in-game menu. */

.modes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.mode {
  --c: var(--hot);
  padding: 24px 26px;
  border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 8%, transparent);
}

.mode.daily { --c: var(--gold); }
.mode.missions { --c: var(--mission); }
.mode.hangar { --c: var(--hull); }

.mode h3 {
  font-size: 1.35rem;
  color: var(--c);
  margin-bottom: 4px;
}

.mode .label { display: block; margin-bottom: 12px; font-size: 0.75rem; }
.mode p:last-child { margin: 0; color: var(--text); }

/* Threats */

.threats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.threats li {
  --c: var(--text);
  padding: 22px;
  background: var(--space);
}

.threats h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c);
  margin-bottom: 8px;
}

.threats h3::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
  clip-path: var(--shape, polygon(50% 0, 100% 100%, 50% 75%, 0 100%));
}

.threats p { margin: 0; color: var(--text-soft); font-size: 1rem; }

.threats .swarmer { --c: #d84dff; }
.threats .gunship { --c: #9dff3d; --shape: inset(20% 0 20% 0); }
.threats .lancer { --c: #ffd23f; --shape: polygon(50% 0, 70% 100%, 30% 100%); }
.threats .drone { --c: #3dffc8; --shape: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.threats .leech { --c: #ff5fa0; --shape: circle(50%); }
.threats .capital { --c: #b8c4ff; --shape: polygon(0 30%, 100% 30%, 85% 80%, 15% 80%); }

/* What makes it different */

.panel {
  padding: 36px 40px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(160deg, #ff2e3c14, transparent 50%), var(--space-2);
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.checks li { position: relative; padding-left: 32px; }

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--heat);
}

/* Documents: privacy and support */

.doc { padding: 24px 0 64px; }
.doc .panel { padding: 40px 44px; }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.doc h2 { font-size: 1.3rem; margin: 1.8em 0 0.5em; color: var(--white-hot); }
.doc h3 { font-family: "Barlow", sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.1rem; margin: 1.4em 0 0.3em; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 0.3em; }
.doc .lead { font-size: 1.15rem; }
.muted { color: var(--text-soft); }

/* Footer */

.site-footer {
  padding: 34px 20px 44px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}

.site-footer::before {
  content: "";
  display: block;
  width: min(240px, 60%);
  height: 3px;
  margin: 0 auto 26px;
  border-radius: 2px;
  background: var(--heat);
}

.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--hot); }

/* Small screens */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .reactor { grid-row: 1; width: min(70%, 300px); }
  .steps, .screens { grid-template-columns: repeat(2, 1fr); }
  .threats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 17px; }
  section { padding: 52px 0; }
  .steps, .modes, .threats { grid-template-columns: 1fr; }
  .screens { gap: 28px 16px; }
  .panel, .doc .panel { padding: 26px 22px; }
  .gauge-tiers { height: 84px; }
  .gauge-tiers li { padding-left: 6px; }
  .gauge-tiers b { font-size: 0.72rem; letter-spacing: 0.06em; }
  .gauge-tiers span { font-size: 0.72rem; }
  .tagline { letter-spacing: 0.28em; }
  .stamp { top: 19%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reactor::after { opacity: 0.6; transform: scale(0.92); }
}