@use '../utils' as *;

/*----------------------------------------*/
/*  banner css
/*----------------------------------------*/
.banner-style-five {
  padding-top: 65px;
  padding-bottom: 100px;
  .banner-five-main {
    display: grid;
    gap: 50px;
    text-align: center;
  }
  .banner-content {
    max-width: 920px;
    margin: 0 auto;
    @media #{$xl} {
      max-width: 850px;
    }
    @media #{$lg,$md} {
      max-width: 600px;
    }
    @media #{$xs} {
      max-width: 480px;
    }
    .banner-title {
      color: var(--td-white);
      margin-bottom: 30px;
      font-size: 70px;
      line-height: 108.7%;
      font-weight: 500;
      @media #{$x3l} {
        font-size: 60px;
      }
      @media #{$xxl} {
        font-size: 50px;
      }
      @media #{$xl} {
        font-size: 48px;
      }
      @media #{$lg} {
        font-size: 40px;
      }
      @media #{$md} {
        font-size: 36px;
      }
      @media #{$sm} {
        font-size: 34px;
      }
      @media #{$sm} {
        font-size: 32px;
      }
      @media #{$xs} {
        font-size: 26px;
      }
      @media #{$xxs} {
        font-size: 24px;
      }
      .highlight {
        color: var(--td-secondary);
        font-weight: 600;
      }
    }
    .description {
      color: var(--td-white);
      max-width: 648px;
      line-height: 1.5;
      margin: 0 auto;
      font-size: 20px;
      margin-bottom: 20px;
      @media #{$xs,$sm,$md} {
        font-size: 16px;
      }
    }
    .btn-wrap {
      justify-content: center;
    }
  }
  .banner-thumb-wrapper {
    position: relative;
    max-width: 1195px;
    margin: 0 auto;
    .crypto-coin-one {
      position: absolute;
      top: 28px;
      inset-inline-start: -93px;
      filter: drop-shadow(0px 10px 24px rgba(255, 205, 16, 0.25));
      z-index: 2;
      @media #{$sm,$md,$lg} {
        width: 120px;
        inset-inline-start: -15px;    
      }
      @media #{$xs} {
        width: 60px;
        inset-inline-start: -10px; 
      }
    }
    .crypto-coin-two {
      position: absolute;
      inset-inline-end: -85px;
      bottom: 10px;
      filter: drop-shadow(0px 10px 34px rgba(0, 0, 0, 0.25));
      z-index: 2;
      @media #{$sm,$md,$lg} {
        width: 120px;
        inset-inline-end: -10px;
      }
      @media #{$xs} {
        width: 80px;
        inset-inline-end: -20px;
      }
    }
    .circle-pattern {
      position: absolute;
      inset-inline-start: 50%;
      transform: translateX(-50%);
      bottom: 100%;
      width: max-content;
      z-index: -1;
    }
    .paly-video {
      width: 72px;
      height: 72px;
      background: rgba(255, 255, 255, 0.34);
      border: 1px solid rgba($white, $alpha: 0.7);
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      inset-inline-start: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      &::before {
        position: absolute;
        content: "";
        height: 110px;
        width: 110px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        border: 1px solid var(--td-white);
        @include border-radius(50%);
        animation: video-border 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
        transform: scale(1);
        transition: all 0.3s;
        @media #{$xs,$sm} {
          height: 90px;
          width: 90px;
        }
      }
    }
  }
  .banner-thumb {
    position: relative;
    z-index: 1;
    &::before {
      position: absolute;
      content: "";
      height: 100%;
      width: 100%;
      background-color: var(--td-black);
      opacity: 20%;
      top: 0;
      inset-inline-start: 0;
      border-radius: 20px;
    }
    img {
      border-radius: 20px;
      border: 2px solid rgba($white, $alpha: 0.7);
      width: 100%;
    }
  }
}
.crypto-coins {
  .coin-one {
    position: absolute;
    top: 9%;
    inset-inline-start: 7%;
    filter: blur(2px) drop-shadow(0px 4px 144px #FFD85A);
    z-index: -1;
    @media #{$xs} {
      display: none;
    }
  }
  .coin-two {
    position: absolute;
    top: 30%;
    inset-inline-end: 8%;
    filter: blur(2px) drop-shadow(0px 4px 144px #FFD85A);
    z-index: -1;
    @media #{$xs} {
      display: none;
    }
  }
}
.banner-glows {
  .glow-one {
    position: absolute;
    width: 716px;
    height: 716px;
    top: -67px;
    background: #64148A;
    filter: blur(430px);
    inset-inline-start: -180px;
    z-index: -1;
    @media #{$md,$lg,$xl,$xxl} {
      width: 400px;
      height: 400px;
    } 
    @media #{$xs,$sm} {
      width: 316px;
      height: 316px;
    } 
  }
  .glow-two {
    position: absolute;
    width: 716px;
    height: 716px;
    top: 683px;
    background: #5AFFE1;
    filter: blur(430px);
    inset-inline-end: -218px;
    z-index: -1;
    @media #{$md,$lg,$xl,$xxl} {
      width: 400px;
      height: 400px;
    } 
    @media #{$xs,$sm} {
      width: 316px;
      height: 316px;
    } 
  }
}
.background-blur {
  background: linear-gradient(181deg, rgba(255, 255, 255, 0) -0.11%, rgba($white, $alpha: 0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text; /* Standard property */
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent; /* Standard property */
  opacity: 0.2;
  line-height: 1;
  text-align: center;
  position: relative; /* Needed for pseudo-element */
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    background: inherit; /* Inherit the gradient background */
    filter: blur(10px); /* Apply the blur effect */
    z-index: -1; /* Place behind the text */
  }
}
