/* Tokens mirror the in-game palette and type (godot/scripts, godot/assets/fonts). */
:root {
  --color-bg: #121f1b;
  --color-surface: #303c35;
  --color-line: #3d4d40;
  --color-text: #cfc8ad;
  --color-muted: #afb6a2;
  --color-heading: #faf5db;
  --color-accent: #f2c985;
  --color-alert: #f08a72;
  --color-scrim-soft: rgb(18 31 27 / 0.6);
  --color-scrim-light: rgb(18 31 27 / 0.35);
  --color-scrim-mid: rgb(18 31 27 / 0.84);
  --color-scrim-hard: rgb(18 31 27 / 0.94);

  --font-display: "Big Shoulders Stencil", "Barlow Condensed", Impact, sans-serif;
  --font-ui: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-type: "Special Elite", "Courier New", monospace;

  --text-sm: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2.5rem;
  --text-display: clamp(4rem, 19vw, 9rem);

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 9rem;

  --tracking-wide: 0.14em;
  --radius: 0.125rem;
  --radius-icon: 22%;
  --size-icon: 5rem;
  --size-control: 3.25rem;
  --size-preview: 11rem;
  --border: 1px solid var(--color-line);
  --measure: 34rem;
  --content: 68rem;
  --grain-strength: 0.16;
  --layer-grain: 10;
  --stamp-tilt: -4deg;
  --size-stamp: 7.5rem;
  --size-ink: 24rem;
  --plate-margin: 12px;
  --plate-bleed: 4px;
  --plate-rim: 2px;
  --size-tap: 2.75rem;
  --ease-quick: 120ms ease-out;
  --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-rise: 500ms;
  --dur-settle: 2400ms;
  --dur-stamp: 320ms;
  --stagger: 90ms;
  --rise-distance: 0.5rem;
  --lightbox-width: 96vw;
  --lightbox-height: 92dvh;
}

@font-face {
  font-family: "Big Shoulders Stencil";
  src: url("assets/fonts/BigShouldersStencilDisplay-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Special Elite";
  src: url("assets/fonts/SpecialElite-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

/* Film grain over the whole page. Mid-grey noise in overlay mode leaves the
   colours alone and only roughens them. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--layer-grain);
  background: url("assets/grain.png");
  mix-blend-mode: overlay;
  opacity: var(--grain-strength);
  pointer-events: none;
}

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

p,
h1,
h2,
ul,
figure {
  margin: 0;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* The page behind an open overlay should not scroll. */
html:has(dialog[open]) {
  overflow: hidden;
}

/* Hero */

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: var(--space-6) var(--space-4);
  isolation: isolate;
}

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Clips the backdrop while it settles from slightly zoomed in. */
  overflow: hidden;
}

.hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-scrim-soft),
    var(--color-scrim-hard) 70%,
    var(--color-bg)
  );
}

.hero__content {
  display: grid;
  gap: var(--space-4);
  align-content: center;
  justify-items: start;
  width: 100%;
  max-width: var(--content);
  margin-inline: auto;
}

.hero__icon {
  width: var(--size-icon);
  border-radius: var(--radius-icon);
}

.hero__title {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 0.85;
  text-transform: uppercase;
}

/* Worn stencil ink on the wordmark, from the same recipe as the game's stamps. */
.hero__title,
.footer__name {
  -webkit-mask: url("assets/ink.webp") 0 0 / var(--size-ink);
  mask: url("assets/ink.webp") 0 0 / var(--size-ink);
}

.hero__tagline {
  max-width: var(--measure);
  color: var(--color-heading);
  font-family: var(--font-type);
  font-size: var(--text-lg);
  line-height: 1.3;
  text-wrap: balance;
}

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
  color: var(--color-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  list-style: none;
  text-transform: uppercase;
}

.status__platform {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.status__icon {
  width: auto;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.5;
}

/* The stamp texture comes from the game's own generator (tools/gen_ui_textures.py). */
.stamp {
  width: var(--size-stamp);
  aspect-ratio: 268 / 102;
  overflow: hidden;
  background: var(--color-accent);
  -webkit-mask: url("assets/stamp-beta.png") center / contain no-repeat;
  mask: url("assets/stamp-beta.png") center / contain no-repeat;
  /* The label is in the texture; keep the text for screen readers only. */
  text-indent: -100vw;
  white-space: nowrap;
  rotate: var(--stamp-tilt);
}

/* Signup */

.signup {
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--measure);
  margin-top: var(--space-3);
}

