/* doorstepgame.com. The page is the game's own world: it starts out on the lawn, with the game playing beside the
   pitch, looks in on their street, goes indoors, onto the cream of the cottage's walls, for the clips of what happens
   there, and back out onto the lawn to sign up. After dark the lawn, the street and the shadows on them take the game's
   night tint.

   The game plays on iPhone Duo's outer screen in Apple's own bezel, unaltered, with nothing over it or round it, as
   Apple's guidelines have it (docs/MARKETING.md, "Apple's rules").

   The pixel art is only ever shown at whole device pixels to an art pixel. The logo and lawn are one to one and shown
   at 2, 3 or 4 points to a pixel; the street is shown at one point to a pixel. The clip at the top is shown 350 points
   wide, 2 points to an art pixel (`tools/site-clips`); the smaller ones are scaled smoothly, as video always is. */

:root {
  --lawn: #8cc168;
  --paper: #fbf6ea;
  --ink: #4a2f2a;
  --quiet: #6b5048;
  --line: #4a2f2a;
  --depth: #2e1d19;
  /* White on it is 5:1. */
  --door: #bf4836;
  --door-pressed: #9c3a2b;
  --on-door: #ffffff;
  --focus: #4e5873;
  --field: #ffffff;
  --field-line: var(--line);
  --on-lawn: #2e1d19;
  --on-lawn-quiet: #3d2a24;
  --glass: rgb(28 28 30 / 0.62);
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1f2620;
    --ink: #f4e6c8;
    --quiet: #cdbd9e;
    --line: #0e120e;
    --depth: #070907;
    --focus: #b9c3dc;
    --field: #141914;
    /* The card's own edge is too near the field's fill to see after dark, so the field takes the quieter ink: 8:1. */
    --field-line: var(--quiet);
    --on-lawn: #f4e6c8;
    --on-lawn-quiet: #e6d8ba;
  }
}

* { box-sizing: border-box; }

/* Text follows the reader's own size: iOS's text size on an iPhone or iPad, and otherwise the browser's, from 17 points.
   The Mac has `-apple-system-body` too, but there it's always 13 points, so it's kept to where there's touch. */
html {
  background: var(--lawn) url("/media/lawn.png") repeat;
  background-size: 768px 768px;
  image-rendering: pixelated;
  -webkit-text-size-adjust: 100%;
  font-size: 106.25%;
}

@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
}

/* After dark, the lawn under the game's night tint, drawn that way so it's the same before the picture comes and past
   the ends of the page. */
