@font-face {
  font-family: 'Zum Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/global/fonts/ZumGrotesk-Variable.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'Zum Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/global/fonts/ZumGrotesk-VariableItalic.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/global/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/global/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/global/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Sans Fallback';
  src: local('Arial'), local('Helvetica');
  font-weight: 400;
  size-adjust: 100.7%;
  ascent-override: 99.3%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Sans Fallback';
  src: local('Arial Bold'), local('Helvetica Bold');
  font-weight: 700;
  size-adjust: 95.3%;
  ascent-override: 104.9%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}

:root {
  /* Semantic vars */
  --body-font: 'Zum Grotesk', 'Sans Fallback', sans-serif;
  --mono-font: 'JetBrains Mono', monospace;
}

body {
  margin: 0;
  font-family: var(--body-font);

  main [data-pattern],
  footer[data-pattern] {
    display: none;
  }

  a {
    color: #fff;
  }

  p {
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--mono-font);
    font-weight: 400;
  }

  h2 {
    font-size: 16px;
    text-transform: uppercase;
  }
}

.hero {
  --hero-img-reveal: cubic-bezier(0.42, 0.12, 0.22, 1);

  display: flex;
  justify-content: start;
  align-items: center;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-inline: 6rem;

  .background {
    img {
      position: absolute;
      inset: 0;
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
      opacity: 0;
      filter: blur(100);
      transition: opacity 400ms var(--hero-img-reveal);
    }

    img.is-loaded {
      opacity: 1;
    }
  }

  .foreground {
    position: relative;
    font-size: 20px;
    color: #fff;
    opacity: 0;
    transition: opacity 200ms var(--hero-img-reveal) 800ms;

    picture {
        display: contents;
    }

    .logo-container img {
      display: block;
      margin-bottom: 16px;
    }

    .apps-container {
      margin-bottom: 52px;

      h2 {
        margin: 0 0 16px;
      }
    }
  }

  &:has(.background img.is-loaded) .foreground {
    opacity: 1;
  }

  &:has(img.is-loaded)::after {
    backdrop-filter: blur(0);
  }

  &::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0;
    backdrop-filter: blur(48px);
    transition: backdrop-filter 1600ms var(--hero-img-reveal);
  }
}

.legal-container {
  position: fixed;
  bottom: 0;
  right: 0;
  font-family: var(--mono-font);
  font-size: 14px;
  text-transform: uppercase;

  a {
    text-decoration: none;
  }
}

@media (width >= 900px) {
  .foreground {
    display: grid;
    align-items: end;
    grid-template-columns: repeat(2, 1fr);
    gap: 240px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero img {
    transition: none;
  }

  .hero .foreground {
    opacity: 1;
    transition: none;
  }
}

/* Hide any unfinished main pattern. */
main :is([data-style], [data-script]) {
  display: none;
}

/* Any landmark top most child with unfinished descendant patterns. */
body > * > *:has([data-style], [data-script]) {
  display: none;
}