/**
 * @license
 * Copyright 2025 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

:root {
  --default-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --default-font-family-mono: "Courier New", Courier, monospace;
}

/** Colors */
:root {
  --n-100: #ffffff;
  --n-99: #fcfcfc;
  --n-98: #f9f9f9;
  --n-95: #f1f1f1;
  --n-90: #e2e2e2;
  --n-80: #c6c6c6;
  --n-70: #ababab;
  --n-60: #919191;
  --n-50: #777777;
  --n-40: #5e5e5e;
  --n-35: #525252;
  --n-30: #474747;
  --n-25: #3b3b3b;
  --n-20: #303030;
  --n-15: #262626;
  --n-10: #1b1b1b;
  --n-5: #111111;
  --n-0: #000000;

  --p-100: #ffffff;
  --p-99: #fffbff;
  --p-98: #fcf8ff;
  --p-95: #f2efff;
  --p-90: #e1e0ff;
  --p-80: #c0c1ff;
  --p-70: #a0a3ff;
  --p-60: #8487ea;
  --p-50: #6a6dcd;
  --p-40: #5154b3;
  --p-35: #4447a6;
  --p-30: #383b99;
  --p-25: #2c2e8d;
  --p-20: #202182;
  --p-15: #131178;
  --p-10: #06006c;
  --p-5: #03004d;
  --p-0: #000000;

  --s-100: #ffffff;
  --s-99: #fffbff;
  --s-98: #fcf8ff;
  --s-95: #f2efff;
  --s-90: #e2e0f9;
  --s-80: #c6c4dd;
  --s-70: #aaa9c1;
  --s-60: #8f8fa5;
  --s-50: #75758b;
  --s-40: #5d5c72;
  --s-35: #515165;
  --s-30: #454559;
  --s-25: #393a4d;
  --s-20: #2e2f42;
  --s-15: #242437;
  --s-10: #191a2c;
  --s-5: #0f0f21;
  --s-0: #000000;

  --t-100: #ffffff;
  --t-99: #fffbff;
  --t-98: #fff8f9;
  --t-95: #ffecf4;
  --t-90: #ffd8ec;
  --t-80: #e9b9d3;
  --t-70: #cc9eb8;
  --t-60: #af849d;
  --t-50: #946b83;
  --t-40: #79536a;
  --t-35: #6c475d;
  --t-30: #5f3c51;
  --t-25: #523146;
  --t-20: #46263a;
  --t-15: #3a1b2f;
  --t-10: #2e1125;
  --t-5: #22071a;
  --t-0: #000000;

  --nv-100: #ffffff;
  --nv-99: #fffbff;
  --nv-98: #fcf8ff;
  --nv-95: #f2effa;
  --nv-90: #e4e1ec;
  --nv-80: #c8c5d0;
  --nv-70: #acaab4;
  --nv-60: #918f9a;
  --nv-50: #777680;
  --nv-40: #5e5d67;
  --nv-35: #52515b;
  --nv-30: #46464f;
  --nv-25: #3b3b43;
  --nv-20: #303038;
  --nv-15: #25252d;
  --nv-10: #1b1b23;
  --nv-5: #101018;
  --nv-0: #000000;

  --e-100: #ffffff;
  --e-99: #fffbff;
  --e-98: #fff8f7;
  --e-95: #ffedea;
  --e-90: #ffdad6;
  --e-80: #ffb4ab;
  --e-70: #ff897d;
  --e-60: #ff5449;
  --e-50: #de3730;
  --e-40: #ba1a1a;
  --e-35: #a80710;
  --e-30: #93000a;
  --e-25: #7e0007;
  --e-20: #690005;
  --e-15: #540003;
  --e-10: #410002;
  --e-5: #2d0001;
  --e-0: #000000;
}

/** Utilities */

.sans {
  font-family: var(--bb-font-family, var(--default-font-family));
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-variation-settings: "GRAD" 0;
}

.sans-flex {
  font-family: var(--bb-font-family-flex, var(--default-font-family));
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 400;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0;
}

.round {
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "ROND" 100;
}

