/* =====================================================
   End State – single page site
   Edit the variables below to change colours, widths
   and breakpoints-related sizing in one place.
   ===================================================== */

:root {
  --bg:           #000000;
  --text:         #889ca4;   /* body copy            */
  --text-strong:  #ccdce4;   /* headings, active nav */
  --btn-edge:     #889ca4;   /* button border at rest (brightens on hover) */
  --text-muted:   #68787f;   /* inactive nav, footer */
  --line:         #66757c;   /* section divider      */
  --link:         #e8f1f5;   /* links in the text (brighter than the body copy) */
  --link-hover:   #ffffff;
  --accent:       #f2c75c;   /* warm gold: the headline above the buttons */

  --content-width: 1000px;   /* max width of the content column */
  --gutter:        32px;     /* inner side padding              */
  --text-inset:    6%;       /* extra side space for text, so text is narrower than images and video */
  --glow-width:    720px;    /* title glow: width        */
  --glow-strength: .09;      /* title glow: opacity at its centre (0.05 - 0.10 is subtle) */
  --anchor-gap:    48px;     /* space above a section when jumped to from the navigation */
  --col-gap:       32px;     /* gap between the two columns     */
  --nav-height:    48px;

  /* Hero height. The layers are 3840x1700, so 44.3vw shows them full width.
     On short screens the whole picture is scaled down instead (sides fade to black), so the
     headline and buttons below still fit on the first screen. The logo ends 87% of the way down. */
  --logo-gap:      64px;     /* space between the logo and the "Available now" headline */
  --cta-room:      230px;    /* logo gap + headline + gap + buttons + 40px free at the bottom */
  --hero-h:        max(440px, min(max(44.3vw, 520px), (100vh - var(--nav-height) - var(--cta-room)) / .87));

  --font: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;          /* stops the page shifting when the overlay locks scrolling */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  padding-top: var(--nav-height);   /* room for the fixed navigation bar */
}

img { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
a:hover, a:focus-visible { color: var(--link-hover); }

:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 3px; }

.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;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  justify-content: center;
  background: #000;
}

.nav__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__list a {
  display: block;
  padding: 0 18px;
  line-height: var(--nav-height);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.nav__list a:hover,
.nav__list a:focus-visible { color: var(--text-strong); }
.nav__list a[aria-current="true"] {
  color: var(--text-strong);
  border-bottom-color: var(--text-strong);
}

/* ---------- Hero / parallax ---------- */
.hero {
  position: relative;
  height: var(--hero-h);
  overflow: hidden;
  background: var(--bg);
  scroll-margin-top: var(--nav-height);   /* so the Home link scrolls to the very top */
}

.hero__stage {
  position: absolute;
  inset: 0;
  width: min(100%, var(--hero-h) * 2.2588);   /* the picture's own proportions, centred */
  margin: 0 auto;
  /* soft edges, so a scaled-down picture blends into the page */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

/* Smoke: two layers of a seamlessly tiling texture (img/smoke.webp, 2576x1140). One slides
   slowly to the right, the other rises slowly; both also take part in the scroll parallax.
   "screen" lightens the scene with the smoke's light parts and leaves its dark parts invisible. */
.layer--smoke {
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: .14;                    /* strength of the drifting smoke (0.10 - 0.25 is subtle) */
  /* fades out towards the top of the picture */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}
.layer--smoke-rise { opacity: .10; }   /* strength of the rising smoke */
.smoke__drift {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--hero-h) * 4.519);   /* exactly two copies of the texture side by side */
  background: url("../img/smoke.webp") repeat-x 0 0 / 50% 100%;   /* each copy is exactly half the width */
  animation: smoke-drift 90s linear infinite;   /* time for one full loop; lower = faster */
  will-change: transform;
}
@keyframes smoke-drift {                /* drifts to the right (towards the mercenaries), looping seamlessly */
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.smoke__rise {                     /* drawn 1.4x larger and mirrored, so it doesn't repeat the drifting layer */
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--hero-h) * 3.163);   /* one copy of the texture at 1.4x the hero height */
  height: calc(var(--hero-h) * 2.8);    /* exactly two copies stacked */
  background: url("../img/smoke.webp") repeat-y 0 0 / 100% 50%;
  animation: smoke-rise 150s linear infinite;   /* time for one full loop; lower = faster */
  will-change: transform;
}
@keyframes smoke-rise {                 /* rises slowly, looping seamlessly */
  from { transform: scaleX(-1) translateY(0); }
  to   { transform: scaleX(-1) translateY(-50%); }
}

