/* ===== Ghost in the Knight / L.T. Fleshman ===== */
:root {
  --bg: #05070a;
  --panel: rgba(8, 14, 20, 0.72);
  --cyan: #2fe6ff;
  --cyan-dim: rgba(47, 230, 255, 0.35);
  --red: #ff2a3d;
  --text: #e8eef2;
  --muted: #8fa3ad;
  --line: rgba(47, 230, 255, 0.18);
  --title: "Rubik Distressed", "Rubik", Impact, sans-serif;
  --display: "Rubik", "Segoe UI", sans-serif;
  --wide: "Michroma", "Rajdhani", sans-serif;
  --ui: "Rajdhani", "Segoe UI", sans-serif;
  --mono: "Share Tech Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 19px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--cyan); text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.center { text-align: center; }
.muted { color: var(--muted); }

/* ---- atmosphere ---- */
#rain { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; opacity: .5; }
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---- nav ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px;
  background: linear-gradient(to bottom, rgba(5,7,10,.9), rgba(5,7,10,0));
}
.nav-logo { font-family: var(--wide); letter-spacing: .28em; color: var(--text); font-size: 14px; }
.nav-logo span { color: var(--red); }
.nav nav a {
  font-family: var(--wide); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-left: 22px; transition: color .2s;
}
.nav nav a:hover { color: var(--cyan); }

/* ---- hero (laid out like the Breaking Halo cover) ---- */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center; padding: 90px 6vw 70px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(255,42,61,.16), transparent 70%),
    linear-gradient(to top, var(--bg) 0%, rgba(5,7,10,.88) 30%, rgba(5,7,10,.35) 60%, rgba(5,7,10,.15) 100%),
    url("../images/hero-skyline.jpg") 72% center / cover no-repeat;
}
.hero-series {
  position: absolute; top: 84px; left: 0; right: 0; text-align: center;
  font-family: var(--wide); font-size: clamp(13px, 1.6vw, 20px); letter-spacing: .5em; color: #f3f6f8;
  text-shadow: 0 2px 12px #000;
}
.hero-content { max-width: 980px; display: flex; flex-direction: column; align-items: center; }
.terminal { font-family: var(--mono); color: var(--cyan); font-size: 15px; margin-bottom: 26px; min-height: 3.4em; text-shadow: 0 0 8px var(--cyan-dim); text-align: left; }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.title { font-family: var(--title); font-weight: 400; line-height: .95; margin: 0 0 18px; }
.title-a {
  display: block; font-size: clamp(56px, 10vw, 150px); letter-spacing: .02em; color: #f3f6f8;
  text-shadow: 0 0 2px rgba(255,255,255,.4), 0 6px 30px rgba(0,0,0,.9);
}
.title-b {
  display: block; position: relative; font-size: clamp(64px, 11.5vw, 170px); letter-spacing: .06em; color: var(--red);
  text-shadow: 0 0 22px rgba(255,42,61,.55), 0 6px 30px rgba(0,0,0,.9);
}
/* the red light streak through HALO, like the cover */
.title-b > .streak, .title-b::marker { display: none; }
.title { position: relative; }
.title::after {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: 31%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red) 20%, #fff 50%, var(--red) 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(255,42,61,.8); opacity: .9;
}
.hero-author {
  font-family: var(--wide); font-size: clamp(16px, 2.2vw, 28px); letter-spacing: .38em; color: #f3f6f8;
  margin-bottom: 18px; text-shadow: 0 2px 12px #000;
}
.hook { font-size: 21px; color: #cfd8dd; max-width: 34ch; margin-bottom: 30px; }
.hero .cta-row { justify-content: center; }

/* ---- glitch ---- */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none;
}
.title-b.glitch::before { color: var(--cyan); left: 3px; animation: glitch-a 3.2s infinite steps(1); mix-blend-mode: screen; }
.title-b.glitch::after  { color: #fff; left: -3px; animation: glitch-b 2.7s infinite steps(1); opacity: .7; }
@keyframes glitch-a {
  0%, 88%, 100% { clip-path: inset(100% 0 0 0); }
  89% { clip-path: inset(10% 0 70% 0); transform: translate(-4px, 0); }
  92% { clip-path: inset(55% 0 25% 0); transform: translate(5px, 0); }
  95% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 0); }
}
@keyframes glitch-b {
  0%, 90%, 100% { clip-path: inset(100% 0 0 0); }
  91% { clip-path: inset(70% 0 10% 0); transform: translate(4px, 0); }
  94% { clip-path: inset(20% 0 65% 0); transform: translate(-5px, 0); }
}