.code {
  font-family: var(--bb-font-family-mono, var(--default-font-family));
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/** Text **/

.md-display-large {
  font-size: 57px;
  line-height: 64px;
}

.md-display-medium {
  font-size: 45px;
  line-height: 52px;
}

.md-display-small {
  font-size: 36px;
  line-height: 44px;
}

.md-headline-large {
  font-size: 32px;
  line-height: 40px;
}

.md-headline-medium {
  font-size: 28px;
  line-height: 36px;
}

.md-headline-small {
  font-size: 24px;
  line-height: 32px;
}

.md-title-large {
  font-size: 22px;
  line-height: 28px;
}

.md-title-medium {
  font-size: 16px;
  line-height: 24px;
}

.md-title-small {
  font-size: 14px;
  line-height: 20px;
}

.md-body-large {
  font-size: 16px;
  line-height: 24px;
}

.md-body-medium {
  font-size: 14px;
  line-height: 20px;
}

.md-body-small {
  font-size: 12px;
  line-height: 16px;
}

.md-label-large {
  font-size: 14px;
  line-height: 20px;
}

.md-label-medium {
  font-size: 12px;
  line-height: 16px;
}

.md-label-small {
  font-size: 11px;
  line-height: 16px;
}

/** Weights **/

.w-700 {
  font-weight: 700;
}

.w-500 {
  font-weight: 500;
}

.w-400 {
  font-weight: 400;
}

/** Elements */

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  min-width: 360px;
  overflow: auto;
}

nav {
  position: relative;
  z-index: 2;
  background: var(--n-100);

  & header {
    height: 60px;
    border-bottom: 1px solid var(--n-90);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--bb-grid-size-4);

    & div {
      display: flex;
      align-items: center;

      & h1 {
        margin: 0;
        padding: 0;
      }
    }

    & #sign-in-header {
      line-height: var(--bb-grid-size-10);
      border-radius: var(--bb-grid-size-16);
      background: var(--n-100);
      border: 1px solid var(--n-70);
      color: var(--n-0);
      padding: 0 var(--bb-grid-size-4);
      text-decoration: none;
    }

    #experiment {
      display: none;
      margin-left: var(--bb-grid-size-2);
      font-size: 11px;
      line-height: 1;
      padding: var(--bb-grid-size) var(--bb-grid-size-3);
      border-radius: var(--bb-grid-size-16);
      border: 1px solid var(--n-0);
      text-transform: uppercase;

      &.visible {
        display: block;
      }
    }
  }
}

main {
  & header {
    & #headline {
      display: flex;
      align-items: center;
      flex-direction: column;

      & h1 {
        padding: var(--bb-grid-size-8) 0;
        text-align: center;
        font-size: 36px;
        margin: 0 auto;
        width: 85svw;
        max-width: 1280px;
        position: relative;
        z-index: 1;
        animation: fadeIn 2s cubic-bezier(0.4, 0, 0.3, 1) 0.4s 1 backwards;
      }

      & #sign-in {
        line-height: var(--bb-grid-size-10);
        border-radius: var(--bb-grid-size-16);
        background: var(--n-0);
        color: var(--n-100);
        padding: 0 var(--bb-grid-size-4);
        text-decoration: none;
        margin-bottom: var(--bb-grid-size-6);
        animation: fadeIn 2s cubic-bezier(0.4, 0, 0.3, 1) 0.8s 1 backwards;
        z-index: 3;
      }
    }

    & #img {
      width: calc(100svw - var(--bb-grid-size-16));
      margin: 0 auto;
      aspect-ratio: 7/5;
      position: relative;

      &::after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #d4daff;
        border-radius: 32px;
        animation: fadeIn 1.3s cubic-bezier(0.4, 0, 0.3, 1) 0.7s 1 backwards;
      }

      & #img-contents {
        width: 151%;
        height: 110%;
        position: absolute;
        right: 0;
        bottom: 18px;
        border-radius: 32px;

        & #landing-img {
          background-size: contain;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  & #build {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px auto;
    width: calc(100svw - var(--bb-grid-size-16));
    max-width: 1080px;

    & h1 {
      margin: 0 0 60px 0;
      font-size: 24px;
    }

    & #video-container {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      outline: 12px solid var(--n-98);
      border-radius: 16px;
      background: var(--n-0);
      color: var(--n-100);
      aspect-ratio: 16/9;
    }
  }
}

.error-dialog {
  border-radius: 16px;
  box-shadow: 0px 2px 6dvb 0px rgba(0, 0, 0, 0.2);
  border: none;
  padding: 24px;
  max-width: 475px;

  &::backdrop {
    backdrop-filter: blur(5px);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .title {
      margin: 0;
    }
    .screenshot-container {
      display: flex;
      justify-content: center;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
      padding: 12px;
      border-radius: 8px;
      margin: 12px 0 24px 0;
    }
    .sign-in {
      display: inline-flex;
      align-items: center;
      height: var(--bb-grid-size-10);
      border-radius: var(--bb-grid-size-16);
      background: var(--n-0);
      color: var(--n-100);
      padding: 0 var(--bb-grid-size-4);
      text-decoration: none;
    }
  }

  &#shared-flow-dialog,
  &#scopes-error-dialog {
    min-height: 200px;

    .screenshot-container {
      display: flex;
      justify-content: center;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
      padding: 12px;
      border-radius: 8px;
      margin: 12px 0 24px 0;
    }

    .sign-in {
      display: inline-flex;
      align-items: center;
      height: var(--bb-grid-size-10);
      border-radius: var(--bb-grid-size-16);
      background: var(--n-0);
      color: var(--n-100);
      padding: 0 var(--bb-grid-size-10);
      text-decoration: none;
    }
  }

  &#shared-flow-dialog {
    max-width: 360px;

    & p {
      margin: var(--bb-grid-size-6) 0;
    }
  }
}

