/*
 * Wind Client website. Colours mirror the launcher's theme variables
 * (space-separated RGB) so the theme picker re-tints the whole page.
 * Scroll motion: main.js springs each [data-scene] toward its scroll
 * position and writes it to --p (-1 below the viewport, 0 centred, 1 above).
 */

/* Inter, served from this site so visitors' IPs never go to a font CDN (GDPR) */
@font-face {
  font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --canvas: 0 0 0;
  --elevated: 18 18 20;
  --ink: 245 245 247;
  --ink-muted: 161 161 170;
  --ink-faint: 99 99 108;
  --accent: 10 132 255;
  --accent-bright: 100 178 255;
  --radius: 12px;
  --spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --spring-bouncy: linear(0, 0.009, 0.037 2.3%, 0.145 4.8%, 0.668 14.4%, 0.894 19.6%, 1.054 25.2%, 1.11 29.1%, 1.124 32.9%, 1.113 36.5%, 1.032 46.6%, 0.995 54.6%, 0.987 61.4%, 1.002 79.3%, 1);
  --gutter: max(20px, calc((100vw - 1280px) / 2));
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* clip, not hidden: hidden still lets scrollIntoView and trackpads nudge the page sideways */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: rgb(var(--canvas));
  color: rgb(var(--ink));
  font: 400 17px/1.55 Inter, -apple-system, "Segoe UI Variable", "Segoe UI", sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 600ms var(--spring);
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: rgb(var(--accent) / 0.4); }
:focus-visible { outline: 2px solid rgb(var(--accent) / 0.8); outline-offset: 3px; }
svg { width: 20px; height: 20px; flex: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }

/* Brand tile, same squircle as the app icon */
.tile {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 30%;
  background: linear-gradient(rgb(var(--accent-bright)), rgb(var(--accent)));
  color: #fff;
  transition: background 600ms var(--spring);
}
.tile svg { width: 68%; height: 68%; }
.tile-xl { width: 76px; height: 76px; box-shadow: 0 16px 50px -10px rgb(var(--accent) / 0.6); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform 600ms var(--spring), background-color 200ms var(--spring), filter 200ms var(--spring);
}
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.btn:active { transform: scale(0.96); }
.btn-primary { background: rgb(var(--accent)); color: #fff; }
.btn-primary:hover { filter: brightness(1.12); }
.btn-glass { background: rgb(255 255 255 / 0.12); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); }
.btn-glass:hover { background: rgb(255 255 255 / 0.18); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 24px; font-size: 16px; border-radius: 16px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius); background: rgb(255 255 255 / 0.1); color: rgb(var(--ink));
  transition: transform 600ms var(--spring), background-color 200ms var(--spring);
}
.icon-btn:hover { background: rgb(255 255 255 / 0.16); }
.icon-btn:active { transform: scale(0.92); }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  height: 68px; padding: 0 var(--gutter);
  transition: background-color 300ms var(--spring);
}
.nav.scrolled { background: rgb(var(--canvas) / 0.7); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 17px; }
.links { display: flex; gap: 4px; margin-left: 8px; }
.links a { padding: 8px 12px; border-radius: var(--radius); color: rgb(var(--ink) / 0.7); font-size: 14px; font-weight: 500; transition: color 200ms var(--spring), background-color 200ms var(--spring); }
.links a:hover { color: rgb(var(--ink)); background: rgb(255 255 255 / 0.08); }
.nav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* Scenes: full-bleed art that drifts with scroll and melts into black at the edges */
.scene { --p: 0; position: relative; isolation: isolate; overflow: clip; }
.scene-art {
  position: absolute; inset: -12% 0; z-index: -1;
  background: var(--art) center / cover;
  transform: translate3d(0, calc(var(--p) * 9%), 0) scale(calc(1.06 + var(--p) * var(--p) * 0.08));
  will-change: transform;
}
.scene-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgb(var(--canvas)) 8%, rgb(var(--canvas) / 0.2) 30%, rgb(var(--canvas) / 0.2) 70%, rgb(var(--canvas)) 92%),
    linear-gradient(to right, rgb(var(--canvas) / 0.85), rgb(var(--canvas) / 0.15) 60%);
  transition: background 600ms var(--spring);
}
.flip .scene-art::after {
  background:
    linear-gradient(to bottom, rgb(var(--canvas)) 8%, rgb(var(--canvas) / 0.2) 30%, rgb(var(--canvas) / 0.2) 70%, rgb(var(--canvas)) 92%),
    linear-gradient(to left, rgb(var(--canvas) / 0.85), rgb(var(--canvas) / 0.15) 60%);
}

