/* =========================================================================
   Aerochat — download page stylesheet
   Reconstructed from the original SvelteKit build. The shared base (reset,
   nav, buttons, command links) is identical to the home page's stylesheet;
   the page-specific section (screenshots / "join the club" / download links)
   replaces the home page's hero.
   ========================================================================= */

:root {
  --aero-white: #fff;
}

/* ----------------------------- Base / reset ---------------------------- */
* {
  font-family: "Segoe UI", sans-serif;
  font-size: 12px;
}

body {
  margin: 0;
  background: linear-gradient(to bottom right, #f9feff 50%, #b9d1ea) no-repeat fixed;
}

h1 {
  margin-top: 0;
  font-size: 16px;
  font-weight: 400;
  color: #039;
}

a {
  color: #06c;
  text-decoration: none;
}
a:hover  { text-decoration: underline; }
a:active { color: #e00; }

p {
  text-shadow: 0 0 0.5px #0000004f;
}

/* ------------------------------ Buttons -------------------------------- */
/* (Aero-style buttons — part of the theme, kept for reuse.) */
button:not([data-fakebutton]) {
  outline: none;
  border: solid thin #707070;
  border-radius: 4px;
  min-width: 60px;
  padding: 2px 12px;
  box-shadow: inset 0 0 0 1px var(--aero-white);
  background: linear-gradient(180deg, #f2f2f2, #ebebeb 40%, #ddd 40%, #cfcfcf);
  position: relative;
  z-index: 1;
  transition: opacity 0.35s linear;
}
button:not(:disabled):not([data-fakebutton]):hover { border: solid thin #3c7fb1; }
button:not([data-fakebutton])::before {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, #eaf6fd, #d9f0fc 40%, #bee6fd 40%, #a7d9f5);
  z-index: -1;
  transition: opacity 0.35s linear;
  opacity: 0;
  border-radius: 3px;
}
button:not([data-fakebutton]):not(:disabled):hover::before { opacity: 1; }
button:not([data-fakebutton])::after {
  box-shadow: inset 0 0 0 1px #95ade474;
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(180deg, #e5f4fc, #c4e5f6 40%, #98d1ef 40%, #68b3db);
  z-index: -1;
  transition: opacity 0.1s linear;
  opacity: 0;
  border-radius: 3px;
}
button:not([data-fakebutton]):not(:disabled):active::after { opacity: 1; }
button:not([data-fakebutton]):disabled {
  opacity: 0.8;
  color: #444;
  border: solid thin #999;
  background: linear-gradient(180deg, #f2f2f2, #ebebeb 40%, #e7e7e7 40%, #cfdcdc);
}

/* --------------------------- Navigation bar ---------------------------- */
.nav {
  position: fixed;
  width: calc(100% - 2px);
  margin-left: 1px;
  height: 32px;
  background: linear-gradient(to bottom, #87b2c0, #468a9e 50%, #105c77 50%, #529cab);
  outline: solid thin rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px #ffffff80, 0 0 16px #015c5f;
  color: #fff;
  display: flex;
  align-items: center;
  z-index: 9;
}
.nav__left,
.nav__right {
  display: flex;
  box-sizing: border-box;
  padding: 0 4px;
}
.nav__left { flex-grow: 1; }

.nav__item {
  cursor: default;
  display: flex;
  text-align: center;
  vertical-align: middle;
  line-height: 23px;
  height: 24px;
  padding: 0 12px;
  margin: 0 2px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #fff;
  -webkit-user-drag: none;
}
.nav__item:hover {
  background: linear-gradient(to bottom, #ffffff40, #fff6 50%, #ffffff40 50%, #ffffff1a);
  text-decoration: none;
  outline: solid thin rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px #ffffff80;
}
.nav__item:active {
  outline: solid thin rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 8px #00575b, inset 0 0 0 1px #ffffffbf;
  background: #eaeaea4c;
}
.nav__item:active > span { transform: translate(1px, 1px); }

/* ------------------------------- Layout -------------------------------- */
.page {
  box-sizing: border-box;
  padding-top: 60px;
}

.hero {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100vw - 2%);
  height: 100vh;
  align-items: center;
  justify-content: center;
}
.hero__row { display: flex; }

/* -------------------- Screenshots (two stacked, 3D bob) ---------------- */
.screenshots {
  width: 400px;
  height: 670px;
  transform-style: preserve-3d;
}
.screenshots > img { position: absolute; }

.screenshot {
  position: relative;
  display: inline-block;   /* shrink-wrap to the image */
  border-radius: 6px;
}

.screenshot img {
  display: block;
  position: relative;
  z-index: 1;              /* image stays on top, unchanged size */
  border-radius: 6px;
}

.screenshot::before {
  content: "";
  position: absolute;
  inset: 20px;             /* THE KNOB — see below */
  z-index: 0;              /* blur sits behind the image */
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.screenshot2 {
  transform: perspective(960px) rotateX(4deg) rotateY(14deg) rotate(-3deg);
  animation: bounce-1 4s infinite ease-in-out;
  margin-left: -32px;
}
.screenshot3 {
  transform: perspective(720px) translate3d(0, 50px, 80px) rotateX(12deg) rotateY(-8deg) rotate(3deg);
  margin-top: 128px;
  margin-left: -250px;
  animation: bounce-2 7s infinite ease-in-out;
}

.info { margin-left: 64px; }

/* Big "join the club" headline with a mirrored reflection underneath.
   The reflection intentionally omits the leading "j" and is nudged right so
   the flipped descender doesn't poke out. */
.because {
  font-size: 96px;
  color: #359aae;
  text-shadow: 0 0 24px rgba(49, 183, 220, 0.754);
  position: relative;
  width: fit-content;
}
.because::after {
  content: "oin the club";
  width: 100%;
  position: absolute;
  top: -48px;
  left: 23px;
  transform-origin: bottom center;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 50%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0) 50%);
}

.why-container {
  margin-left: -12px;
  display: flex;
  flex-direction: column;
}
.why-container > p {
  font-size: 24px;
  font-weight: 400;
  color: #014f5e;
  text-shadow: 0 0 24px rgba(49, 183, 220, 0.754);
  box-sizing: border-box;
  opacity: 1;
  max-width: 450px;
}

/* ---------------------------- Command links ---------------------------- */
.commandLink {
  --hover-enter-length: 0.25s;
  --hover-leave-length: 1s;
  --active-enter-length: 0s;
  --active-leave-length: 0.5s;
  display: block;
  text-decoration: none;
  margin: 2px 0;
  width: calc(100% - 16px);
  height: fit-content;
  padding: 8px 16px 12px 0;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #fff0;
  color: #151c55;
  text-shadow: 0 0 0.5px #151c5552;
  transition: var(--hover-leave-length) linear;
  transition-property: box-shadow, color, text-shadow, outline;
  outline: solid thin rgba(255, 255, 255, 0);
  z-index: 1;
  position: relative;
}
.commandLink::before {
  position: absolute;
  content: "";
  inset: 0;
  background: linear-gradient(to bottom, #ffffff80, #ededed00);
  z-index: -1;
  transition: opacity linear;
  transition-duration: var(--hover-enter-length);
  opacity: 0;
  border-radius: 2px;
}
.commandLink:not(:hover)::before { transition-duration: var(--hover-leave-length); }
.commandLink:not(:disabled):hover::before { opacity: 1; }
.commandLink::after {
  box-shadow: inset 0 0 2px 2px #ccc;
  position: absolute;
  content: "";
  inset: 0;
  background: #f2f3f3;
  z-index: -1;
  transition: opacity linear;
  transition-duration: var(--active-leave-length);
  opacity: 0;
  border-radius: 2px;
}
.commandLink:active::after { transition-duration: var(--active-enter-length); }
.commandLink:not(:disabled):active::after { opacity: 1; }
.commandLink:hover {
  outline: solid thin #c6c6c6;
  transition-duration: var(--hover-enter-length);
  color: #074ae5 !important;
}
.commandLink:active { outline: solid thin #7a9ecc; }
.commandLink h1 {
  margin: 0;
  font-size: 12pt;
  font-weight: 400;
  color: unset;
  padding: 0 0 0 44px;
  transform: translate(-12px);
}
.commandLinkIcon {
  float: left;
  position: relative;
  margin-top: 3px;
  margin-right: 16px;
  margin-left: 4px;
  width: 20px;
  height: 18px;
  background-position-y: -3px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABkCAYAAACGqxDMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAS3SURBVGhD7Zl/SFtXFMe1TrtMt9jQlVA3h50u02x0wpBUi6xTnIPYGro5ahUCY7WzzGyCVWEIxsH2z/6YSJiDKVbwB44acc51DloIumWsblTSRGJidf5I/ZkmGuuqnp0T8t6SzDSvSaB/7F34kJe8977v3HPOfSf33qgovnk8EI2f+xGSgw7gXTHIE0isF/QbnaMHcW50MQnFIQIkoby8/IOxsbFfdTrdaGlpabnnYZxFyQKy6ilEKBKJUle3ViGn6wTk9pyExY1FqK6uvsxFlPEXiZFliYhYoVBc6DdfhZgvo9xIvk2FGccM1NXVffowUcZnjGWH8OKjyItCoVBmv2+HhK8ErGjKN8lgXjdDQ0ODOpAoCT1J/kJEhYWF5wcGBn7u6+v7qbW1VYsMulyu+xltElY06WsxGFYM0NjY+JknUD5BOojfnkYOazSaK4CtWHsaSgbfgYsjF1i8Ban7Ys2zMLF8C1Qq1Sf+kacAiJDnSOzAFSFn0rWvg8lkmvQXJOuOICkkGD1yjDNpo6fAbDZP+XebFcQu95LoGYsK3p6qhIpZNcvLhjMQPX6c5citN+D3TQOlUY2/INtlPCHBoFzCoOiGh4d/w4BcQ0acTueWZOY9iDKfcCO2ysGwbaWgfO7JW59Epwi7g0J+RF5CXkNyMG2K7btOSLC8yYolTxeDaXuG0obEKGdpZPkI+qQNnkxC0pDjmNj1VzdusGIpd87CzAMbJTalCxlBQ5Ty2KcFTGwceidXd+5B1l/vu1ncWYGamppGvPsZhNKNXhj7jut9hx5e/IJSqbys1+v/RP7A4488lj1UzNtcn5eDx6+UUuTfRIRGE2cxEv7P68sjEu8JAPk7YDf9fcl8j+gLlhGNaAlguv6/rSnbq5B7PQdO3cgF21YEaop2vh8OfhfjJuNHCcxuhltT/rZDYn8CK5r6QwpMOSNQU169lsGKJn+fBLfvPUJNOTtaDOd+KYHKmxdZvAWp+0mDYpiwTwSvKXHXDwNXXtHLgteUOGM6cCXd8ha3mqKw14B8/WP40PEFi3SlBGLvyliOLhfCzQfG0GuKdEsJsZt5bp53vQu3d++EWFP2NuDQppwVO+Y6B5O7s6HXFO2OjhVLc52H2b27YdaUPQdkb11ys7i3yteUQFVk/zodkT/tfE3h5yn475+fpwSvKfw8hZ+n8PMUbjXKfVXE5ymP8OzHfalMJiuvra0dw3myLisrqzQse+Lj40Xt7e1gtVrBYrFAR0cH5OfnV4csmpmZqRgaGgKHw+Fmfn4eOjs7ARc66kISFQgEwra2NlhfX2dFbTYbdHV1gVwub+AkKpVKCysrKwcqKir6ysrKWomWlhbX3NwcK7q0tAQ9PT1QVFRE6w+BGy44anCdBoxGIxgMBhgfH2fxFqTuLy8vQ29vL+Tl5akCKpIY4y8un/QQtVptipggBampqckcUNC7y5OTk0G7jGuMwdOICUpVVdUwE5Tm5mZnSEHxN51Jm7W1NZ+06e7u5p423qL+ib2wsBBeYjNDb3p6GggaegUFBbReGHrLzs5W1tfX6wk6Dl2JvzNcD0S0SEV0uY/fT+H3U/z2Wvj9FHa48/sp/25lolMe/37KP5pZSEsMzZ2uAAAAAElFTkSuQmCC);
  transition: var(--hover-leave-length) linear filter;
  filter: brightness(1);
}
.commandLink:hover > .commandLinkIcon {
  filter: brightness(1.2);
  transition-duration: var(--hover-enter-length);
}
.commandLink:active > .commandLinkIcon {
  filter: brightness(1);
  transition-duration: var(--active-enter-length);
}
.commandLinkDescription {
  width: 100%;
  box-sizing: border-box;
  padding-left: 34px;
  margin-top: 2px;
}

/* Disabled state for the "download latest" link until its URL resolves */
.commandLink[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* ------------------------------ Keyframes ------------------------------ */
@keyframes bounce-1 {
  0%   { transform: perspective(960px) rotateX(4deg) rotateY(8deg) rotate(-3deg); }
  50%  { transform: perspective(750px) translateY(5px) rotateX(6deg) rotateY(10deg) rotate(-4deg); }
  100% { transform: perspective(960px) rotateX(4deg) rotateY(8deg) rotate(-3deg); }
}
@keyframes bounce-2 {
  0%   { transform: perspective(720px) translate3d(0, 50px, 80px) rotateX(12deg) rotateY(-8deg) rotate(3deg); }
  50%  { transform: perspective(720px) translate3d(0, 42px, 80px) rotateX(8deg) rotateY(-6deg) rotate(5deg); }
  100% { transform: perspective(720px) translate3d(0, 50px, 80px) rotateX(12deg) rotateY(-8deg) rotate(3deg); }
}

/* ----------------------------- Responsive ------------------------------ */
@media (max-width: 1400px) {
  .screenshots { display: none; }
}

@media (max-width: 900px) {
  /* Let the hero flow in normal document order instead of being an absolutely
     positioned, full-viewport, vertically-centred box (which overflowed and
     left the headline overlapping the content on narrow screens). */
  .hero {
    position: static;
    height: auto;
    width: 100%;
    margin: 0;
    display: block;
    box-sizing: border-box;
    padding: 8px 16px 40px;
  }
  .hero__row { display: block; }

  /* Reset the desktop offsets and centre everything. */
  .info { margin-left: 0; text-align: center; }
  .why-container { margin-left: 0; align-items: center; }

  /* "join the club" is 96px on desktop — far too big for a phone. Scale it,
     and centre the fit-content block. */
  .because {
    font-size: clamp(40px, 13vw, 96px);
    margin: 0 auto;
  }
  /* Hide the mirrored reflection: it can't line up under the headline once the
     text wraps to two lines, so it ends up overlapping the heading below. */
  .because::after {
    display: none;
  }
}