@media (prefers-color-scheme: dark) {
  html { background-color: #385840; background-image: url("/media/lawn-night.png"); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The lawn behind it all is pixelated, and what's in front isn't, unless it says so: the logo, the cottage and the
   street do. */
body {
  margin: 0;
  image-rendering: auto;
  color: var(--ink);
  font: 1rem/1.5 var(--text);
}

img { display: block; }

[hidden] { display: none !important; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

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

h1, h2, h3 { font-family: var(--round); line-height: 1.2; text-wrap: balance; }

h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 0 0 10px; }

h3 { font-size: 1.12rem; margin: 14px 0 4px; }

p { margin: 0 0 12px; text-wrap: pretty; }

p:last-child { margin-bottom: 0; }

.quiet, .fine { color: var(--quiet); }

.fine { font-size: 0.88rem; }

/* A big red door of a button, with the logo plaque's dark edge and the drop beneath it. */
.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: var(--door);
  color: var(--on-door);
  box-shadow: 0 4px 0 var(--depth);
  font: 600 1.06rem/1.1 var(--round);
  text-decoration: none;
  cursor: pointer;
}

.button:active, button:active { background: var(--door-pressed); box-shadow: 0 1px 0 var(--depth); transform: translateY(3px); }

/* MARK: The game, playing

   Each clip is the outer screen as it looks while the game's running, under Apple's iPhone Duo bezel
   (`media/iphone-duo.png`, "Night Sky - Outer Closed Portrait"), whose screen is 1398 by 2034 of its 1574 by 2194,
   88 in from the left and 80 down. The clip is made a little bigger than that, to even numbers (`tools/site-clips`),
   and what's over goes under the bezel's edge. The browser rounds the clip and the bezel to device pixels separately,
   which can leave a hairline of the page between them, so a ring of black, the colour of the screen's own edge, goes
   round the clip, under the bezel. It plays while it's on screen, with its pause button under it, from `site.js`, as
   nothing goes over, round or across Apple's picture. */

.device {
  position: relative;
  margin: 0;
}

.device video {
  position: absolute;
  left: calc(88 / 1574 * 100%);
  top: calc(80 / 2194 * 100%);
  width: calc(1400 / 1574 * 100%);
  height: auto;
  /* The screen's corners away from the hinge are about 175 of the bezel's pixels round, past where the phone itself
     curves, so the clip's are too, to stay under the bezel's edge; the hinge side's are under it already. */
  border-radius: 0 calc(175 / 1400 * 100%) calc(175 / 1400 * 100%) 0 / 0 calc(175 / 2035 * 100%) calc(175 / 2035 * 100%) 0;
  background: #000;
  box-shadow: 0 0 0 2px #000;
}

.bezel {
  position: relative;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.toggle {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--depth);
}

.toggle:active { background: var(--paper); box-shadow: 0 1px 0 var(--depth); transform: translateY(2px); }

.toggle svg { width: 16px; height: 16px; fill: currentColor; }

/* MARK: The top of the page, out on the lawn

   On a phone, the logo, what it is in a line, and then the game, so it's playing on the first screen, with the rest
   after it. Wider, the game is beside all of it. */

.hero {
  display: grid;
  justify-items: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) var(--gutter) 48px;
  color: var(--on-lawn);
  text-align: center;
}

h1 { margin: 0 0 16px; }

.logo { width: 142px; height: 154px; image-rendering: pixelated; }

.lede {
  max-width: 520px;
  font-family: var(--round);
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 22px;
}

/* The bezel at a quarter of its size, which puts the game at 350 points, 2 to an art pixel, and smaller only where the
   screen is. */
.hero-shot { width: min(100%, 393.5px); }

.shot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }

.shot .device { flex: 1 0 100%; }

.shot .toggle { margin-top: 6px; }

/* As tall as the pause button that comes beside it, so nothing moves when it does. */
.caption { display: flex; align-items: center; min-height: 44px; margin: 6px 0 0; font-family: var(--round); font-weight: 600; }

.more { display: grid; justify-items: center; max-width: 520px; margin-top: 28px; }

.platforms {
  display: grid;
  gap: 2px;
  margin: 8px 0 22px;
  color: var(--on-lawn-quiet);
}

.platforms strong { color: var(--on-lawn); font-family: var(--round); font-size: 1.12rem; }

/* MARK: Their street

   Their home in the middle, its roof off, with the neighbours either side and the road along the front, at one point to
   an art pixel, in a frame of its own like the clips'. */

.street {
  height: clamp(300px, 52vw, 520px);
  max-width: 1180px;
  margin: 0 max(var(--gutter), calc((100% - 1180px) / 2)) 64px;
  border: 3px solid var(--line);
  border-radius: 12px;
  background: url("/media/street.png") center / 2352px 520px no-repeat;
  box-shadow: 0 5px 0 var(--depth);
  image-rendering: pixelated;
}

@media (prefers-color-scheme: dark) {
  .street { background-image: url("/media/street-night.png"); }
}

/* MARK: Indoors, what happens

   On a phone, a row to swipe through, one whole phone at a time, as Apple's pictures are never cut off; on an iPad,
   two across; wider, all eight at once, four by two. */

.clips {
  background: var(--paper);
  border-block: 4px solid var(--line);
  padding: 56px 0 64px;
}

.clips-head {
  max-width: 640px;
  margin: 0 auto 32px;
  padding: 0 var(--gutter);
  text-align: center;
}

.clips-head p { color: var(--quiet); }

.row {
  display: flex;
  /* Wider than the margins, so the next one starts past the edge of the screen. */
  gap: calc(var(--gutter) * 2);
  margin: 0;
  padding: 6px var(--gutter) 18px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}

