/* Shared styles for the Beat Run static site: a bright blocky world taken
   from the game, with its sky, grass, rainbow track and music coins. */

:root {
  color-scheme: light;
  --bg-page: #eaf4ff;
  --text-heading: #13306b;
  --text-prose: #3a4a6b;
  --text-link: #1f6fe0;
  --text-link-hover: #7a3fd6;
  --navy: #1d3f8f;
  --sky-top: #2f7bff;
  --sky-low: #7cc0ff;
  --haze: #d6ecff;
  --cyan: #12d6ff;
  --blue: #0066ff;
  --blue-dark: #0040e0;
  --lilac: #d98cff;
  --purple: #8a3dff;
  --purple-dark: #5f1fd6;
  --font-rounded: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  /* The game's beat: 120 BPM. */
  --beat: 0.5s;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-heading);
  background-color: var(--bg-page);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  color: #ffffff;
  background-color: var(--text-link);
}

a:focus-visible {
  outline: 3px solid #ffd21a;
  outline-offset: 4px;
}

/* ---------- Landing page ---------- */

html:has(body.landing) {
  overflow-x: hidden;
}

body.landing {
  --horizon: 62vh;
  position: relative;
  overflow: clip;
  color: #ffffff;
  background-color: var(--sky-top);
  background-image: linear-gradient(
    var(--sky-top),
    var(--sky-low) calc(var(--horizon) - 8vh),
    var(--haze) var(--horizon)
  );
  font-family: var(--font-rounded);
  font-weight: 800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem 3rem;
}

/* The scenery sits behind the card and ignores the pointer. */
.world,
.world * {
  pointer-events: none;
}

.world {
  position: fixed;
  inset: 0;
  z-index: -1;
}

/* Blocky clouds drifting across the sky. */
.cloud {
  position: absolute;
  aspect-ratio: 32 / 7;
  background: url("../images/cloud.svg") 0 0 / 100% 100% no-repeat;
  opacity: 0.9;
  animation: cloud-drift 80s linear infinite;
}

.cloud:nth-child(1) {
  top: 9vh;
  width: 22rem;
  animation-delay: -20s;
}

.cloud:nth-child(2) {
  top: 30vh;
  width: 14rem;
  opacity: 0.75;
  animation-duration: 110s;
  animation-delay: -75s;
}

.cloud:nth-child(3) {
  top: 46vh;
  width: 30rem;
  opacity: 0.7;
  animation-duration: 140s;
  animation-delay: -40s;
}

@keyframes cloud-drift {
  from {
    left: -32rem;
  }
  to {
    left: 100%;
  }
}

/* Voxel trees framing the course, like the game's purple biome. */
.tree {
  --tree-width: clamp(9rem, 30vw, 28rem);
  position: absolute;
  top: calc(var(--horizon) + 4vh);
  width: var(--tree-width);
  aspect-ratio: 28 / 34;
  translate: 0 -100%;
  background: url("../images/tree.svg") 0 0 / 100% 100% no-repeat;
}

.tree.left {
  left: calc(var(--tree-width) * -0.4);
}

.tree.right {
  right: calc(var(--tree-width) * -0.45);
  scale: -1 1;
}

/* The ground: grass with the rainbow tile track running toward the viewer. */
.ground {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  perspective: 30rem;
  perspective-origin: 50% 0;
  overflow: hidden;
}

.ground::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 240rem;
  height: 180rem;
  translate: -50% 0;
  transform-origin: 50% 0;
  transform: rotateX(78deg);
  background:
    url("../images/track.svg") 50% 0 / 6rem 12rem repeat-y,
    url("../images/grass.svg") 0 0 / 2rem 2rem;
  animation: ground-run calc(var(--beat) * 8) linear infinite;
}

/* Haze where the ground meets the sky. */
.ground::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22%;
  background: linear-gradient(var(--haze), transparent);
}

/* One track pattern (12rem) every eight beats. */
@keyframes ground-run {
  to {
    background-position: 50% 12rem, 0 12rem;
  }
}

/* Music coins spinning in the air. */
.coin {
  position: absolute;
  width: 3.25rem;
  aspect-ratio: 1;
  background: url("../images/coin.svg") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0.4rem 0 rgb(29 63 143 / 0.25));
  animation:
    coin-spin 2s linear infinite,
    coin-bob calc(var(--beat) * 4) ease-in-out infinite alternate;
}

.coin:nth-of-type(1) { left: 8%; top: 18vh; }
.coin:nth-of-type(2) { right: 9%; top: 12vh; width: 2.5rem; animation-delay: -0.6s, -1s; }
.coin:nth-of-type(3) { left: 5%; top: 56vh; width: 2.25rem; animation-delay: -1.2s, -0.4s; }
.coin:nth-of-type(4) { right: 5%; top: 30vh; animation-delay: -0.3s, -1.6s; }

@keyframes coin-spin {
  50% {
    scale: 0.15 1;
  }
}

@keyframes coin-bob {
  to {
    translate: 0 -1.25rem;
  }
}

.landing-card {
  position: relative;
  max-width: 24rem;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* The app icon as a chunky block that hops on the beat. */
.landing-card .logo {
  width: 8.5rem;
  height: auto;
  border: 0.25rem solid #ffffff;
  border-radius: 2rem;
  box-shadow:
    0 0.5rem 0 var(--navy),
    0 1.25rem 2rem rgb(13 30 80 / 0.35);
  animation: logo-hop calc(var(--beat) * 2) cubic-bezier(0.3, 0, 0.3, 1) infinite;
}

@keyframes logo-hop {
  0%,
  100% {
    translate: 0 0;
  }
  40% {
    translate: 0 -0.6rem;
  }
}

/* Big white type with a dark edge, like the in-game score. */
.landing-card h1 {
  margin: 1rem 0 0;
  line-height: 0;
}

.wordmark {
  width: 15rem;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 0.2rem 0 var(--navy))
    drop-shadow(0 0.5rem 0.75rem rgb(13 30 80 / 0.3));
}

