/* Cosmix's website: the app's own dark surfaces, text colours and accent.
   Dark because Cosmix is dark by default; the purple is the app's accent.
   The one motif is the logo's planet ring (the orbits). Motion plays once,
   on arrival or on hover, never on a loop, and none with reduced motion. */

:root {
  --accent: #7c5cff;
  --accent-hover: #9479ff;
  --accent-soft: rgba(124, 92, 255, 0.16);
  --accent-line: rgba(124, 92, 255, 0.5);
  /* Buttons a shade deeper than the app's accent: white text on #7c5cff is 4.35:1, on this 5.36:1. */
  --button: #6b4cf0;
  --button-hover: #5b3de0;
  --ok: #43d6a0;
  --bg: #08080d;
  --bg-hero: #0e0c1b;
  --surface: #101019;
  --surface-2: #161623;
  --surface-3: #1d1d2e;
  --border: #242438;
  --hairline: rgba(236, 237, 245, 0.08);
  --text: #f2f2f8;
  --text-dim: #b4b4cc;
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --display: 'Segoe UI Variable Display', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* The same type as the app. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The orbits may reach past the edge; they never make the page scroll sideways. */
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; }

:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  z-index: 20;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- top bar
   The only frosted surface: it stays readable over whatever scrolls under it. */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px max(24px, calc((100% - 1180px) / 2));
  background: rgba(8, 8, 13, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

.top-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
}

.top nav { display: flex; align-items: center; gap: 6px; }