#discord {
  display: inline-flex;
  align-items: center;

  &::after {
    content: "";
    display: inline-block;
    margin-left: 32px;
    width: 20px;
    height: 20px;
    background: url(/styles/landing/images/third_party/discord-logo.svg) center
      center / contain no-repeat;
  }
}

footer {
  background: #f7f8ff;
  padding: 0 var(--bb-grid-size-6) var(--bb-grid-size-8) var(--bb-grid-size-6);

  & section {
    padding: var(--bb-grid-size-8) 0;
    border-bottom: 1px solid var(--n-0);

    h1 {
      margin: var(--bb-grid-size-2) 0 var(--bb-grid-size-7) 0;
    }

    & a {
      text-decoration: none;
      color: var(--n-0);
    }

    &:last-of-type {
      border-bottom: none;
    }

    menu {
      list-style: none;
      padding: 0;
      margin: 0;

      & li {
        margin-bottom: var(--bb-grid-size-6);
      }
    }
  }
}

@media (min-width: 575px) {
  main header #headline h1 {
    padding: var(--bb-grid-size-10) 0;
    font-size: 48px;
  }
}

@media (min-width: 800px) {
  footer {
    padding: 0 var(--bb-grid-size-8) var(--bb-grid-size-12)
      var(--bb-grid-size-8);

    & section {
      padding: var(--bb-grid-size-10) 0;
    }

    & #links {
      display: flex;
      flex-direction: row;
      align-items: center;

      & h1 {
        margin: 0;
        padding: 0 var(--bb-grid-size-6) 0 0;
      }

      & menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;

        & li {
          margin: 0;
          padding: 0 var(--bb-grid-size-6);
        }

        & li:last-of-type {
          flex: 1;
          display: flex;
          flex-direction: row;
          padding: 0;

          &::before {
            content: "";
            flex: 1;
          }
        }
      }
    }
  }
}

@media (min-width: 860px) {
  main {
    & header {
      display: grid;
      gap: 32px;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
      width: calc(100svw - var(--bb-grid-size-16));
      max-width: 1280px;
      margin: 0 auto;
      padding-top: var(--bb-grid-size-10);

      & #headline {
        align-items: start;

        & h1 {
          text-align: left;
          padding: var(--bb-grid-size-10) 0;
          font-size: 36px;
          width: 100%;
        }
      }

      & #img {
        width: 100%;
        margin: auto;
      }
    }

    & #build {
      margin: 90px auto;
      width: calc(100svw - var(--bb-grid-size-16) - var(--bb-grid-size-16));

      & h1 {
        margin: 0 0 90px 0;
        font-size: 28px;
      }

      & #video-container {
        width: 100%;
        outline: 24px solid var(--n-98);
        border-radius: 24px;
        background: var(--n-0);
        aspect-ratio: 16/9;

        & iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

@media (min-width: 920px) {
  main header #headline h1 {
    font-size: 44px;
  }
}

@media (min-width: 1080px) {
  main {
    & header {
      padding-top: var(--bb-grid-size-12);

      & #headline h1 {
        font-size: 56px;
      }
    }

    & #build {
      margin: 100px auto;

      & h1 {
        margin: 0 0 100px 0;
        font-size: 32px;
      }

      & #video-container {
        width: 100%;
        outline: 32px solid var(--n-98);
        border-radius: 16px;
        background: var(--n-0);
        aspect-ratio: 16/9;
      }
    }
  }

  footer {
    padding: var(--bb-grid-size-16) var(--bb-grid-size-16)
      var(--bb-grid-size-16) var(--bb-grid-size-12);

    & section {
      padding: var(--bb-grid-size-11) 0;
    }
  }
}

@media (min-width: 1280px) {
  main {
    & header {
      padding-top: var(--bb-grid-size-14);
      & #headline h1 {
        font-size: 68px;
      }
    }

    & #build {
      margin: 110px auto;

      & h1 {
        margin: 0 0 110px 0;
        font-size: 36px;
      }

      & #video-container {
        width: 100%;
        outline: 45px solid var(--n-98);
        border-radius: 16px;
        background: var(--n-0);
        aspect-ratio: 16/9;
      }
    }
  }

  footer {
    padding: 72px 72px 72px 60px;

    & section {
      padding: var(--bb-grid-size-9) 0;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}