.tagline {
  margin: 0;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  text-shadow:
    0 0.15rem 0 var(--navy),
    0 0.4rem 1rem rgb(13 30 80 / 0.3);
}

.landing-card h1.title {
  margin-top: 0.75rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  text-shadow:
    0 0.15rem 0 var(--navy),
    0 0.4rem 1rem rgb(13 30 80 / 0.3);
}

.landing-links {
  width: 100%;
}

.landing-links a {
  display: block;
  margin: 0.625rem auto;
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 900;
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  border-radius: 1.25rem;
  background-color: var(--navy);
  box-shadow: 0 0.35rem 0 #0e2257;
  transition: background-color 150ms, translate 100ms, box-shadow 100ms;
}

.landing-links a:hover {
  background-color: #2a55b5;
}

.landing-links a:active {
  translate: 0 0.25rem;
  box-shadow: 0 0.1rem 0 #0e2257;
}

/* The main call to action, like the game's Share Video button: a blue
   capsule with a white rim and a soft glow, pulsing on the beat and
   catching a glint of light. */
.landing-links a.play {
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.5rem;
  font-size: 1.75rem;
  line-height: 2rem;
  border-radius: 999px;
  text-shadow: 0 0.1rem 0.2rem rgb(5 40 120 / 0.35);
  background: linear-gradient(var(--cyan), #0a9cff 30%, var(--blue) 65%, var(--blue-dark));
  border: 0.22rem solid #ffffff;
  box-shadow:
    0 0 1.5rem rgb(0 120 255 / 0.6),
    0 0.75rem 1.5rem rgb(13 30 80 / 0.3),
    inset 0 0.15rem 0 rgb(255 255 255 / 0.35);
  animation: play-beat var(--beat) cubic-bezier(0.2, 0, 0.4, 1) infinite;
}

.landing-links a.play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgb(255 255 255 / 0.35) 50%,
    transparent 65%
  ) -150% 0 / 300% 100% no-repeat;
  animation: play-glint calc(var(--beat) * 6) ease-in-out infinite;
}

.landing-links a.play:hover {
  background: linear-gradient(#4ae6ff, #2aaaff 30%, #1a78ff 65%, #0a50f0);
}

.landing-links a.play:active {
  translate: 0 0.15rem;
  box-shadow:
    0 0 1rem rgb(26 124 255 / 0.5),
    0 0.4rem 1rem rgb(13 30 80 / 0.3),
    inset 0 0.15rem 0 rgb(255 255 255 / 0.35);
}

/* A second, steadier capsule in purple: the same shape, no pulse or glint. */
.landing-links a.discord {
  margin-top: -0.25rem;
  padding: 0.75rem 1.5rem;
  font-size: 1.375rem;
  border-radius: 999px;
  text-shadow: 0 0.1rem 0.2rem rgb(50 10 120 / 0.35);
  background: linear-gradient(var(--lilac), #a65cff 30%, var(--purple) 65%, var(--purple-dark));
  border: 0.22rem solid #ffffff;
  box-shadow:
    0 0 1.5rem rgb(138 61 255 / 0.5),
    0 0.75rem 1.5rem rgb(13 30 80 / 0.3),
    inset 0 0.15rem 0 rgb(255 255 255 / 0.35);
}

.landing-links a.discord:hover {
  background: linear-gradient(#e6a8ff, #b878ff 30%, #9a55ff 65%, #6f30e6);
}

.landing-links a.discord:active {
  translate: 0 0.15rem;
}

@keyframes play-beat {
  0% {
    scale: 1.06;
  }
  30%,
  100% {
    scale: 1;
  }
}

@keyframes play-glint {
  0% {
    background-position: 150% 0;
  }
  50%,
  100% {
    background-position: -50% 0;
  }
}

/* Secondary links as round navy chips, like the game's buttons. */
.landing-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.landing-footer a {
  padding: 0.4rem 0.9rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  background-color: rgb(29 63 143 / 0.85);
}

.landing-footer a:hover {
  background-color: var(--navy);
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .cloud,
  .ground::before,
  .coin,
  .landing-card .logo,
  .landing-links a.play,
  .landing-links a.play::after {
    animation: none;
  }
}

/* ---------- Prose pages (Terms of Service, Privacy) ---------- */

body.prose-page {
  background-color: var(--bg-page);
}

.prose {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem;
  color: var(--text-prose);
  font-size: 1rem;
  line-height: 1.75;
}

.prose h1 {
  color: var(--text-heading);
  font-size: 2.25rem;
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 0.9em;
}

.prose h2 {
  color: var(--text-heading);
  font-size: 1.5rem;
  line-height: 1.33;
  font-weight: 700;
  margin: 2em 0 1em;
}

.prose h3 {
  color: var(--text-heading);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 600;
  margin: 1.6em 0 0.6em;
}

.prose p {
  margin: 1.25em 0;
}

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

.prose a {
  color: var(--text-link);
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: var(--text-link-hover);
}

.prose ol,
.prose ul {
  margin: 1.25em 0;
  padding-left: 1.625em;
}

.prose li {
  margin: 0.5em 0;
}

.prose u {
  color: var(--text-heading);
}