/*
  Parallax Dawn site styles.

  Colors are the game's own interface palette (Color Direction v1), and the type
  is the game's interface font, so the site and the game read as one thing.
  The opening section follows the game's title screen: same art, same ship,
  same title position and letter spacing.
*/

@font-face {
  font-family: "Source Sans 3";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/SourceSans3-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Source Sans 3";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/SourceSans3-Regular.ttf") format("truetype");
}

:root {
  color-scheme: dark;

  /* Grounds */
  --space: #000;
  --slate: #1c262a;
  --slate-separator: #3d4a4f;
  --slate-edge: #718185;

  /* Text over space and worlds */
  --ink: #e6e6e6;
  --ink-secondary: #c1c1c1;
  --ink-recessive: #9c9c9c;

  /* Text on slate */
  --read: #d6d6d6;
  --read-secondary: #b8b8b8;

  /* Short labels */
  --label: #aec6ca;

  /* Focus ring */
  --focus: #d1c59d;

  /* The one filled button */
  --action: #d4d4d4;
  --action-hover: #e5e5e5;
  --action-pressed: #b2b2b2;
  --action-ink: #131313;

  /* The title screen puts its title 8.5% in from the left; the whole page keeps that edge. */
  --edge: max(1.25rem, 8.5vw, (100vw - 100rem) / 2);
  --section-space: clamp(4.5rem, 11vw, 9rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--space);
  color: var(--ink-secondary);
  font: 400 1.125rem/1.6 "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

ul {
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

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

[data-steam="off"] .steam-on,
[data-steam="on"] .steam-off {
  display: none !important;
}

.wrap {
  margin-inline: var(--edge);
}

/* ---------- Title ---------- */

.wordmark {
  --wordmark: clamp(3.75rem, 19vw, 9.5rem);
  color: var(--ink);
  font-size: var(--wordmark);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark__a,
.wordmark__b {
  display: block;
}

.wordmark__a {
  font-size: 0.486em;
  letter-spacing: 0.145em;
}

.wordmark__b {
  margin-top: 0.11em;
  letter-spacing: 0.12em;
}

.wordmark--small {
  --wordmark: 2.75rem;
}

/* ---------- Opening ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(22rem, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--space);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 22%;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 0.68) 82%, #000);
  pointer-events: none;
}

.hero__text {
  position: relative;
  z-index: 2;
  grid-row: 1;
  padding: clamp(2.5rem, 12vh, 11rem) var(--edge) 0;
}

.cta {
  margin-top: clamp(1.25rem, 3vh, 2rem);
}

.hero__art {
  --scroll: 0;
  position: relative;
  grid-row: 2;
  overflow: hidden;
  container-type: size;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4rem);
  mask-image: linear-gradient(to bottom, transparent, #000 4rem);
}

/*
  The scene is the intro screen's picture: the dawn art with the Setu fixed on it.
  The ship never moves or turns against the art; only the whole picture is scaled
  and cropped to suit the screen. On a phone it is enlarged (--zoom) and cropped at
  the sides so the ship and the sunrise both stay in view.
*/
.hero__scene {
  --zoom: 1.95;
  position: absolute;
  bottom: 0;
  left: calc(var(--zoom) * -29.5%);
  width: calc(var(--zoom) * 100%);
  aspect-ratio: 1672 / 941;
  /* The picture's top edge is dark sky; fade it so it never shows as a line against the black page. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
  transform: translate3d(0, calc(var(--scroll) * 0.2px), 0);
}

/* Shorter than its space: sit on the bottom edge. Taller: centre, as the game does. */
@supports (top: 1cqh) {
  .hero__scene {
    --spare: calc(100cqh - var(--zoom) * 100cqw * 941 / 1672);
    top: max(var(--spare), var(--spare) / 2);
    bottom: auto;
  }
}

.hero__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/*
  Numbers from the game's title screen: the ship's flight-axis pivot sits 43% across
  and 53% down, its picture is 600 of 1920 wide, and its bow points at the sun.
*/
.hero__ship {
  position: absolute;
  top: 53%;
  left: 43%;
  width: 19.095%;
  max-width: none;
  transform-origin: 53.56% 47.05%;
  translate: -53.56% -47.05%;
  rotate: -5.725deg;
}

.hero__cue {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  translate: -50% 0;
  animation: cue 2s ease-in-out infinite alternate;
}

.hero__cue::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border: solid var(--ink);
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
  translate: 0 -25%;
}

/* The game's "press any key" prompt breathes between these two strengths. */
@keyframes cue {
  from { opacity: 0.65; }
  to { opacity: 0.9; }
}

@keyframes arrive {
  from { opacity: 0; }
}

.hero__text > * {
  animation: arrive 1.2s ease-out backwards;
}

.hero__text > :nth-child(2) { animation-delay: 0.45s; }

/* Wide screens: the intro screen's own layout, with the picture behind the title. */
@media (min-width: 64rem) and (min-height: 34rem) and (min-aspect-ratio: 6/5) {
  .hero {
    grid-template-rows: minmax(36rem, 1fr);
  }

  .hero__art,
  .hero__text {
    grid-area: 1 / 1;
  }

  .hero__art {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__scene {
    --zoom: 1;
    left: 0;
  }

  .hero__text {
    align-self: start;
    padding-top: 15.5vh;
    padding-top: 15.5svh;
  }

  .hero .wordmark {
    --wordmark: clamp(4.25rem, 13.15vh, 9.5rem);
  }

  /* The ship begins 33% across; the status line under the title stops short of it. */
  .hero .cta {
    max-width: max(13.5rem, 32vw - var(--edge) - 0.75rem);
  }
}

/* ---------- Buttons and status ---------- */

.status {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.4em;
  color: var(--label);
  font-size: clamp(0.9375rem, 1.6vh, 1.0625rem);
  letter-spacing: 0.06em;
}

/* Each sentence stays whole: the second drops to its own line when space is short. */
.status span {
  white-space: nowrap;
}

.button,
.pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.65rem 1.6rem;
  border-radius: 2px;
  background: var(--action);
  color: var(--action-ink);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.15s;
}

.button:hover,
.pin:hover {
  background: var(--action-hover);
}

.button:active,
.pin:active {
  background: var(--action-pressed);
}

/* Follows the reader once the opening is out of view (Steam switch on, script running). */
.pin {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  translate: 0 0.5rem;
  transition: opacity 0.25s, translate 0.25s, visibility 0.25s, background-color 0.15s;
}

.pin.is-visible {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
}

@media (max-width: 40rem) {
  .pin {
    left: max(1rem, env(safe-area-inset-left));
  }
}

/* ---------- Shared text ---------- */

.headline {
  max-width: 19em;
  color: var(--ink);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.14;
  text-wrap: balance;
}

.prose {
  max-width: 36rem;
  margin-top: 2rem;
  font-size: clamp(1.125rem, 1rem + 0.3vw, 1.25rem);
}

/* ---------- The game ---------- */

/*
  A desert world with the Setu off its edge. On wide screens the words wrap around
  the planet and the ship: .game__shape is an invisible float the same size as the
  picture, cut to an outline traced from it (crop 1360x1020 in tools/prepare-assets.py:
  planet circle centre 993.5, 558.7, radius 771.7; Setu box 180,148 to 254,196,
  padded 16). The float is exactly the picture's size, so the section ends with the
  picture or the text, whichever is longer; lines past the picture run on below it.
  The picture and its float share one width (--w), so the outline stays on the
  planet at every screen size.
*/
/* A stretch of dark between the opening picture and this one, so they never butt together. */
.game {
  margin-top: clamp(2.5rem, 7vw, 6rem);
  padding-bottom: var(--section-space);
}

.game__shape {
  display: none;
}

.game__world {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 0% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 72%, transparent);
}

.game__text {
  position: relative;
  margin-top: -18%;
  margin-inline: var(--edge);
}

.game__hook {
  max-width: 17em;
  color: var(--ink);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 300;
  line-height: 1.2;
  text-wrap: pretty;
}

.game__lead {
  max-width: 32em;
  margin-top: 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.game__lead + .game__lead {
  margin-top: 0.6em;
}

.points {
  max-width: 34rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/*
  Each point is a small ring, like a star on a chart, and a faint line joins them
  into a route. The ring sits on the middle of the title's first line
  (title 1.375rem x 1.3 line height); the line runs from one ring to the next
  across the gap between points (--gap).
*/
.points {
  --gap: 1.5rem;
  --ring: 0.625rem;
  --ring-top: calc(1.375rem * 0.65 - var(--ring) / 2);
}

.points li {
  position: relative;
  padding-left: 1.75rem;
}

.points li + li {
  margin-top: var(--gap);
}

.points li::before {
  content: "";
  position: absolute;
  top: var(--ring-top);
  left: 0;
  width: var(--ring);
  height: var(--ring);
  border: 1px solid var(--label);
  border-radius: 50%;
}

.points li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--ring-top) + var(--ring) + 0.3rem);
  bottom: calc(0.3rem - var(--gap) - var(--ring-top));
  left: calc(var(--ring) / 2 - 0.5px);
  width: 1px;
  background: var(--slate-edge);
  opacity: 0.7;
}

.points h3 {
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.3;
}

.points p {
  margin-top: 0.3rem;
  text-wrap: pretty;
}

/* Tablets and narrow laptops: a wide strip of the planet above the words. */
@media (min-width: 40rem) {
  .game__world {
    aspect-ratio: 2 / 1;
  }

  .game__text {
    margin-top: -6%;
  }
}

@media (min-width: 72rem) {
  .game {
    --w: min(72vw, 76rem);
    position: relative;
    display: flow-root;
    padding-bottom: 0;
  }

  .game__shape {
    display: block;
    float: right;
    width: var(--w);
    height: calc(var(--w) * 0.75);
    shape-outside: polygon(100% 0%, 33.91% 0%, 30.77% 4.31%, 28.09% 8.63%, 25.77% 12.94%, 12.06% 12.94%, 12.06% 20.78%, 22.36% 20.78%, 20.73% 25.49%, 19.34% 30.39%, 18.22% 35.29%, 17.37% 40.2%, 16.77% 45.1%, 16.42% 50%, 16.31% 54.9%, 16.43% 59.8%, 16.8% 64.71%, 17.41% 69.61%, 18.27% 74.51%, 19.4% 79.41%, 20.81% 84.31%, 22.53% 89.22%, 24.58% 94.12%, 27.02% 99.02%, 27.56% 100%, 100% 100%);
    shape-margin: 2rem;
  }

  .game__world {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--w);
    aspect-ratio: auto;
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 8%),
      linear-gradient(to bottom, transparent, #000 10%, #000 66%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 8%),
      linear-gradient(to bottom, transparent, #000 10%, #000 66%, transparent);
    mask-composite: intersect;
  }

  .game__text {
    margin-top: 0;
    margin-right: 0;
    padding-top: clamp(3rem, 5vw, 5rem);
    padding-bottom: var(--section-space);
  }

  .game__hook,
  .game__lead {
    max-width: none;
  }

  .points {
    margin-top: 2.25rem;
  }

  .points {
    --gap: 1.25rem;
  }
}

/* ---------- Closing ---------- */

.closing {
  padding-block: 2rem 2.5rem;
}

/* Room for the following wishlist button once the Steam switch is on. */
[data-steam="on"] .closing {
  padding-bottom: 6rem;
}

/* The address is written out, not hidden behind an icon, so it can be read and copied. */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.contact__label {
  color: var(--label);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contact a {
  color: var(--ink);
  text-decoration-color: var(--slate-edge);
  text-underline-offset: 0.25em;
  overflow-wrap: anywhere;
}

.contact a:hover {
  text-decoration-color: currentColor;
}

.legal {
  margin-top: 1rem;
  color: var(--ink-recessive);
  font-size: 0.875rem;
}

/* ---------- Not-found page ---------- */

.lost {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem var(--edge);
}

.lost .prose {
  margin-top: 2.5rem;
}

.lost .cta a {
  color: var(--ink);
  text-underline-offset: 0.25em;
}

/* ---------- Calm mode ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__cue,
  .hero__text > * {
    animation: none;
  }

  .hero__scene {
    transform: none;
  }

  .pin {
    transition: none;
  }
}