/* ---- buttons ---- */
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn {
  display: inline-block; font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 26px; border: 1px solid var(--cyan); transition: all .2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-primary { background: var(--cyan); color: #021014; box-shadow: 0 0 24px var(--cyan-dim); }
.btn-primary:hover { background: #fff; border-color: #fff; }
.btn-ghost { color: var(--cyan); background: rgba(47,230,255,.06); }
.btn-ghost:hover { background: rgba(47,230,255,.16); }

/* ---- section labels ---- */
.label { font-family: var(--wide); font-size: 12px !important; color: var(--cyan); font-size: 14px; letter-spacing: .2em; margin-bottom: 8px; }
h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: .04em; line-height: 1.05; margin-bottom: 20px; }

/* ---- book ---- */
.book { padding: 110px 6vw; background: radial-gradient(ellipse at 20% 50%, rgba(47,230,255,.06), transparent 60%), var(--bg); }
.book-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: 64px; align-items: center; }
.cover { position: relative; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 40px rgba(47,230,255,.12); transform: rotate(-1.5deg); transition: transform .4s; }
.cover:hover { transform: rotate(0) scale(1.02); }
.blurb { color: #c9d4d9; margin-bottom: 16px; max-width: 62ch; }
.blurb em { color: var(--cyan); font-style: normal; }
.blurb.strong { color: #fff; font-weight: 600; margin-bottom: 30px; }

/* ---- series ---- */
.series { position: relative; padding: 120px 6vw; }
.series-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, var(--bg) 0%, rgba(5,7,10,.72) 18%, rgba(5,7,10,.72) 82%, var(--bg) 100%),
    url("../images/alley.jpg") center / cover no-repeat fixed;
}
.series-inner { max-width: 1160px; margin: 0 auto; }
.series-sub { text-align: center; color: var(--muted); margin-bottom: 48px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  position: relative; padding: 28px 26px 26px; background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: border-color .25s, transform .25s;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.card:hover { border-color: var(--cyan); transform: translateY(-3px); }
.card .num { font-family: var(--mono); color: var(--muted); font-size: 14px; letter-spacing: .2em; }
.card h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 24px; letter-spacing: .04em; margin: 6px 0 10px; }
.card p { color: #b9c6cc; font-size: 17px; margin-bottom: 18px; }
.card.live { border-color: rgba(47,230,255,.6); box-shadow: 0 0 30px rgba(47,230,255,.12) inset; }
.card.live h3 { color: #fff; }
.card-link { font-family: var(--mono); letter-spacing: .1em; font-size: 14px; }
.card.locked h3 { color: #d7dee2; }
.card.locked .glitch::before { color: var(--red); left: 2px; clip-path: inset(100% 0 0 0); }
.card.locked:hover .glitch::before { animation: glitch-a .9s infinite steps(1); }
.lock { font-family: var(--mono); font-size: 13px; letter-spacing: .2em; color: var(--red); }
.lock::before { content: "\25A0  "; }

/* ---- signup ---- */
.signup { padding: 110px 6vw; background: linear-gradient(180deg, var(--bg), #071018 50%, var(--bg)); }
.signup-inner { max-width: 640px; margin: 0 auto; }
.signup-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.signup-form input {
  flex: 1 1 280px; padding: 14px 16px; font-family: var(--mono); font-size: 16px; color: var(--text);
  background: rgba(47,230,255,.05); border: 1px solid var(--line); outline: none;
}
.signup-form input:focus { border-color: var(--cyan); box-shadow: 0 0 16px var(--cyan-dim); }
.form-note { width: 100%; text-align: center; font-family: var(--mono); color: var(--cyan); font-size: 14px; min-height: 1.4em; }

/* ---- author ---- */
.author { padding: 90px 6vw 100px; }
.author-inner { max-width: 760px; margin: 0 auto; border-left: 2px solid var(--red); padding-left: 28px; }
.author p { color: #c9d4d9; margin-bottom: 18px; }
.author em { color: var(--cyan); font-style: normal; }
.links a { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; font-size: 14px; margin-right: 20px; }

/* ---- footer ---- */
.footer { text-align: center; padding: 30px 6vw 40px; border-top: 1px solid var(--line); font-size: 15px; }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .book-inner { grid-template-columns: 1fr; gap: 44px; }
  .cover { max-width: 320px; margin: 0 auto; }
  .cards { grid-template-columns: 1fr 1fr; }
  .series-bg { background-attachment: scroll; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .nav { padding: 12px 16px; }
  .nav nav { display: none; }
  .hero { padding: 100px 16px 50px; }
  .hero-series { top: 70px; letter-spacing: .32em; }
  .hero-bg {
    background:
      linear-gradient(to top, rgba(5,7,10,.97) 0%, rgba(5,7,10,.75) 45%, rgba(5,7,10,.15) 75%),
      url("../images/hero-skyline.jpg") 84% center / cover no-repeat;
  }
  .terminal { font-size: 13px; }
  .book, .series, .signup, .author { padding-left: 16px; padding-right: 16px; }
  .cards { grid-template-columns: 1fr; }
  .author-inner { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glitch::before, .glitch::after, .cursor { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #rain { display: none; }
}

/* ---- coming soon ---- */
.soon-tag { margin-top: 18px; font-family: var(--wide); font-size: 12px; letter-spacing: .35em; color: var(--cyan); text-shadow: 0 0 10px var(--cyan-dim); }
.soon-note { margin-top: 14px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--muted); }

/* ---- keep the status line pinned to the bottom of every card ---- */
.card { display: flex; flex-direction: column; }
.card .lock, .card .card-link { margin-top: auto; align-self: flex-start; }