.hero__mobile { display: none; }

/* ---------- Sections ---------- */
main { background: var(--bg); }

.section {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 0 160px;          /* space between sections */
  scroll-margin-top: calc(var(--nav-height) + var(--anchor-gap));
}
#trailer { padding-top: 150px; }   /* breathing room under the Steam button */
/* Gives the page enough length for the Press and Contact anchors to scroll to the top */
#contact { min-height: 36vh; padding-bottom: 0; }

.section__title {
  margin: 0;
  padding-bottom: 12px;
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-strong);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 0;                         /* keeps the glow behind the text, above the page */
}
.section__title::before {             /* wide, smooth glow behind the title text */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(var(--glow-width), 100%);
  height: 260%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse closest-side,
    rgba(204, 220, 228, var(--glow-strength)) 0%,
    rgba(204, 220, 228, calc(var(--glow-strength) * .55)) 35%,
    rgba(204, 220, 228, calc(var(--glow-strength) * .2)) 65%,
    rgba(204, 220, 228, 0) 100%);
  pointer-events: none;
}

.section__body {
  padding: 40px var(--gutter) 0;
}
.section__body p { margin: 0; }
#contact .section__body { text-align: center; }

/* Text blocks sit further in than the images and video, which keep the full column width */
.section__body--text {
  padding-left: calc(var(--gutter) + var(--text-inset));
  padding-right: calc(var(--gutter) + var(--text-inset));
}

/* Links inside text: brighter than the body copy */
.section__body p a,
.list a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(232, 241, 245, .4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.section__body p a:hover, .section__body p a:focus-visible,
.list a:hover, .list a:focus-visible {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

/* ---------- Two-column layout (single column on mobile) ---------- */
.cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--col-gap);
}

.col h3 {
  margin: 0 0 24px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-strong);
}

/* Headline + buttons under the hero */
.cta {
  position: relative;
  z-index: 1;                      /* stays above the hero layers it overlaps */
  /* Pulls the headline up into the dark bottom of the hero so it sits --logo-gap under the logo
     (the logo ends 13% of the hero height above the hero's bottom edge). */
  margin-top: calc(var(--logo-gap) - .13 * var(--hero-h));
  padding: 0 var(--gutter);
  text-align: center;
}
.cta__headline {                   /* "Full release coming early 2027" */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 18px rgba(242, 199, 92, .35);    /* warm glow */
}
.cta__headline::before,
.cta__headline::after {            /* thin rules either side, echoing the line under the logo */
  content: "";
  width: 80px;
  height: 1px;
  background: rgba(242, 199, 92, .6);
}
.cta__buttons {
  display: flex;
  justify-content: center;
  gap: 20px;                       /* space between the two buttons */
  margin-top: 40px;                /* space between the text and the buttons */
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 56px;
  min-width: 330px;                /* keeps both buttons the same width */
  padding: 0 32px;
  border: 2px solid var(--btn-edge);
  border-radius: 3px;
  background: rgba(204, 220, 228, .04);
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .1s ease;
}
.btn__logo {
  display: block;
  height: 26px;
  width: auto;
}
.btn__logo--discord { height: 18px; }   /* the Discord logo is much wider than Steam's, so it is drawn a bit smaller */

/* Each button keeps its look on hover and only gets brighter, so Steam always stays the most prominent. */

/* Discord button: outlined; on hover a brighter edge and a see-through blue tint */
.btn:hover,
.btn:focus-visible {
  border-color: var(--text-strong);
  background: rgba(134, 173, 192, .3);   /* #86adc0 at 30% */
  color: var(--link-hover);
}
.btn:active {
  background: rgba(134, 173, 192, .2);
  transform: translateY(1px);            /* pressed */
}

/* Main button (Steam): filled; on hover a brighter fill and a faint glow */
.btn--primary {
  border-color: #b4c6cf;
  background: #b4c6cf;
  color: #000;
}
.btn--primary:hover,
.btn--primary:focus-visible {
  border-color: var(--link);
  background: var(--link);
  color: #000;
  box-shadow: 0 0 28px rgba(204, 220, 228, .25);   /* glow in the button's own colour */
}
.btn--primary:active {
  border-color: #a3b7c1;
  background: #a3b7c1;
  box-shadow: none;
  transform: translateY(1px);            /* pressed */
}

