/* =========================================================================
   Aerochat — stylesheet
   Reconstructed from the original SvelteKit build (three scoped CSS files
   merged; the auto-generated `svelte-xxxxx` class hashes were replaced with
   plain semantic class names).
   ========================================================================= */

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

/* ----------------------------- Base / reset ---------------------------- */
* {
  -webkit-user-select: none;
  user-select: none;
  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; }

/* Bouncing application screenshot */
.screenshot {
  animation: bounce-2 4s infinite ease-in-out;
  border-radius: 6px;
  transform: perspective(960px) rotateX(8deg) rotateY(20deg) rotate(-4deg);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5));
  margin-left: -32px;
}

.info { margin-left: 64px; }

/* "You should use Aerochat" pre-heading */
.pre {
  margin-bottom: -20px;
  margin-left: 4px;
  font-style: italic;
  font-size: 24px;
  color: #359baf;
  text-shadow: 0 0 24px rgba(49, 183, 220, 0.754);
}

/* Big "because..." word with a mirrored reflection underneath */
.because {
  font-size: 96px;
  color: #359aae;
  text-shadow: 0 0 24px rgba(49, 183, 220, 0.754);
  position: relative;
  width: fit-content;
  margin-left: -2px;
}
.because::after {
  width: fit-content;
  content: "because...";
  position: absolute;
  top: -45px;
  left: 0;
  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%);
}

/* Rotating "why" taglines (two stacked headings that crossfade).
   Both headings share one grid cell: they overlap for the crossfade, while
   the container still reserves the height of the taller one. That reserved
   height is what keeps the article below from overlapping the heading —
   no JavaScript measurement required, so it can't misfire on narrow screens. */
.why-container {
  display: grid;
}
.why-container > h1 {
  grid-area: 1 / 1;
  max-width: 550px;
  margin-top: 16px;
  margin-left: 5px;
  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;
}
.why-container > .why.will-fade-in  { opacity: 1; }
.why-container > .why.will-fade-out { opacity: 0; }
.why-container > .why.fade-in  { animation: fade-in  var(--fade-out-delay) ease-in-out forwards; }
.why-container > .why.fade-out { animation: fade-out var(--fade-out-delay) ease-in-out forwards; }

/* Article body */
article > h1 { margin-top: 16px; }
article > h1:first-child { margin-top: -8px; }

/* Fixed gap below the rotating heading. The `!important` also overrides the
   inline margin-top the old script.js sets at runtime, so the layout is now
   driven entirely by CSS and no longer depends on JS measuring the heading. */
.hero article { margin-top: 40px !important; }

/* ---------------------------- 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;
}

/* ------------------------------ Keyframes ------------------------------ */
@keyframes fade-in  { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bounce-2 {
  0%  { transform: perspective(960px) rotateX(8deg)  rotateY(20deg) rotate(-4deg); }
  50% { transform: perspective(960px) rotateX(12deg) rotateY(25deg) rotate(-6deg) translateY(-24px); }
}

/* ----------------------------- Responsive ------------------------------ */

/* Tier 2 — 1200px and below: hide the screenshot. With it gone, the 64px gap
   that separated the text from it is no longer needed, so reset it too (this
   also keeps the text column from overflowing on narrower widths). The rest of
   the desktop layout stays until the mobile tier below. */
@media (max-width: 1200px) {
  .screenshot { display: none; }
  .info { margin-left: 0; }
}

/* Tier 3 — below 600px: full mobile layout. Let the hero flow in normal
   document order instead of being an absolutely positioned, full-viewport,
   vertically-centred box (which overflowed and clipped text on small screens). */
@media (max-width: 600px) {
  .hero {
    position: static;
    height: auto;
    width: 100%;
    margin: 0;
    display: block;
    box-sizing: border-box;
    padding: 8px 16px 40px;
  }
  .hero__row { display: block; }

  /* Centre the display type. */
  .info { text-align: center; }
  .pre { margin-left: 0; }

  /* "because..." is 96px on desktop — far wider than a phone. Scale it down. */
  .because {
    font-size: clamp(44px, 16vw, 96px);
    margin: 0 auto;
  }

  /* Centre the stacked headings within their grid cell. */
  .why-container { justify-items: center; }
  .why-container > h1 { margin-left: 0; }

  /* Cap the article to the screen so it can't overflow. The `!important`
     overrides the inline max-width/margin the article carries. */
  .hero article {
    max-width: 100% !important;
    margin-left: 0 !important;
    text-align: left;
  }
}