/* Hero */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 140px var(--gutter) 22vh; }
.hero .scene-art { inset: 0 0 -10%; transform: translate3d(0, calc(var(--p) * 14%), 0) scale(calc(1.04 + max(var(--p), 0) * 0.1)); animation: drift 40s ease-in-out infinite alternate; }
.hero .scene-art::after {
  background:
    linear-gradient(to bottom, rgb(var(--canvas) / 0.5), transparent 25%, transparent 50%, rgb(var(--canvas)) 96%),
    linear-gradient(to right, rgb(var(--canvas) / 0.7), transparent 70%);
}
@keyframes drift { to { background-position: 60% 40%; } }
.hero-content { position: relative; max-width: 860px; transform: translate3d(0, calc(var(--p) * -60px), 0); opacity: calc(1 - max(var(--p), 0) * 1.6); }
h1 {
  margin-top: 28px;
  font-size: clamp(64px, 12vw, 184px); font-weight: 900; line-height: 0.9; letter-spacing: -0.055em;
  text-shadow: 0 6px 60px rgb(0 0 0 / 0.45);
}
.hero-lead { margin-top: 26px; max-width: 560px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; color: rgb(255 255 255 / 0.86); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.hero-meta { position: absolute; right: var(--gutter); bottom: calc(22vh + 12px); font-size: 14px; color: rgb(255 255 255 / 0.6); }

/* Load-in for the hero, staggered */
.rise { opacity: 0; transform: translateY(36px); animation: rise 1100ms var(--spring) forwards; }
.rise:nth-child(2) { animation-delay: 90ms; }
.rise:nth-child(3) { animation-delay: 180ms; }
.rise:nth-child(4) { animation-delay: 270ms; }
.hero-meta.rise { animation-delay: 400ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* The launcher window rising out of the hero and flattening as it centres */
.stage { --p: 0; position: relative; z-index: 2; margin-top: -18vh; padding: 0 var(--gutter); perspective: 1800px; }
.stage-shot {
  max-width: 1280px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  background: rgb(var(--elevated));
  box-shadow: 0 60px 140px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.07), 0 0 120px -20px rgb(var(--accent) / 0.25);
  transform: rotateX(calc(clamp(-1, var(--p), 0) * -22deg)) scale(calc(1 + clamp(-1, var(--p), 0) * 0.08));
  transform-origin: 50% 100%;
  will-change: transform;
}

/* Feature scenes */
.feature { min-height: 120vh; display: grid; align-items: center; padding: 18vh 0; }
.feature-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; padding: 0 var(--gutter); }
.flip .feature-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.flip .feature-inner > .copy { order: 2; }
.copy { max-width: 520px; }
h2 { font-size: clamp(40px, 5.6vw, 80px); font-weight: 800; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.copy > p { margin-top: 24px; font-size: 19px; color: rgb(255 255 255 / 0.78); }
.crop { aspect-ratio: 16 / 7.5; }
.crop img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.copy > .aside { font-size: 16px; color: rgb(255 255 255 / 0.55); }

.shot {
  border-radius: 18px; overflow: hidden; background: rgb(var(--elevated));
  box-shadow: 0 50px 120px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.07);
  will-change: transform;
}
.bleed-right { width: 125%; transform: perspective(1800px) translate3d(calc(var(--p) * -40px), calc(var(--p) * -90px), 0) rotateY(calc(-9deg + var(--p) * 6deg)); transform-origin: 0 50%; }
.bleed-left { width: 125%; margin-left: -25%; transform: perspective(1800px) translate3d(calc(var(--p) * 40px), calc(var(--p) * -90px), 0) rotateY(calc(9deg - var(--p) * 6deg)); transform-origin: 100% 50%; }

