/* Terran Revenge splash page.
   The game's control-panel palette (dark ground, orange accent) with the
   sectors' nebula colours bled into the page as gradients and a drifting
   starfield behind everything. Michroma for the wordmark, Chakra Petch for
   text. No framework, no build step, no JavaScript. */

@font-face { font-family: "Chakra Petch"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ChakraPetch-Regular.ttf") format("truetype"); }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ChakraPetch-Medium.ttf") format("truetype"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ShareTechMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "Michroma"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Michroma-Regular.ttf") format("truetype"); }

:root {
  --ground: #06080c;
  --text: #dfe6ee;
  --muted: #8b98a6;
  --accent-bright: #ff8a1f;
  --accent-hot: #ffb04a;
  --accent-deep: #ff5a2a;
  --landmark: #99ccff;
  --nebula-purple: 122, 75, 214;
  --nebula-teal: 22, 110, 118;
  --font-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-mark: "Michroma", "Chakra Petch", sans-serif;
  --font-mono: "Share Tech Mono", "SFMono-Regular", Menlo, monospace;
  --hud-caption: #8fa0b3;
  --hud-critical: #ff2020;
  --hud-band-3: #ff8c33;
  --hud-band-4: #ff473d;
  --gutter: 20px;
  --wide: 1200px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--text); font-family: var(--font-ui); font-size: 17px; line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--ground);
  background-image:
    radial-gradient(1200px 700px at 100% -10%, rgba(var(--nebula-purple), 0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(var(--nebula-teal), 0.22), transparent 60%),
    radial-gradient(800px 500px at 80% 110%, rgba(var(--nebula-purple), 0.12), transparent 60%);
  background-attachment: fixed;
}
.wrap { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Starfield ----------
   Two tiled layers of tiny radial dots drifting at different speeds, fixed
   behind the page. */
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars::before, .stars::after { content: ""; position: absolute; inset: -30%; background-repeat: repeat; }
.stars::before {
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,0.9), transparent 1.5px),
    radial-gradient(1px 1px at 90px 140px, rgba(255,255,255,0.6), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 200px 60px, rgba(190,215,255,0.8), transparent 2px),
    radial-gradient(1px 1px at 260px 220px, rgba(255,255,255,0.5), transparent 1.5px),
    radial-gradient(1px 1px at 330px 110px, rgba(255,255,255,0.7), transparent 1.5px);
  background-size: 380px 260px;
  opacity: 0.55;
  animation: drift-a 160s linear infinite;
}
.stars::after {
  background-image:
    radial-gradient(1px 1px at 40px 80px, rgba(255,255,255,0.7), transparent 1.5px),
    radial-gradient(2px 2px at 160px 30px, rgba(255,200,150,0.6), transparent 2.5px),
    radial-gradient(1px 1px at 240px 180px, rgba(255,255,255,0.5), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 420px 120px, rgba(184,128,255,0.7), transparent 2px);
  background-size: 520px 360px;
  opacity: 0.4;
  animation: drift-b 240s linear infinite;
}
@keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-380px, -130px, 0); } }
@keyframes drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(260px, -180px, 0); } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; flex: 1;
  display: grid; align-items: center; overflow: hidden;
}
.hero-art {
  position: absolute; inset: 0; z-index: -2;
  /* The capture has the ship in the lower left and Earth upper right, so it is
     shown whole (cover, centered); the title sits in the upper left, above the
     ship, and the veil only darkens that corner. Retune for a new image. */
  background: url("../img/hero.jpg") 50% 50% / cover no-repeat;
  animation: hero-in 1.6s var(--ease) both;
}
@media (max-width: 1000px) { .hero-art { background-position: 30% 50%; } }
@media (max-width: 700px) { .hero-art { background-position: 25% 50%; opacity: 0.7; } }
@keyframes hero-in { from { transform: scale(1.06); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 78% 45%, rgba(var(--nebula-purple), 0.22), transparent 70%),
    radial-gradient(40% 50% at 20% 90%, rgba(var(--nebula-teal), 0.35), transparent 70%),
    radial-gradient(60% 60% at 12% 24%, rgba(6, 8, 12, 0.9), rgba(6, 8, 12, 0.5) 55%, transparent 100%),
    linear-gradient(180deg, rgba(6, 8, 12, 0.55) 0%, transparent 35%, transparent 75%, var(--ground) 100%);
}
.hero-veil::after {
  /* faint scanlines, the HUD's texture */
  content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
}
/* The hero copy is pinned to the upper left of the viewport, not the centered
   column, so on wide screens it stays over the empty nebula instead of drifting
   into the drone and Earth in the middle of the frame. */
.hero .wrap {
  padding: 96px 0 80px; align-self: start;
  margin-inline: 0; margin-left: clamp(var(--gutter), 4vw, 72px);
  width: min(var(--wide), 100% - 2 * var(--gutter));
}
@media (max-width: 700px) { .hero .wrap { align-self: center; } }

.overline {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--landmark); margin-bottom: 1.2em;
}
.overline::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--landmark), transparent); }

h1 {
  margin: 0 0 0.3em;
  font-family: var(--font-mark); font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.2rem); letter-spacing: 0.1em; line-height: 1.05;
}
h1 .a, h1 .b { background-clip: text; -webkit-background-clip: text; color: transparent; }
h1 .a { background-image: linear-gradient(180deg, #ffffff, #b9c6d4); }
h1 .b { background-image: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-bright) 45%, var(--accent-deep) 100%); filter: drop-shadow(0 0 18px rgba(255, 138, 31, 0.35)); }

.tagline {
  margin: 0 0 1.4em;
  font-size: clamp(1.08rem, 1.8vw, 1.32rem); max-width: 44ch;
  text-shadow: 0 2px 20px rgba(6,8,12,0.8);
}
.status {
  margin: 0;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Response clock (the in-game ENEMY RESPONSE FORCE readout) ---------- */
/* Same layout as ResponseCluster in the HUD: caption, then clock | threat | band on one
   row, then the sector line, inside four corner brackets. Counted down into the critical
   band, so the clock and the threat word both take the HUD's critical red. */
.response {
  position: absolute; top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px);
  z-index: 1;
  display: grid; justify-items: end; gap: 4px;
  padding: 16px 22px 14px;
  color: var(--hud-caption);
  font-family: var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(6, 8, 12, 0.6);
  backdrop-filter: blur(6px);
  animation: response-in 1.2s 0.6s var(--ease) both;
}
.response::before, .response::after,
.response .bl, .response .br {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(160, 180, 205, 0.7);
}
.response::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.response::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.response .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.response .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.response .caption { font-size: 0.62rem; }
.response .row {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--font-mono); font-size: clamp(1.05rem, 1.8vw, 1.55rem); letter-spacing: 0.06em;
  line-height: 1.1; color: #fff;
}
.response .row .sep { width: 1px; height: 1.1em; background: rgba(160, 180, 205, 0.55); }
.response .clock { min-width: 11ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--hud-critical); }
.response .threat { color: var(--hud-critical); animation: response-pulse 1.4s ease-in-out infinite; }
.response .band { color: var(--hud-band-4); }
.response .place { font-size: 0.62rem; }
@keyframes response-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes response-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (max-width: 900px) {
  .response { position: static; justify-self: start; justify-items: start; margin-top: 28px; }
  .response .row { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .response, .response .threat { animation: none; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid rgba(120, 150, 190, 0.14); background: linear-gradient(180deg, rgba(6,8,12,0.4), rgba(6,8,12,0.9)); }
.site-footer .wrap { padding: 24px 0; font-size: 0.85rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}