/* Astro Games landing page, styled from the Astro brand kit (Nebula theme). No game art. */
:root {
  /* brand colours, Nebula theme (brand kit, section 5) */
  --bg: #04050c;
  --app-bg: #080a1a;
  --panel: #0c1028;
  --card: #121633;
  --raised: #1a1f48;
  --ink: #eef0ff;
  --muted: #a3abd1;
  --faint: #6f77a3;
  --line: #262d5e;
  --line-strong: #343c78;
  --accent: #b9a8ff;
  --brand: #7c5cff;
  --brand-deep: #5e48d8;
  --cyan: #3fd0f0;
  --free: #3fd99a;
  --amber: #f2c15a;
  /* brand kit: the system font, bold for the wordmark. No custom typeface. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(70% 60% at 72% 30%, rgba(124, 92, 255, 0.22) 0%, rgba(124, 92, 255, 0) 70%),
    radial-gradient(60% 50% at 20% 0%, rgba(63, 208, 240, 0.08) 0%, rgba(63, 208, 240, 0) 70%),
    linear-gradient(180deg, var(--app-bg) 0%, var(--bg) 100%);
}

.stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* a lit planet limb rising from below, violet rim and a cyan moon glow */
.planet {
  position: absolute;
  left: 50%;
  top: 74%;
  width: max(150vw, 1500px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 8%, rgba(185, 168, 255, 0.22), rgba(185, 168, 255, 0) 38%),
    radial-gradient(circle at 50% 30%, #1a1f48 0%, #0c1028 50%, #04050c 75%);
  box-shadow: 0 0 90px 8px rgba(124, 92, 255, 0.25), inset 0 14px 40px rgba(185, 168, 255, 0.22);
  animation: rise 60s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes rise {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-3vh); }
}

.top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 22px 16px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mark img { width: 30px; height: 30px; display: block; }

.links { display: flex; gap: 22px; }
.links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.links a:hover, .links a:focus-visible { color: var(--ink); }

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  margin: auto auto;
  padding: 24px 16px 96px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(44px, 8vw, 92px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 22px;
}

.lede {
  font-size: clamp(17px, 2.2vw, 20px);
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 30px;
}

.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- buttons (brand: #7C5CFF, pressed #5E48D8) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  font: 600 15px var(--font);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn.primary {
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(124, 92, 255, 0.35);
}
.btn.primary:hover, .btn.primary:focus-visible {
  background: var(--brand-deep);
  box-shadow: 0 12px 36px rgba(94, 72, 216, 0.5);
}
.btn.ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(12, 16, 40, 0.5);
}
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--accent); }
.btn.disabled, .btn:disabled {
  background: var(--raised);
  color: var(--faint);
  border-color: var(--line);
  cursor: default;
}

/* ---------- pilots online band ---------- */
.band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.online {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--free);
  box-shadow: 0 0 0 0 rgba(63, 217, 154, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(63, 217, 154, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(63, 217, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 217, 154, 0); }
}
.count { font-size: 16px; }
.note { margin: 0; color: var(--faint); font-size: 14px; }

/* ---------- sections ---------- */
main { padding: 72px 0 40px; }
section h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.games, .notes { margin-bottom: 72px; }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }

/* the brand's lit planet tile, drawn in CSS: a two colour gradient from the top left, a soft rim and one star */
.tile {
  position: relative;
  height: 170px;
  overflow: hidden;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 74% 40%, rgba(63, 208, 240, 0.9) 0 1px, transparent 1.5px);
}
.tile-cruiser {
  background: linear-gradient(135deg, #7c5cff 0%, #3fd0f0 100%);
}
.tile-cruiser::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%), #121633;
  box-shadow: inset -22px -18px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(63, 208, 240, 0.35);
}
.tile-commander {
  background: linear-gradient(135deg, #5e48d8 0%, #2b62f0 100%);
  opacity: 0.55;
}
.tile-commander::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 45%), #121633;
  box-shadow: inset -22px -18px 40px rgba(0, 0, 0, 0.5);
}