/* Live servers */
.live { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.live strong { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
.servers { list-style: none; display: grid; gap: 12px; max-width: 560px; justify-self: end; width: 100%; transform: translate3d(0, calc(var(--p) * -70px), 0); }
.servers li {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px 14px 14px; border-radius: 20px;
  background: rgb(var(--elevated) / 0.72); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.8);
  position: relative; opacity: 0; transform: translateX(60px);
  /* The hover grow uses `scale` so it never waits on the staggered reveal delays below */
  transition: opacity 600ms var(--spring), transform 900ms var(--spring-bouncy), background-color 400ms var(--spring), scale 650ms var(--spring-bouncy), box-shadow 400ms var(--spring);
}
.servers.in li { opacity: 1; transform: none; }
.servers li:nth-child(2) { transition-delay: 70ms, 70ms, 0s, 0s, 0s; margin-right: 28px; }
.servers li:nth-child(3) { transition-delay: 140ms, 140ms, 0s, 0s, 0s; margin-left: 28px; }
.servers li:nth-child(4) { transition-delay: 210ms, 210ms, 0s, 0s, 0s; margin-right: 14px; }
/* Hovering a server grows its whole card a little and lifts it above the others */
@media (hover: hover) {
  .servers li:hover {
    z-index: 1; scale: 1.045;
    background: rgb(var(--elevated) / 0.9);
    box-shadow: 0 34px 70px -22px rgb(0 0 0 / 0.9);
  }
}
/* On touch screens a press gives the same feedback */
.servers li:active { scale: 0.98; }
.srv-icon { width: 52px; height: 52px; border-radius: 13px; flex: none; image-rendering: pixelated; background: rgb(255 255 255 / 0.08); display: grid; place-items: center; font-weight: 700; color: rgb(var(--ink-muted)); }
.srv-main { flex: 1; min-width: 0; }
.srv-main strong { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.srv-main span { font-size: 14px; color: rgb(var(--ink-muted)); }
.srv-count { text-align: right; font-variant-numeric: tabular-nums; }
.srv-count strong { display: block; font-size: 20px; font-weight: 700; color: rgb(48 209 88); letter-spacing: -0.02em; }
.srv-count span { font-size: 13px; color: rgb(var(--ink-faint)); }
.srv-count.off strong { color: rgb(var(--ink-faint)); font-size: 16px; }

/* In-game shots */
.ingame { position: relative; padding-bottom: 18%; }
.game-a { width: 88%; transform: perspective(1800px) translate3d(0, calc(var(--p) * -50px), 0) rotateY(calc(8deg - var(--p) * 5deg)); }
.game-b { position: absolute; right: 0; bottom: 0; width: 58%; transform: translate3d(0, calc(var(--p) * -140px), 0) rotate(-2deg); box-shadow: 0 40px 90px -20px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.1); }

/* Themes */
.themes { padding: 12vh var(--gutter) 6vh; text-align: center; }

.themes p { margin: 20px auto 0; max-width: 520px; font-size: 19px; color: rgb(var(--ink) / 0.7); }
.swatches { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 48px; }
.swatches button {
  display: grid; justify-items: center; gap: 12px; width: 112px; padding: 18px 8px 14px;
  border: 0; border-radius: 22px; background: rgb(var(--elevated));
  font-size: 14px; font-weight: 500; color: rgb(var(--ink-muted));
  transition: transform 700ms var(--spring-bouncy), background-color 600ms var(--spring), color 200ms var(--spring);
}
.swatches button span {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--bg)) 50%, rgb(var(--sw)) 50%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: transform 700ms var(--spring-bouncy);
}
@media (hover: hover) { .swatches button:hover span { transform: rotate(-20deg) scale(1.06); } }
.swatches button:active { transform: scale(0.93); }
.swatches button[aria-checked="true"] { color: rgb(var(--ink)); transform: translateY(-6px); background: rgb(var(--accent) / 0.2); }

/* Extras: large type, no boxes */
.extras { padding: 10vh var(--gutter) 16vh; }
.extras h2 { font-size: clamp(32px, 4vw, 56px); }
.extras ul { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.extras h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.035em; color: rgb(var(--accent-bright)); transition: color 600ms var(--spring); }
.extras p { margin-top: 10px; font-size: 17px; color: rgb(var(--ink) / 0.65); }

/* Download */
.download { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 18vh var(--gutter); }
.download .scene-art::after {
  background:
    linear-gradient(to bottom, rgb(var(--canvas)) 5%, rgb(var(--canvas) / 0.6) 35%, rgb(var(--canvas) / 0.6) 70%, rgb(var(--canvas)) 98%);
}
.download h2 { margin-top: 32px; font-size: clamp(44px, 7vw, 104px); }
.download-inner > p { margin-top: 18px; font-size: 19px; color: rgb(255 255 255 / 0.8); }
.download .cta { justify-content: center; margin-top: 40px; }
.download .fine a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.download .fine + .fine { margin-top: 8px; }
.download .fine { margin-top: 24px; font-size: 14px; color: rgb(255 255 255 / 0.7); }

