/* Run Fat Marmot Run — landing page.
   The palette is lifted straight out of Palette.swift so the page and the game
   are the same underground. Everything pixel-scaled uses image-rendering:
   pixelated; a smoothed sprite here would give the whole thing away. */

:root {
  --void: #120b07;
  --soil: #241710;
  --soil-lit: #3b2410;
  --brick: #6f4824;
  --brick-lit: #8f6236;
  --fur: #b5793c;
  --belly: #f2c14e;
  --cream: #ffebc2;
  --gold: #ffd54f;
  --blue: #5fc9ff;
  --root: #6b8a42;
  --ink: #fff3dc;
  --dim: #b79a78;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Avenir Next", Avenir, "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background: var(--void);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ── The burrow itself ────────────────────────────────────────────────
   Real masonry, tiled, then pushed most of the way into the dark. It is
   meant to be felt rather than looked at. */
.soil {
  position: fixed;
  inset: 0;
  background-image: url("/assets/wall.png");
  background-size: 192px 192px;
  opacity: 0.22;
  z-index: 0;
}

/* Daylight leaking in from the surface, exactly as the game shades its
   board: brighter and cooler at the top, warmer and darker on the way down,
   with the corners falling off into the earth. */
.damp {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 213, 79, 0.16), transparent 60%),
    radial-gradient(100% 100% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(18, 11, 7, 0) 0%, rgba(18, 11, 7, 0.75) 100%);
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px 80px;
  position: relative;
  z-index: 2;
}

/* ── Header ───────────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 0 0;
}

header img {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 213, 79, 0.25);
}

header .word { font-weight: 800; font-size: 19px; letter-spacing: 0.01em; }

.soon-pill {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--gold);
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { padding: 74px 0 0; text-align: center; }

h1 {
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

h1 .l1 {
  font-size: clamp(44px, 11vw, 108px);
  color: var(--gold);
  /* A stacked shadow rather than a blur: the game has no soft edges. */
  text-shadow: 0 5px 0 #7a4b22, 0 9px 0 rgba(0, 0, 0, 0.55);
}

h1 .l2 {
  font-size: clamp(38px, 9.2vw, 92px);
  color: var(--cream);
  text-shadow: 0 5px 0 #7a4b22, 0 9px 0 rgba(0, 0, 0, 0.55);
}

.tag {
  margin: 26px auto 0;
  max-width: 46ch;
  font-size: clamp(15px, 2.1vw, 19px);
  line-height: 1.55;
  color: var(--dim);
}

.cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 11px; }

