@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

.intro {
  @include flexCenter(space-between);
  @include bg-image("../../../assets/images/intro_bg.png");

  overflow: hidden;
  flex-direction: column;
  padding: 10rem 2.4rem 6rem;
  position: relative;
  height: 100dvh;

  @include media("lg") {
    @include bg-image("../../../assets/images/intro_bg_mo.png");

    padding: 5.4rem 1.6rem 4rem;
  }

  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: 0.8;
    width: 100%;
    height: 55.4rem;
    background: linear-gradient(
      to bottom,
      rgba(#000, 0) 45%,
      rgba(#000, 1) 100%
    );
    pointer-events: none;

    @include media("lg") {
      height: 26.1rem;
    }
  }

  &__title {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;

    h1 {
      @include typography("h2");

      display: inline-block;
      padding: 0.8rem 3rem;
      border-radius: 10rem;
      background-color: rgba(#3ceead, 0.16);
      color: #3ef5b3;
      font-weight: 700;

      @include media("lg") {
        padding: 0.6rem 2.4rem;
      }
    }

    &-sub {
      position: relative;
      margin-top: 2.4rem;
      font-size: clamp(50px, 8vw, 11.8rem);
      line-height: 1.2;
      color: #fff;
      font-family: "MODERNIZ", sans-serif;

      @include media("lg") {
        margin-top: 1.6rem;
        font-size: 5rem;
        line-height: 6rem;
      }
    }

    &-icon {
      @include bg-image("../../../assets/images/intro_btc_logo.svg");

      position: absolute;
      top: 3.75rem;
      left: 50%;
      translate: -50% 0;
      width: 10.8rem;
      height: 10.8rem;

      @include media("lg") {
        top: 2.4rem;
        width: 6.2rem;
        height: 6.2rem;
      }
    }
  }

  &__link {
    position: relative;
    z-index: 2;
    text-align: center;

    button {
      @include typography("h3");

      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 0 2.8rem;
      min-width: 35.8rem;
      height: 6.2rem;
      border-radius: 0.8rem;
      background: linear-gradient(
        to right,
        #40fab6 0%,
        #25b782 48%,
        #41fcbb 100%
      );
      color: #fff;
      font-weight: 700;

      @include media("lg") {
        @include typography("h2");

        min-width: 28rem;
        height: 4.8rem;
      }

      &::before {
        content: "";
        position: absolute;
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: #b5ffe4;
        animation: shiny-btn 3s ease-in-out infinite;
      }
    }
  }
  &__thumbs {
    @include flexCenter(space-between);

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    max-width: 131rem;

    @include media("lg") {
      justify-content: center;
    }

    &-item {
      &--up,
      &--down {
        width: 46rem;
        translate: 0 6rem;

        @include media("lg") {
          position: absolute;
          translate: 0 0;
        }

        @include media("md") {
          top: 0;
        }
      }

      &--up {
        @include media("lg") {
          left: 0;
          translate: 0 -1.5rem;
          width: 36rem;
        }

        @include media("md") {
          width: 19.8rem;
        }
      }

      &--down {
        @include media("lg") {
          right: 0;
          translate: 0 1.1rem;
          width: 24rem;
        }

        @include media("md") {
          width: 15.4rem;
        }
      }

      &--char {
        display: flex;
        align-items: flex-end;
        position: relative;
        z-index: 1;
        
        @include media("md") {
          height: 39.3rem;
        }
      }

      picture {
        display: block;
      }

      img {
        @include img-fit();
      }
    }
  }

  @keyframes shiny-btn {
    0% {
      scale: 0;
      rotate: (45deg);
      opacity: 0;
    }

    80% {
      scale: 0;
      rotate: (45deg);
      opacity: 0.5;
    }

    81% {
      scale: 4;
      rotate: (45deg);
      opacity: 1;
    }

    100% {
      scale: 50;
      rotate: (45deg);
      opacity: 0;
    }
  }
}