/* flashybird.space — spec §26.
 *
 * No framework, no build step. The page's job is one link; a deployment that can fail in
 * interesting ways is a worse trade than a stylesheet somebody has to read.
 *
 * The vocabulary is the app's (§19): deep saturated ground, one neon accent doing the work,
 * glow instead of borders. Deliberately NOT the frozen prototypes' look — those are behind
 * the port, and a page that looked like them would be selling the 2024 game.
 */

:root {
  --ink: #eefbe4;
  --dim: #93a894;
  --bg0: #06140b;
  --bg1: #0b2213;
  --bg2: #1d3d1b;
  --acid: #d9ff70;
  --gold: #ffd977;
  --cyan: #6ef2ff;
  --display: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, -apple-system, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 80% at 50% 0%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acid); }

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

/* ---- the mark ---------------------------------------------------------- */

.mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.mark span { color: var(--acid); }

/* ---- hero -------------------------------------------------------------- */

.hero { text-align: center; padding: 3rem 0 1rem; }

/* Sized off the LONGEST line, not the shortest. "FIFTY ZONES" is eleven characters of
 * weight-900 rounded, and the display face is a fallback stack — on a machine that resolves
 * to something wider than SF Pro Rounded, a clamp tuned to the narrow case runs off the
 * right edge of a phone. 9vw fits the long line on a 390pt screen with room to spare. */
h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.85rem, 9vw, 5rem);
  line-height: 0.98;
  margin: 0;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  text-shadow: 0 0 34px rgba(217, 255, 112, 0.35);
}
h1 em {
  font-style: normal;
  color: var(--acid);
  display: block;
}

.tagline {
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  color: var(--ink);
  opacity: 0.85;
  margin: 1.25rem auto 0;
  max-width: 30rem;
  text-wrap: balance;
}

/* The tunnel. Concentric rings on one slow rotation — the game's signature shape, drawn in
 * CSS so the page carries no image for it. `prefers-reduced-motion` stops it dead rather
 * than slowing it: a revolving tunnel is exactly the thing that setting exists for. */
.tunnel {
  position: relative;
  width: min(20rem, 68vw);
  aspect-ratio: 1;
  margin: 2.5rem auto 0;
}
.tunnel i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--acid);
  border-radius: 46% 54% 52% 48%;
  opacity: 0.14;
  animation: spin 14s linear infinite;
}
.tunnel i:nth-child(2) { inset: 12%; opacity: 0.2;  animation-duration: 11s; border-color: var(--cyan); }
.tunnel i:nth-child(3) { inset: 24%; opacity: 0.26; animation-duration: 9s;  animation-direction: reverse; }
.tunnel i:nth-child(4) { inset: 36%; opacity: 0.34; animation-duration: 7s;  border-color: var(--cyan); }
.tunnel i:nth-child(5) { inset: 48%; opacity: 0.45; animation-duration: 5s;  animation-direction: reverse; }
.tunnel i:nth-child(6) { inset: 60%; opacity: 0.6;  animation-duration: 3.5s; border-color: var(--gold); }

/* The bird: one dot at the plane, glowing, bobbing. It is the whole cast of the free game. */
.tunnel b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin: -0.425rem 0 0 -0.425rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px 4px rgba(255, 217, 119, 0.55);
  animation: bob 2.4s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob {
  0%, 100% { transform: translateY(-14%); }
  50%      { transform: translateY(14%); }
}

@media (prefers-reduced-motion: reduce) {
  .tunnel i, .tunnel b { animation: none; }
}

/* ---- the one button ---------------------------------------------------- */

.cta { text-align: center; margin: 2.75rem 0 0; }

.store {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #06140b;
  background: var(--acid);
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  box-shadow: 0 0 30px rgba(217, 255, 112, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store:hover, .store:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 42px rgba(217, 255, 112, 0.6);
}
.store:active { transform: translateY(0); }

.soon {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--dim);
}

/* ---- the pitch --------------------------------------------------------- */

.beats {
  display: grid;
  gap: 1.75rem;
  /* `min(13rem, 100%)` and not a bare 13rem: auto-fit will happily lay a 13rem track into a
   * narrower container and let it overflow. The min() caps the track at the container. */
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin: 4.5rem 0 0;
  padding: 0;
  list-style: none;
}
.beats h2 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  color: var(--acid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.beats p { margin: 0; color: var(--dim); font-size: 0.97rem; }

/* ---- fine print -------------------------------------------------------- */

/* Spec §26.2: the landing page may be loud; the fine print may not be. */
.legal h1 {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  text-align: left;
  text-shadow: none;
  margin-top: 1.75rem;
}
.legal .lede { color: var(--dim); margin-top: 0.35rem; }
.legal h2 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 2.5rem 0 0.5rem;
  color: var(--ink);
}
.legal p, .legal li { color: #c8d6c4; }
.legal ul { padding-left: 1.15rem; }
.legal li { margin: 0.35rem 0; }
.legal .updated { color: var(--dim); font-size: 0.88rem; margin-top: 0.75rem; }

.callout {
  border-left: 2px solid var(--acid);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 1.5rem 0;
}

footer {
  margin-top: 5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(217, 255, 112, 0.16);
  color: var(--dim);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
footer a { color: var(--dim); text-decoration: underline; }
footer a:hover { color: var(--acid); }