.body { padding: 26px 26px 28px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.body h3 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.body p { color: var(--muted); margin-bottom: 22px; }

/* ---------- patch notes ---------- */
.notes .lede { font-size: 16px; margin-bottom: 26px; }
.day {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}
.day:last-child { border-bottom: 1px solid var(--line); }
.day summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  font-weight: 600;
  color: var(--ink);
}
.day summary::-webkit-details-marker { display: none; }
.day summary::after {
  content: "+";
  order: 3;
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}
.day[open] summary::after { content: "\2212"; }
.day summary span { margin-left: auto; color: var(--faint); font-weight: 400; font-size: 14px; }
.day summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.day ul { margin: 0 0 18px; padding: 0 0 0 20px; }
.day li { margin: 0 0 8px; color: var(--ink); opacity: 0.92; }
.day li.more { color: var(--faint); list-style: none; margin-left: -20px; font-size: 14px; }

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: 32px 0 48px;
  color: var(--faint);
  font-size: 14px;
}
.foot p { max-width: 52em; margin: 0; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .cards { grid-template-columns: 1fr; }
  .links { gap: 16px; }
  .band-inner { flex-direction: column; align-items: flex-start; }
  main { padding-top: 56px; }
  .games, .notes { margin-bottom: 56px; }
  .hero-copy { padding-bottom: 80px; }
}

@media (max-width: 420px) {
  .top .links a:first-child { display: none; }
  .btn { width: 100%; }
  .actions { flex-direction: column; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .planet, .dot, .card { animation: none; transition: none; }
}

/* =====================================================================
   Motion. Everything here is transform and opacity (smooth, light).
   The calm version (reduce motion) and the lite version (phones) are at the end.
   ===================================================================== */

/* the hero logo: fades and scales in, then a slow shine sweeps across it */
.hero-logo {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 26px;
  animation: logoIn 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
  filter: drop-shadow(0 0 22px rgba(124, 92, 255, 0.55));
}
.hero-logo img { width: 100%; height: 100%; display: block; }
.hero-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("../brand/astro-mark.svg") center / contain no-repeat;
  mask: url("../brand/astro-mark.svg") center / contain no-repeat;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  animation: shine 6s ease-in-out 1.8s infinite;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shine {
  0% { background-position: 160% 0; }
  35%, 100% { background-position: -60% 0; }
}

/* hero text rises in one piece at a time */
.rise { animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

/* the planet's atmosphere breathes slowly */
.planet::before {
  content: "";
  position: absolute;
  inset: -2.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 2%, rgba(124, 92, 255, 0.55), rgba(63, 208, 240, 0.12) 12%, transparent 24%);
  filter: blur(14px);
  animation: breathe 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes breathe {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 1; transform: scale(1.012); }
}

/* sections and cards fade and slide up as they scroll into view, staggered by --d */
.js .reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.8s ease var(--d, 0ms), translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
}
.js .reveal.from-left { translate: -32px 0; }
.js .reveal.in { opacity: 1; translate: 0 0; }

/* game cards: lift with a brand glow, a light sweep crosses the card */
.card {
  position: relative;
  isolation: isolate;
}
.js .card.reveal {
  transition:
    opacity 0.8s ease var(--d, 0ms),
    translate 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
    transform 0.3s ease 0s, box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: 0 18px 50px rgba(124, 92, 255, 0.35), 0 0 0 1px rgba(124, 92, 255, 0.45);
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 38%, rgba(185, 168, 255, 0.2) 50%, transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
}
.card:hover::after {
  transform: translateX(130%);
  transition: transform 0.9s ease;
}

/* the Play buttons send out a gentle ring */
.btn.primary { position: relative; }
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(185, 168, 255, 0.8);
  opacity: 0;
  animation: ring 3.2s ease-out 2s infinite;
  pointer-events: none;
}
@keyframes ring {
  0% { opacity: 0.8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.18, 1.45); }
}

/* the live dot already pulses; the count rolls up from zero in the script */
.count .num { font-variant-numeric: tabular-nums; }

/* pause every animation while the tab is hidden */
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

/* lite: phones get fewer effects */
.lite .planet::before { filter: none; animation: none; opacity: 0.8; }
.lite .hero-logo { width: 72px; height: 72px; }
.lite .hero-logo::after { display: none; }
.lite .btn.primary::after { animation: none; display: none; }
.lite .card:hover { transform: none; }

/* calm: reduce motion in the system settings. Same page, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-logo::after, .rise, .planet::before, .btn.primary::after { animation: none !important; }
  .js .reveal, .js .reveal.from-left { opacity: 1; translate: 0 0; transition: none; }
  .card:hover { transform: none; }
  .card::after { display: none; }
  .btn.primary::after { display: none; }
}