/* Press kit download, centred under the Fact sheet and Features columns */
.press-kit {
  display: flex;
  justify-content: center;
  padding-top: 56px;
}
.btn__meta {                       /* file type and size, e.g. "ZIP · 48 MB" */
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--text-muted);
  transition: color .2s ease;
}
.btn:hover .btn__meta,
.btn:focus-visible .btn__meta { color: var(--text); }

/* Video (16:9, scales with the column) */
.section--video .section__body { padding-top: 0; }
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0d10;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__fallback {
  position: absolute;
  inset: 0;
  display: block;
}
.video__fallback[hidden] { display: none; }
.video__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85);
  transition: filter .3s ease;
}
.video__fallback:hover img,
.video__fallback:focus-visible img { filter: brightness(1.05); }
.video__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  border: 2px solid var(--text-strong);
}
.video__play::after {
  content: "";
  position: absolute;
  left: 30px; top: 22px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--text-strong);
}

/* Screenshots */
.shot {
  display: block;
  overflow: hidden;
  background: #0a0d10;
}
.shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .4s ease, filter .3s ease;
  filter: brightness(.92);
}
.shot:hover img,
.shot:focus-visible img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* Press lists */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
  position: relative;
  padding-left: 14px;
  overflow-wrap: anywhere;
}
.list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

/* ---------- Screenshot overlay ---------- */
html.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;                     /* above the navigation bar */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 32px;
  background: rgba(0, 0, 0, .92);
  cursor: pointer;                  /* clicking outside the image closes it */
  opacity: 0;
  transition: opacity .2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #0a0d10;
  border-radius: 3px;
  box-shadow: 0 0 60px rgba(0, 0, 0, .8);
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 24px;
  min-height: 40px;
  padding: 0 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: rgba(204, 220, 228, .04);
  border: 2px solid var(--btn-edge);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  border-color: var(--text-strong);
  background: var(--text-strong);
  color: #000;
}

/* ---------- Footer ---------- */
.footer {
  padding: 40px var(--gutter) 40px;
  text-align: center;
}
.footer__brand {
  display: inline-block;
  transition: opacity .2s ease;
}
.footer__brand:hover,
.footer__brand:focus-visible { opacity: .8; }

.footer__logo {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 auto;
}
.footer__copy {
  margin: 14px 0 0;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  :root { --gutter: 24px; --col-gap: 20px; --text-inset: 4%; --anchor-gap: 32px; }

  body { font-size: 17px; }

  .nav__list { gap: 0; }
  .nav__list a { padding: 0 12px; font-size: 13px; }

  /* Parallax is replaced by the static cover image */
  .hero { height: auto; }
  .hero__stage { display: none; }
  .hero__mobile {
    display: block;
    width: 100%;
    height: auto;
  }
  .hero::after {                     /* fade the cover into the page */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 18%;
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg));
    pointer-events: none;
  }

  #trailer { padding-top: 72px; }
  .lightbox { padding: 64px 12px 20px; }
  .lightbox__close { right: 12px; }
  /* Headline 32px under the logo. The mobile cover is 748x896 and its logo ends 14.4% above
     the bottom, i.e. 17.25vw at full width; change 32px to move the headline. */
  .cta { margin-top: calc(32px - 17.25vw); }
  .cta__headline { font-size: 14px; letter-spacing: .14em; white-space: nowrap; }
  .cta__headline::before,
  .cta__headline::after { display: none; }   /* no room for the side rules on a phone */
  .cta__buttons {
    margin-top: 24px;
    flex-direction: column-reverse;   /* Steam button on top, Discord below */
    align-items: center;
    gap: 14px;
  }
  .btn { width: 100%; min-width: 0; max-width: 330px; padding: 0 16px; }
  .section { padding-bottom: 96px; }
  .section__title {
    font-size: 26px;
    margin: 0 var(--gutter);   /* shortens the divider line, with space at the screen edges */
  }
  .section__body { padding-top: 28px; }

  /* Two columns collapse into one */
  .cols { grid-template-columns: 1fr; }
  .col + .col { margin-top: 12px; }
}

@media (max-width: 360px) {
  .nav__list a { padding: 0 8px; font-size: 12px; letter-spacing: .04em; }
  .cta__headline { font-size: 13px; letter-spacing: .1em; }
  .btn { gap: 10px; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shot img { transition: none; }
  .smoke__drift, .smoke__rise { animation: none; }
  .lightbox { transition: none; }
}