.signup__label {
  color: var(--color-heading);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.signup__row {
  display: grid;
  gap: var(--space-2);
}

.signup__input,
.button {
  min-height: var(--size-control);
  font: inherit;
}

.signup__input {
  width: 100%;
  padding-inline: var(--space-3);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-scrim-hard);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.45);
  color: var(--color-heading);
}

.signup__input:focus-visible {
  border-color: var(--color-accent);
  outline-offset: 0;
}

.signup__input::placeholder {
  color: var(--color-muted);
}

.signup__trap {
  position: absolute;
  left: -100vw;
}

/* Buttons are the game's steel plates, nine-sliced like the HUD draws them. */
.button,
.trailer-card {
  border: var(--plate-margin) solid transparent;
  border-image: url("assets/plate.png") 24 fill / var(--plate-margin) /
    var(--plate-bleed) round;
  background: none;
  color: var(--color-heading);
  cursor: pointer;
}

/* Clear the plate's drop shadow so the focus ring is not drawn through it. */
.button:focus-visible,
.trailer-card:focus-visible {
  outline-offset: var(--plate-bleed);
}

.button {
  padding-inline: var(--space-3);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.button--armed {
  border-image-source: url("assets/plate-armed.png");
  color: var(--color-accent);
}

.button:hover,
.trailer-card:hover {
  filter: brightness(1.14);
}

.button:active,
.trailer-card:active {
  border-image-source: url("assets/plate-pressed.png");
  translate: 0 1px;
}

.button--armed:active {
  border-image-source: url("assets/plate-armed.png");
  filter: brightness(0.8);
}

.button,
.trailer-card {
  transition:
    filter var(--ease-quick),
    translate var(--ease-quick);
}

.button:disabled {
  cursor: progress;
  opacity: 0.6;
}

.signup__status {
  font-size: var(--text-sm);
}

/* Stays in the page as a live region, but takes no room until it speaks. */
.signup__status:empty {
  margin-top: calc(var(--space-2) * -1);
}

.signup__status[data-state="error"] {
  color: var(--color-alert);
}

.signup__status[data-state="success"] {
  color: var(--color-accent);
}

/* Trailer card */

.trailer-card {
  display: grid;
  grid-template-columns: var(--size-preview) auto;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2) 0 0;
  font: inherit;
  text-align: left;
}

/* Pull the clip out over the plate's bevel so it meets the outer rim. */
.trailer-card__preview {
  margin: calc(var(--plate-rim) - var(--plate-margin));
  margin-right: 0;
}

.trailer-card__preview video {
  display: block;
  width: 100%;
  height: auto;
}

.trailer-card__play {
  width: 0.75em;
  height: 0.75em;
  fill: var(--color-accent);
}

.trailer-card__label {
  display: grid;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.trailer-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Screenshots */

.shots {
  display: grid;
  gap: var(--space-5);
  /* content-box so the section lines up with the hero text. */
  box-sizing: content-box;
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-4);
}