.top nav a {
  padding: 9px 14px;
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 15.5px;
  font-weight: 550;
  text-decoration: none;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.top nav a:hover { color: var(--text); background: var(--surface-2); }
.top nav a[aria-current='page'] { color: var(--text); background: var(--surface-2); }
/* Discord: a quiet button with its own colour mark, so the download stays the main one. */
.top nav .top-discord { display: inline-flex; align-items: center; gap: 8px; color: var(--text); background: var(--surface-2); }
.top nav .top-discord svg { width: 18px; height: 18px; fill: #8b95ff; }
.top nav .top-discord:hover { background: #5865f2; color: #fff; }
.top nav .top-discord:hover svg { fill: #fff; }
.top nav .top-download { color: #fff; background: var(--button); }
.top nav .top-download:hover { background: var(--button-hover); }

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

main { overflow-x: clip; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 24px 120px;
  isolation: isolate;
}

/* The hero sits on a slightly lit band, so the page has a top and a body. */
.hero::before {
  content: '';
  position: absolute;
  inset: -80px -100vw 0;
  z-index: -2;
  background: linear-gradient(180deg, var(--bg-hero) 0%, var(--bg-hero) 55%, var(--bg) 100%);
}

/* The ring circles the sources card, wider than it and peeking out above and
   below. It reaches further left (the gap beside the text) than right (the
   page edge), and less far right the narrower the window, so it's never cut off. */
.sources-wrap { position: relative; isolation: isolate; }
.orbits {
  position: absolute;
  left: -30%;
  width: 148%;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
@media (max-width: 1359px) { .orbits { left: -36%; width: 144%; } }
@media (max-width: 1179px) { .orbits { left: -42%; width: 144%; } }

.orbit {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.2s var(--ease) 0.2s forwards;
}
.orbit-b { stroke-opacity: 0.55; animation-delay: 0.45s; }

/* The moon rides the outer ring once and stops: the one glowing thing on the page. */
.orbit-moon { fill: var(--accent-hover); filter: drop-shadow(0 0 10px rgba(148, 121, 255, 0.9)); }

@keyframes draw { to { stroke-dashoffset: 0; } }

.hero-copy > * { animation: rise 0.8s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.12s; }
.hero-copy > :nth-child(3) { animation-delay: 0.22s; }
.hero-copy > :nth-child(4) { animation-delay: 0.32s; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero h1 { margin: 0 0 28px; }
.hero h1 img { width: 420px; }

.lede {
  margin: 0 0 18px;
  max-width: 17ch;
  font-family: var(--display);
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.lede em { font-style: normal; color: var(--accent-hover); }

.sub { margin: 0 0 36px; max-width: 44ch; color: var(--text-dim); font-size: 19px; }

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: var(--radius);
  background: var(--button);
  color: #fff;
  font-weight: 650;
  font-size: 17px;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.button--big { padding: 18px 30px; font-size: 18.5px; border-radius: 14px; }
/* Lifted on hover: the download is the one thing on the page that rises. */
.button:hover { background: var(--button-hover); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124, 92, 255, 0.35); }
.button:active { transform: translateY(0); box-shadow: none; }

/* Four bars, still until the button is pointed at, then they play like a meter. */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.eq i { width: 3.5px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(0.4); }
.eq i:nth-child(2) { transform: scaleY(0.75); }
.eq i:nth-child(3) { transform: scaleY(0.55); }
.eq i:nth-child(4) { transform: scaleY(0.9); }
.button:hover .eq i, .button:focus-visible .eq i { animation: meter 0.9s ease-in-out infinite alternate; }
.button:hover .eq i:nth-child(2), .button:focus-visible .eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.button:hover .eq i:nth-child(3), .button:focus-visible .eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: -0.5s; }
.button:hover .eq i:nth-child(4), .button:focus-visible .eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.15s; }
@keyframes meter { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }

.get-meta { margin: 16px 0 0; color: var(--text-dim); font-size: 15px; }
.get-keep { margin: 6px 0 0; max-width: 46ch; color: var(--text-dim); font-size: 15px; }
.get-meta strong { color: var(--text); font-weight: 650; }
.get-meta a { color: var(--text); text-underline-offset: 3px; }
.get-meta a:hover { color: var(--accent-hover); }

/* The four sources, in the app's own icons. */
.sources {
  margin: 0;
  padding: 12px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

.sources li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius);
  animation: slide 0.7s var(--ease) both;
  animation-delay: calc(0.35s + var(--i) * 0.1s);
  transition: background-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.sources li:hover { background: var(--surface-2); transform: translateX(4px); }
.sources li + li { margin-top: 2px; }
.sources li img { flex: none; width: 52px; height: 52px; border-radius: 14px; }
.sources li div { display: grid; gap: 3px; min-width: 0; }
.sources strong { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; }
.sources span { color: var(--text-dim); font-size: 15px; line-height: 1.45; }
.sources-own { background: var(--accent-soft); }
.sources-own:hover { background: rgba(124, 92, 255, 0.24); }

/* A real requirement, said where it applies: posting needs the Verified badge. */
.tag {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--button);
  color: #fff !important;
  font-size: 12.5px !important;
  font-weight: 650;
  line-height: 1.6 !important;
}

@keyframes slide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- sections */

.new, .features { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

.new h2, .features h2 { margin: 0; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; }

/* ---------------------------------------------------------------- what's new
   A timeline: each release a stop on the line, the newest lit up. */

.new { padding-top: 80px; padding-bottom: 96px; }
.new h2 { margin-bottom: 40px; }

/* The updates page: its own heading, the timeline under it. */
.updates { padding-top: 64px; max-width: 900px; }
.updates h1 { margin: 0; font-size: clamp(40px, 5vw, 56px); line-height: 1.05; }
.updates-sub { margin: 12px 0 44px; color: var(--text-dim); font-size: 18px; }

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 44px;
  list-style: none;
}
/* The line fades as it goes back in time. */
.timeline::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-line) 40%, rgba(124, 92, 255, 0.05) 100%);
}

.release { position: relative; }
.release + .release { margin-top: 26px; }

.release-node {
  position: absolute;
  left: -44px;
  top: 26px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-line);
}
.release-node::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--accent-line);
}
.release--featured .release-node { border-color: var(--accent-hover); }
.release--featured .release-node::after { background: var(--accent-hover); }
/* The newest big release sends out one ring as it comes into view. */
.release--featured .release-node::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent-hover);
  opacity: 0;
  animation: ping 1.4s var(--ease) 0.6s 1;
}
@keyframes ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }

.release-card {
  padding: 22px 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--hairline);
}
/* The newest big release is the one card that stands out. */
.release--featured .release-card {
  padding: 28px 30px 30px;
  background: linear-gradient(160deg, #1b1636 0%, var(--surface) 58%);
  border-color: var(--accent-line);
  box-shadow: 0 18px 50px rgba(124, 92, 255, 0.16);
}

.release-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.release-version {
  margin: 0;
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
}
.release--featured .release-version { font-size: clamp(40px, 5vw, 52px); color: var(--accent-hover); }
.release-latest {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--button);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.release-date { color: var(--text-dim); font-size: 15px; }
.release-count { display: flex; gap: 12px; margin-left: auto; font-size: 14.5px; }
.release-count b { font-weight: 700; }
.count--new { color: #c6b8ff; }
.count--better { color: var(--ok); }
.count--fixed { color: #ffcf85; }

.notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.note {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: rgba(8, 8, 13, 0.5);
  border: 1px solid transparent;
  font-size: 17px;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.note:hover { border-color: var(--border); transform: translateX(3px); }
.release:not(.release--featured) .note { font-size: 16px; padding: 10px 14px; }

/* A small update: a quiet line on the timeline, no card, whether or not it's the latest. */
.release-kind { padding: 3px 9px; border-radius: 8px; background: var(--surface-3); color: var(--text-dim); font-size: 12.5px; font-weight: 700; }
.release--small .release-node { top: 10px; left: -38px; width: 16px; height: 16px; }
.release--small .release-node::after { inset: 3px; }
.release--small .release-card { padding: 4px 0 0; background: none; border: 0; }
.release--small .release-head { margin-bottom: 10px; }
.release--small .release-version { font-size: 20px; }
.release--small .release-latest { background: var(--surface-3); color: var(--text); }
.release--small .note { padding: 7px 12px; font-size: 15.5px; background: transparent; border-color: var(--hairline); }

.note-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  padding: 3px 10px 3px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  background: var(--surface-3);
  color: var(--text-dim);
}
.note-tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.note-tag--new { background: var(--accent-soft); color: #c6b8ff; }
.note-tag--better { background: rgba(67, 214, 160, 0.13); color: var(--ok); }
.note-tag--fixed { background: rgba(255, 182, 72, 0.13); color: #ffcf85; }


/* ---------------------------------------------------------------- features */

.features { padding-top: 88px; padding-bottom: 96px; border-top: 1px solid var(--hairline); }

.feature-lead { max-width: 760px; margin-bottom: 56px; }
.feature-lead p { margin: 16px 0 0; color: var(--text-dim); font-size: 19px; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 44px 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-list li { position: relative; padding-top: 4px; }
.feature-list svg {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature-list svg .hl { stroke: var(--accent-hover); }
.feature-list h3 { margin: 0 0 6px; font-size: 22px; }
.feature-list p { margin: 0; color: var(--text-dim); font-size: 16.5px; }

/* ---------------------------------------------------------------- credit */

.credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  max-width: 1180px;
  margin: 8px auto 64px;
  padding: 0 24px;
}
.credit img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  object-fit: cover;
}
.credit p { margin: 0; }
.credit-label { color: var(--text-dim); font-size: 15px; font-weight: 600; }
.credit-name { font-family: var(--display); font-size: 30px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; }

/* ---------------------------------------------------------------- footer */

.foot {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  border-top: 1px solid var(--hairline);
  color: var(--text-dim);
  font-size: 15px;
}
.foot p { margin: 0; flex: 1; }
.foot a { color: var(--text-dim); text-underline-offset: 3px; }
.foot a:hover { color: var(--text); }

/* ---------------------------------------------------------------- arriving on scroll
   Each section rises in once as it comes into view (browsers without scroll
   timelines simply show it). */

@supports (animation-timeline: view()) {
  .reveal {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  .feature-list .reveal:nth-child(2n) { animation-range: entry 5% entry 40%; }
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 56px 24px 72px; }
  /* One column: the card is as wide as the page, with no room around it for the ring. */
  .orbits { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .top { padding: 12px 16px; }
  .top nav a:not(.top-download):not(.top-discord) { display: none; }
  .top nav .top-discord span { display: none; }
  .top nav .top-discord { padding: 9px 11px; }
  .hero { padding: 40px 16px 56px; }
  .hero h1 img { width: 280px; }
  .sub { font-size: 17px; }
  .button--big { display: flex; justify-content: center; width: 100%; }
  .sources li { padding: 12px; gap: 12px; }
  .sources li img { width: 44px; height: 44px; border-radius: 12px; }
  .new, .features { padding-left: 16px; padding-right: 16px; }
  .timeline { padding-left: 34px; }
  .timeline::before { left: 10px; }
  .release-node { left: -34px; width: 22px; height: 22px; }
  .release-node::after { inset: 5px; }
  .release-card, .release--featured .release-card { padding: 20px 18px; }
  .release--small .release-card { padding: 2px 0 0; }
  .release--small .release-node { left: -31px; }
  .release-count { margin-left: 0; width: 100%; }
  .note { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
  .foot { padding: 22px 16px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .orbit { stroke-dashoffset: 0; }
  .orbit-moon { display: none; }
}