.badge {
  display: inline-block;
  font-weight: 800;
  font-size: 16px;
  color: var(--void);
  background: linear-gradient(180deg, #ffe27a, var(--gold));
  padding: 15px 30px;
  border-radius: 14px;
  box-shadow: 0 6px 0 #a8761f, 0 12px 22px rgba(0, 0, 0, 0.5);
}

.note { font-size: 13px; color: var(--dim); letter-spacing: 0.02em; }

/* ── The runner ───────────────────────────────────────────────────────
   The game's four run frames on a strip, stepped four ways. The sprite is
   240px wide at 6x, so one frame is 60px and the strip is 240. */
.ground {
  position: relative;
  height: 132px;
  margin-top: 46px;
  border-bottom: 6px solid var(--brick);
  box-shadow: 0 6px 0 #3b2410;
  overflow: hidden;
}

.runner {
  position: absolute;
  bottom: 0;
  width: 60px;
  height: 54px;
  background-image: url("/assets/marmot-run.png");
  background-size: 240px 54px;
  animation: trot 0.44s steps(4) infinite, dash 9s linear infinite;
}

@keyframes trot { from { background-position: 0 0; } to { background-position: -240px 0; } }
@keyframes dash { from { left: -70px; } to { left: 100%; } }

/* The hawk.
   Three things were wrong with the first attempt and they are the same three
   things that make a bird look like a bird:

   1. The sprite is drawn nose-up, because the game rotates it to face travel.
      On a page that never rotated it, it flew sideways like a thrown brick.
      The base attitude here is 90deg — pointing the way it is going.
   2. It never flapped. It does now, on the game's own four-frame wingbeat.
   3. It moved in a straight line. Real ones fall into a glide and climb back
      out of it, banking into the turn at each end.

   Travel and attitude are on separate elements so neither transform has to
   know about the other. */
.hawk {
  position: absolute;
  top: 14px;
  animation: cross 11s linear infinite;
}

.hawk i {
  display: block;
  width: 66px;
  height: 48px;
  background-image: url("/assets/raptor-fly.png");
  background-size: 264px 48px;
  animation: wingbeat 0.34s steps(4) infinite,
             swoop 5.5s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes cross { from { left: -110px; } to { left: 100%; } }

@keyframes wingbeat { from { background-position: 0 0; } to { background-position: -264px 0; } }

/* Down into the glide, bank, and back up. The rotation leads the descent by a
   hair, which is what selling a turn actually takes. */
@keyframes swoop {
  0%   { transform: translateY(0)    rotate(84deg); }
  25%  { transform: translateY(20px) rotate(99deg); }
  50%  { transform: translateY(40px) rotate(90deg); }
  75%  { transform: translateY(16px) rotate(77deg); }
  100% { transform: translateY(0)    rotate(84deg); }
}

/* ── Screenshots ──────────────────────────────────────────────────── */
.shots {
  margin-top: 84px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: center;
}

.phone { margin: 0; }

.phone img {
  width: 100%;
  border-radius: 20px;
  border: 3px solid #3b2410;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  display: block;
}

.phone.tall { transform: translateY(-18px) scale(1.06); }
.phone.tall img { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.7); }

/* ── Feature beats ────────────────────────────────────────────────── */
.beats {
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.beats article {
  background: rgba(59, 36, 16, 0.55);
  border: 2px solid rgba(143, 98, 54, 0.5);
  border-radius: 18px;
  padding: 26px 26px 28px;
  backdrop-filter: blur(2px);
}

.beats img { height: 46px; width: auto; display: block; margin-bottom: 14px; }
.beats img.wide { height: 40px; }

.beats h2 {
  font-size: 21px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 9px;
  letter-spacing: -0.01em;
}

.beats p { font-size: 15px; line-height: 1.6; color: var(--dim); }
.beats p + p { margin-top: 10px; }
.beats .fine { font-size: 13.5px; color: #8f7a5e; }
.beats em { color: var(--cream); font-style: normal; font-weight: 700; }

/* ── Specs ────────────────────────────────────────────────────────── */
.specs { margin-top: 74px; }

.specs h2 {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f7a5e;
  margin-bottom: 18px;
}

.specs ul { list-style: none; display: grid; gap: 13px; }

.specs li {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--dim);
  padding-left: 26px;
  position: relative;
}

/* A blue flower for a bullet. */
.specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 13px;
  height: 13px;
  background: url("/assets/flower.png") center/contain no-repeat;
}

.specs b { color: var(--cream); font-weight: 800; }

/* ── About + FAQ ──────────────────────────────────────────────────── */
.about, .faq { margin-top: 74px; max-width: 68ch; }

.about h2, .faq h2 {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8f7a5e;
  margin-bottom: 18px;
}

.about p { font-size: 15.5px; line-height: 1.65; color: var(--dim); }
.about p + p { margin-top: 14px; }

.faq details {
  border-bottom: 1px solid rgba(143, 98, 54, 0.28);
  padding: 15px 0;
}

.faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--cream);
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::before {
  content: "+";
  color: var(--gold);
  font-weight: 800;
  margin-right: 10px;
}

.faq details[open] summary::before { content: "\2212"; }

.faq details p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--dim);
  padding-left: 22px;
}

/* ── Footer ───────────────────────────────────────────────────────── */
footer {
  margin-top: 86px;
  padding-top: 26px;
  border-top: 2px solid rgba(143, 98, 54, 0.3);
  text-align: center;
}

.disclaim {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7d6a52;
}

.made {
  margin-top: 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.made a { color: var(--cream); text-decoration: none; border-bottom: 1px solid rgba(255, 213, 79, 0.5); }
.made a:hover { color: var(--gold); }

.flag {
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
  shape-rendering: crispEdges;
}

.links { margin-top: 10px; font-size: 13px; color: #7d6a52; }
.links a { color: var(--dim); text-decoration: none; border-bottom: 1px solid rgba(183, 154, 120, 0.4); }
.links a:hover { color: var(--gold); border-color: var(--gold); }
.links span { margin: 0 9px; }

/* ── Drifting flowers ─────────────────────────────────────────────── */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }

.petals i {
  position: absolute;
  top: -40px;
  width: 18px;
  height: 18px;
  background: url("/assets/flower.png") center/contain no-repeat;
  opacity: 0.5;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes fall {
  from { transform: translateY(-40px) rotate(0deg); }
  to   { transform: translateY(106vh) rotate(320deg); }
}

/* ── Narrow ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .shots { grid-template-columns: 1fr 1fr; }
  .shots .phone:last-child { display: none; }
  .phone.tall { transform: none; }
  .beats { grid-template-columns: 1fr; }
  .hero { padding-top: 52px; }
  .soon-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .runner, .hawk, .hawk i { animation: none; }
  .runner { left: 40%; }
  .hawk { left: 62%; }
  .hawk i { transform: rotate(84deg); }
}