.section-title {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.shot {
  display: grid;
  gap: var(--space-2);
}

.shot img {
  width: 100%;
  border: var(--border);
  background: var(--color-surface);
}

.shot__link {
  display: block;
  cursor: zoom-in;
}

.shot__link img {
  transition: border-color var(--ease-quick);
}

.shot__link:hover img,
.shot__link:focus-visible img {
  border-color: var(--color-accent);
}

.shot figcaption {
  max-width: var(--measure);
  font-size: var(--text-sm);
}

.shot strong {
  color: var(--color-heading);
  font-weight: 600;
}

/* Lightbox */

.lightbox {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: none;
}

.lightbox::backdrop {
  background: var(--color-scrim-hard);
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: lightbox-in 180ms var(--ease-settle);
  }

  .lightbox[open]::backdrop {
    animation: fade-in 180ms ease-out;
  }
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    scale: 0.97;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.lightbox__close {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-out;
}

.lightbox__image {
  max-width: var(--lightbox-width);
  max-height: var(--lightbox-height);
  border: var(--border);
}

.lightbox__video {
  display: block;
  width: auto;
  max-width: var(--lightbox-width);
  height: auto;
  /* Leave room for the Close button underneath. */
  max-height: calc(var(--lightbox-height) - var(--size-control) - var(--space-3));
  margin-bottom: var(--space-3);
  border: var(--border);
  background: var(--color-bg);
}

/* Footer */

/* The treeline is the bottom edge of the hero's aerial shot, so the page ends
   in the same forest it opened on. */
.footer {
  padding: var(--space-8) var(--space-4) var(--space-6);
  /* A long, eased fade so the trees surface gradually below the screenshots. */
  background:
    linear-gradient(
      to bottom,
      var(--color-bg) 0%,
      var(--color-scrim-hard) 22%,
      var(--color-scrim-mid) 45%,
      var(--color-scrim-soft) 68%,
      var(--color-scrim-light) 100%
    ),
    url("assets/footer-forest.webp") center bottom / cover;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.footer__inner {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: var(--content);
  margin-inline: auto;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__icon {
  width: var(--size-control);
  border-radius: var(--radius-icon);
}

.footer__name {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap);
  color: var(--color-heading);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
}

.footer__link:hover {
  color: var(--color-accent);
}

/* Arrival: the one choreographed moment. The outpost settles into view, the
   text comes up in order, and the beta stamp lands last. Everything ends in its
   normal resting state, so nothing depends on the animation having run. */

@media (prefers-reduced-motion: no-preference) {
  .hero__backdrop img {
    animation: backdrop-settle var(--dur-settle) var(--ease-settle) both;
  }

  .hero__icon,
  .hero__title,
  .hero__tagline,
  .status__platform,
  .signup,
  .trailer-card {
    animation: rise var(--dur-rise) var(--ease-settle) both;
  }

  .hero__icon {
    animation-delay: calc(var(--stagger) * 1);
  }

  .hero__title {
    animation-delay: calc(var(--stagger) * 2);
  }

  /* Worn stencil ink on the wordmark, from the same recipe as the game's stamps. */
.hero__title,
.footer__name {
  -webkit-mask: url("assets/ink.webp") 0 0 / var(--size-ink);
  mask: url("assets/ink.webp") 0 0 / var(--size-ink);
}

.hero__tagline {
    animation-delay: calc(var(--stagger) * 3);
  }

  .signup {
    animation-delay: calc(var(--stagger) * 4);
  }

  .trailer-card {
    animation-delay: calc(var(--stagger) * 5);
  }

  .status .stamp {
    animation: stamp-in var(--dur-stamp) ease-in both;
    animation-delay: calc(var(--stagger) * 9);
  }

  .status__platform {
    animation-delay: calc(var(--stagger) * 11);
  }

  .signup__status:not(:empty) {
    animation: rise 200ms var(--ease-settle);
  }
}

@keyframes backdrop-settle {
  from {
    opacity: 0;
    scale: 1.08;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 var(--rise-distance);
  }
}

/* Comes down large and crooked, overshoots, then sits at its tilt. */
@keyframes stamp-in {
  from {
    opacity: 0;
    scale: 1.8;
    rotate: -14deg;
  }

  60% {
    opacity: 1;
    scale: 0.94;
    rotate: var(--stamp-tilt);
  }
}

@media (min-width: 48rem) {
  .hero {
    padding-inline: var(--space-6);
  }

  /* Wide screens: keep the outpost lit on the right, text on the dark left. */
  .hero__backdrop::after {
    background:
      linear-gradient(to bottom, transparent 70%, var(--color-bg)),
      linear-gradient(to right, var(--color-scrim-hard), var(--color-scrim-soft) 45%, transparent 85%);
  }

  .signup__row {
    grid-template-columns: 1fr auto;
  }

  .shots {
    grid-template-columns: 1fr 1fr;
    padding-inline: var(--space-6);
  }

  .footer {
    padding-inline: var(--space-6);
  }

  .footer__inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .footer__link {
    justify-self: end;
  }

  .shots .section-title,
  .shot--wide {
    grid-column: 1 / -1;
  }
}