/* Footer */
.footer { padding: 40px var(--gutter) 56px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.footer-link { display: inline-flex; align-items: center; gap: 8px; color: rgb(var(--ink-muted)); font-weight: 500; transition: color 200ms var(--spring); }
.footer-link:hover { color: rgb(var(--ink)); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; }
.footer-links a { font-size: 14px; color: rgb(var(--ink-muted)); transition: color 200ms var(--spring); }
.footer-links a:hover { color: rgb(var(--ink)); }
.legal { margin-top: 20px; font-size: 13px; color: rgb(var(--ink-faint)); max-width: 720px; }
.legal strong { color: rgb(var(--ink-muted)); font-weight: 600; letter-spacing: 0.02em; }

/* Legal documents */
.doc { max-width: 760px; margin: 0 auto; padding: 140px 20px 40px; }
.doc h1 { margin: 0; font-size: clamp(44px, 7vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; }
.doc .updated { margin-top: 16px; color: rgb(var(--ink-faint)); font-size: 15px; }
.doc .summary { margin-top: 40px; padding: 24px 28px; border-radius: 20px; background: rgb(var(--elevated)); }
.doc .summary h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.doc .summary ul { margin: 0; padding-left: 20px; }
.doc .summary li { margin-top: 6px; color: rgb(var(--ink) / 0.8); font-size: 16px; }
.doc nav.toc { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.doc nav.toc a { padding: 7px 12px; border-radius: var(--radius); background: rgb(255 255 255 / 0.07); font-size: 14px; color: rgb(var(--ink-muted)); transition: background-color 200ms var(--spring), color 200ms var(--spring); }
.doc nav.toc a:hover, .doc nav.toc a[aria-current] { background: rgb(255 255 255 / 0.12); color: rgb(var(--ink)); }
.doc section { margin-top: 48px; scroll-margin-top: 90px; }
.doc section h2 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.03em; }
.doc h3 { margin: 28px 0 0; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.doc p, .doc li { color: rgb(var(--ink) / 0.78); font-size: 16px; line-height: 1.7; }
.doc p { margin-top: 14px; }
.doc ul, .doc ol { margin: 12px 0 0; padding-left: 22px; }
.doc li + li { margin-top: 6px; }
.doc a:not(.btn) { color: rgb(var(--accent-bright)); }
.doc a:not(.btn):hover { text-decoration: underline; }
.doc strong { color: rgb(var(--ink)); font-weight: 600; }
.doc table { width: 100%; margin-top: 16px; border-collapse: separate; border-spacing: 0; font-size: 15px; border-radius: 16px; overflow: hidden; background: rgb(var(--elevated)); }
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; color: rgb(var(--ink) / 0.78); line-height: 1.55; }
.doc th { color: rgb(var(--ink)); font-weight: 600; background: rgb(255 255 255 / 0.05); }
.doc tr + tr td { box-shadow: inset 0 1px rgb(255 255 255 / 0.05); }
.doc .table-wrap { overflow-x: auto; }

/* Scroll reveal on a spring */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 700ms var(--spring), transform 1000ms var(--spring); }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .links { display: none; }
  .feature { min-height: 0; padding: 14vh 0; }
  .feature-inner { grid-template-columns: 1fr; gap: 48px; }
  .flip .feature-inner { grid-template-columns: 1fr; }
  .flip .feature-inner > .copy { order: 0; }
  /* One column: shots stay flat and only drift with scroll; the 3D lean is for wide screens */
  .bleed-right, .bleed-left { width: 100%; margin: 0; transform: translate3d(0, calc(var(--p) * -50px), 0); }
  .game-a { transform: translate3d(0, calc(var(--p) * -40px), 0); }
  .stage-shot { transform: scale(calc(1 + clamp(-1, var(--p), 0) * 0.05)); }
  .hero-content { max-width: 640px; }
  .hero-meta { position: static; margin-top: 20px; }
  .servers { justify-self: stretch; max-width: none; }
  .extras ul { grid-template-columns: 1fr 1fr; }
  .scene-art::after, .flip .scene-art::after {
    background: linear-gradient(to bottom, rgb(var(--canvas)) 4%, rgb(var(--canvas) / 0.55) 30%, rgb(var(--canvas) / 0.55) 70%, rgb(var(--canvas)) 96%);
  }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 16vh; }
  .cta .btn { width: 100%; }
  .tile-xl { width: 64px; height: 64px; }
  .stage { margin-top: -10vh; }
  .stage-shot, .shot { border-radius: 12px; }
  /* Shots run off the right edge so the launcher stays big enough to read on a phone */
  .stage { padding-right: 0; }
  .stage-shot { width: 175%; max-width: none; margin: 0; }
  .bleed-right, .bleed-left { width: 165%; }
  .crop { aspect-ratio: 16 / 9; }
  .ingame { width: 135%; }
  .feature { padding: 10vh 0; }
  .feature-inner { gap: 36px; }
  .copy > p { font-size: 17px; }
  .live strong { font-size: 34px; }
  .themes p { font-size: 17px; }
  .download .cta { flex-direction: column; }
  .servers li { margin: 0 !important; }
  .srv-icon { width: 44px; height: 44px; }
  .extras ul { grid-template-columns: 1fr; gap: 28px; }
  .swatches button { width: calc(33.3% - 10px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 150ms !important; }
  .rise { opacity: 1; transform: none; }
  .reveal { transform: none; }
}