/* The clip, then its name beside its pause button, then what it shows. */
.clip {
  flex: 0 0 100%;
  /* No bigger than a phone's own width, in the middle of where it scrolls to, on anything wider. */
  padding-inline: max(0px, (100% - 400px) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "screen screen" "title toggle" "text text";
  align-items: center;
  column-gap: 12px;
  scroll-snap-align: start;
}

.clip .device { grid-area: screen; margin-bottom: 4px; }

/* As tall as the pause button beside it, so nothing moves when it comes. */
.clip h3 { grid-area: title; display: flex; align-items: center; min-height: 44px; margin: 6px 0 4px; }

.clip .toggle { grid-area: toggle; margin-top: 6px; }

.clip p { grid-area: text; color: var(--quiet); }

.swipe { margin-top: 6px; font-weight: 600; }

@media (min-width: 700px) {
  .swipe { display: none; }

  .clip { padding-inline: 0; }

  .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
    max-width: 1180px;
    margin: 0 auto;
    overflow: visible;
  }

  .clip { align-content: start; }
}

@media (min-width: 900px) {
  .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* MARK: Back out on the lawn, to sign up */

.signup {
  position: relative;
  max-width: 520px;
  margin: 200px auto 0;
  padding: 26px 24px 26px;
  border: 3px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 5px 0 var(--depth);
  text-align: center;
}

@media (max-width: 559px) {
  .signup { margin-inline: var(--gutter); }
}

/* The cottage stands on the card, at 3 points to a pixel, its lawn over the card's edge. */
.house {
  position: absolute;
  left: 50%;
  top: 0;
  width: 156px;
  height: 180px;
  transform: translate(-50%, calc(-100% + 15px));
  image-rendering: pixelated;
}

.signup form { display: grid; gap: 4px; margin-top: 14px; text-align: left; }

.field { display: grid; gap: 6px; margin-bottom: 8px; font-weight: 600; }

input[type="email"] {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 3px solid var(--field-line);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  /* Never under 16 points, or iOS zooms the page to type into it. */
  font: max(1rem, 16px)/1.3 var(--text);
}

input[type="email"]::placeholder { color: var(--quiet); opacity: 0.8; }

.tick {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}

.tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--door); flex: none; }

.signup button { margin: 12px 0 10px; }

.signup form:not([hidden]) ~ .soon { display: none; }

.soon { margin-top: 14px; font-weight: 600; }

/* MARK: The foot of the page, on the lawn */

footer {
  max-width: 884px;
  margin: 0 auto;
  padding: 40px var(--gutter) max(32px, env(safe-area-inset-bottom));
  color: var(--on-lawn);
  text-align: center;
}

footer p { margin-bottom: 4px; }

footer .fine { color: inherit; opacity: 0.85; margin-top: 8px; }

/* A link on its own is 44 points tall, to be easy to tap. */
footer a, .go { display: inline-block; padding: 10px 0; }

/* MARK: After signing up */

.thanks {
  display: grid;
  gap: 20px;
  max-width: 460px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) var(--gutter) 40px;
}

.thanks h1 a { display: block; width: max-content; margin: 0 auto; }

.card {
  background: var(--paper);
  border: 3px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--depth);
  padding: 18px 20px 20px;
}

/* MARK: Wider screens: the game beside what it is */

@media (min-width: 820px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 393.5px;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". shot" "logo shot" "lede shot" "more shot" ". shot";
    column-gap: 56px;
    justify-items: start;
    padding-top: max(56px, env(safe-area-inset-top));
    padding-bottom: 64px;
    text-align: left;
  }

  .hero h1 { grid-area: logo; }

  .lede { grid-area: lede; }

  .hero-shot { grid-area: shot; align-self: center; }

  .more { grid-area: more; justify-items: start; margin-top: 0; }

  .logo { width: 284px; height: 308px; }
}

/* Where the clip at the top is its own 350 points on a 3x screen, every art pixel is 6 device pixels, as it's made. */
@media (min-resolution: 3dppx) and (min-width: 426px) {
  .hero-shot video { image-rendering: pixelated; }
}

@media (prefers-reduced-motion: reduce) {
  .button:active, button:active, .toggle:active { transform: none; }
}