/* Loaded after styles.css, for the download page */

/* ======
  Tokens
  ====== */

:root {
  --text-secondary: #7a7a83;
  /* The desktop app's gradient button, angled with cyan in the bottom left and yellow in the top right */
  --gradient-subtle-diagonal: linear-gradient(to top right, #00afefcc, #ec268fcc, #ffe800cc);

  /* About as big as it was in a window half as wide as a 2560px screen, when it was sized to fit the window */
  --preview-width: 100rem;
}

/* A plain background instead of the landing page's video, laid out as the header and the download
  section filling the window. It scrolls once the window is too small to fit them, but never sideways,
   so the tilted preview's corners can't add a scrollbar */
body {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ======
  Header
  ====== */

/* Sits in the page instead of being fixed over the video like on the landing page */
.header {
  position: relative;
}

/* ========
  Download
  ======== */

/* The button and builds notice on the left and the preview on the right, kept together and centred
  across the window so they don't drift apart on wide screens. The row sits at the top rather than
   stretching down the window, so it's only as tall as the preview */
.download {
  display: grid;
  grid-template-columns: auto var(--preview-width);
  justify-content: center;
  align-content: start;
  align-items: center;
  gap: 6rem;
  padding: 5rem var(--content-inset);
}

/* Centred a quarter of the way down the preview instead of halfway. The offset's percentage resolves
   against the row, which is as tall as the preview */
.download__content {
  position: relative;
  top: -25%;
  animation: settle calc(var(--animation-duration) * 2) ease-out both;
}

/* Slightly larger than the button's label. Wide enough to fit on two lines so it reads as a tagline,
   but capped so it wraps instead of widening the column and squeezing the preview */
.download__statement {
  max-width: 22em;
  margin-bottom: 3rem;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.35;
  text-wrap: balance;
}

/* A filled version of the desktop app's gradient button, with a blurred copy of the gradient glowing
   underneath it. Both sit behind the label, the glow below the fill */
.download__button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 1em 1.5em;
  color: var(--text-primary);
  font-size: 1.625rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  /* Grows and shrinks smoothly on hover */
  transition: transform var(--animation-duration) ease-in-out;
}

.download__button::before,
.download__button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.5em;
  background: var(--gradient-subtle-diagonal);
}

.download__button::before {
  z-index: -2;
  filter: blur(1.25em);
  opacity: 0.35;
  transition: opacity var(--animation-duration) ease-in-out;
}

.download__button::after {
  z-index: -1;
}

.download__button:hover {
  transform: scale(1.05);
}

.download__button:hover::before {
  opacity: 0.7;
}

/* Painted through the icon as a mask so it takes the label's colour instead of the logo's blue. As tall
   as the label's capital letters, plus a pixel so it doesn't look smaller than them */
.download__icon {
  flex-shrink: 0;
  width: calc(1cap + 1px);
  height: calc(1cap + 1px);
  background: currentColor;
  mask: url("/assets/icons/windows.svg") center / contain no-repeat;
}

.download__notice {
  margin-top: 1.25rem;
  color: var(--text-secondary);
  font-size: 1.2rem;
  font-weight: 300;
}

/* Turned slightly. The first shadow is a faint rim that stands in for the window's border, which was
   cropped off the screenshot, so its edge doesn't get lost against the background */
.download__preview {
  width: var(--preview-width);
  height: auto;
  border-radius: 0.75rem;
  filter:
    drop-shadow(0 0 0.0625rem rgba(255, 255, 255, 0.3))
    drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.6));
  transform: perspective(200rem) rotateY(-12deg) rotateX(2deg);
  -webkit-user-select: none;
  user-select: none;
  animation: settle calc(var(--animation-duration) * 2) ease-out both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
}

@keyframes settle {
  from {
    opacity: 0;
    transform: perspective(200rem) rotateY(-24deg) rotateX(4deg) translateY(3rem);
  }
}

/* =============
  Small screens
  ============= */

/* Once the window is too narrow to fit the statement, gap and preview side by side, the button and notice
  stack above the preview, which leans back instead of turning, with the space above the statement matching the gap below the
  notice. The preview only shrinks if the window gets narrower than the preview itself, so it isn't cut
  off. Media queries measure em against the browser's default font size rather than the page's, so 98em
   is the 156.3rem (1563px) the row needs, plus a little room */
@media (max-width: 98em) {
  .download {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 5rem;
    padding-inline: var(--page-padding);
    text-align: center;
  }

  .download__content {
    top: 0;
  }

  .download__preview {
    max-width: 100%;
    transform: perspective(200rem) rotateX(8deg);
  }

  @keyframes settle {
    from {
      opacity: 0;
      transform: perspective(200rem) rotateX(14deg) translateY(3rem);
    }
  }
}

/* ============
  Accessibility
  ============ */

@media (prefers-reduced-motion: reduce) {
  .download__content,
  .download__preview {
    animation: none;
  }
}