@import "~styles/themes/colors";
@import "~styles/themes/typography";
@import "~styles/themes/elements";
@import "~@czi-sds/components/dist/variables";

.hero {
  font-family: $sds-font-font-family;
  background-color: $sds-color-gray-black;
  background: url("../../../../../images/landing_page/idseq-hero.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 85%;
  padding-top: 52px;
  padding-left: 3rem;
  padding-right: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  @media (min-width: 769px) {
    height: 607px;
  }

  @media (max-width: 768px) {
    text-align: left;
    padding: 48px 0 0 0;
    background: $sds-color-gray-black;
  }

  @media (max-width: 526px) {
    align-items: flex-start;
  }

  @media (max-width: 450px) {
    background-size: contain;
    background-position: center 102%;
  }

  h1 {
    color: $sds-color-gray-white;
    font-weight: $font-weight-semibold;
    margin: 0;
    @include font-header-marketing-xl;
    white-space: nowrap;
    transition: all 0.4s;
    padding-left: $sds-spaces-xl;
    padding-right: $sds-spaces-xl;

    @media (min-width: 769px) {
      padding-left: unset;
      padding-right: unset;
    }

    span {
      transition: opacity 0.4s;
      display: inline-block;
      text-align: left;
      position: relative;

      @media (min-width: 769px) {
        min-width: 220px;
      }

      &:not(.longUnderline) {
        &::after {
          content: "";
          background: url("../../../../../images/landing_page/hero-text-underline.svg");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: bottom left;
          width: 90px;
          height: $sds-spaces-m;
          position: absolute;
          bottom: -4px;
          left: 0;

          @media (max-width: 905px) {
            width: 65px;
          }

          @media (max-width: 768px) {
            width: 56px;
          }

          @media (max-width: 397px) {
            width: 48px;
          }
        }
      }

      &.longUnderline {
        &::after {
          content: "";
          background: url("../../../../../images/landing_page/hero-text-underline-long.svg");
          height: $sds-icon-sizes-s-height;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: bottom left;
          width: 220px;
          position: absolute;
          bottom: -6px;
          left: 0;

          @media (max-width: 905px) {
            width: 165px;
          }

          @media (max-width: 768px) {
            width: 132px;
          }

          @media (max-width: 397px) {
            width: 113px;
          }
        }
      }
    }

    @media (max-width: 905px) {
      @include font-header-marketing-l;
    }

    @media (max-width: 768px) {
      @include font-header-xxl;
      line-height: 44px;
    }

    @media (max-width: 526px) {
      transform: translateX(0px) !important;
    }

    @media (max-width: 397px) {
      @include font-header-xl;
    }

    @media (max-width: 341px) {
      font-size: 20px;
    }
  }

  p {
    color: $sds-color-gray-white;
    margin-top: 40px;
    margin-bottom: $sds-spaces-xs;
    @include font-body-m;

    @media (max-width: 768px) {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0.3px;
      margin-bottom: 26px;
    }

    &.hero__copy {
      margin-bottom: 32px;
      margin-top: 24px;

      @media (max-width: 768px) {
        padding-left: $sds-spaces-xl;
        padding-right: $sds-spaces-xl;
      }
    }
  }

  .finePrint {
    color: $sds-color-gray-white;
    margin-top: $sds-spaces-m;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.3px;

    a {
      border-bottom: 1px dashed $sds-color-gray-white;
    }

    @media (max-width: 768px) {
      margin-top: 16px;
      font-size: 13px;
      line-height: 20px;
      padding-left: $sds-spaces-xl;
      padding-right: $sds-spaces-xl;
      text-align: left;
    }
  }

  &__emailFormContainer {
    width: 100%;
    display: flex;
    justify-content: center;

    @media (max-width: 768px) {
      padding-left: $sds-spaces-xl;
      padding-right: $sds-spaces-xl;
    }
  }
}

.heroLineBreak {
  display: none;

  @media (max-width: 768px) {
    display: inline;
  }
}

// Animations for rotating hero text

.fade {
  opacity: 0;
}

.moveUp {
  @media (min-width: 769px) {
    animation: moveUp 0.4s ease forwards;
  }
}

@keyframes moveUp {
  from {
    transform: translateY(30px);
  }

  to {
    transform: translateY(0px);
  }
}

.heroStatsContainer {
  display: flex;
  padding-top: 40px;
  padding-bottom: 64px;
  align-self: center;
  padding-left: $sds-spaces-xl;
  padding-right: $sds-spaces-xl;

  @media (min-width: 769px) {
    padding-top: 60px;
    padding-left: unset;
    padding-right: unset;
  }
}

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

  span {
    text-transform: uppercase;
    color: $sds-color-gray-white;
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 1px;

    @media (min-width: 769px) {
      font-size: 12px;
      line-height: 18px;
    }
  }

  p {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 120%;
    margin-top: 5px;
    margin-bottom: 0;

    @media (min-width: 769px) {
      font-size: 36px;
      margin-top: $sds-spaces-s;
    }
  }
}

.heroStatsContainerItem:first-child {
  padding-right: 27px;

  @media (min-width: 769px) {
    padding-right: 86px;
  }

  p {
    color: $blue;
  }
}

.heroStatsContainerItem:nth-child(2) {
  border-left: 1px solid $white;
  border-right: 1px solid $white;
  padding-left: 33px;
  padding-right: 33px;

  @media (min-width: 769px) {
    border-left: 1px solid $gray-medium;
    border-right: 1px solid $gray-medium;
    padding-left: 68px;
    padding-right: 68px;
  }

  p {
    color: $bluegreen;
  }
}

.heroStatsContainerItem:last-child {
  padding-left: 27px;

  @media (min-width: 769px) {
    padding-left: 60px;
  }

  p {
    color: $green;
  }
}

.hero__mobileBg {
  width: 100%;

  @media (min-width: 769px) {
    display: none;
  }
}
