@use "../custom" as *;

.sss {
  background-color: $purple;
  padding: 9.0625rem 0 7.875rem;
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh + 2rem);
  display: flex;
  align-items: center;
  &:hover .sss__img {
    &::before,
    &::after {
      opacity: 1;
    }

    &::before {
      top:45%;
      left: 0%;
    }

    &::after {
      top: 50%;
      right: -50%;
    }
  }

  &__content {
    position: relative;
    z-index: 2;
  }

  &::before {
    content: "";
    width: 100%;
    height: 23rem;
    top: 50%;
    transform: translateY(-50%);
    background: no-repeat url("../icons/white-wave-lg.svg");
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    z-index: 1;
    pointer-events: none;
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    min-width: 98.75rem;
    width: 98.75rem;
    height: 98.75rem;
    border-radius: 100vh;
    background-color: #7233d1;
    top: 50%;
    right: -25%;
    transform: translateY(-50%);
    z-index: 0;
  }

  &__headline,
  &__description {
    position: relative;
    z-index: 1;
    max-width: 49.5rem;
    @include media-breakpoint-down(lg) {
      text-align: center;
    }
  }

  &__headline {
    color: $white;
    font-size: clamp(1.875rem, 3vw, 36px);
    font-weight: 700;
    font-family: $roobert;
    display: block;
    margin-bottom: 0.4375rem;
  }

  &__description {
    color: $white;
    font-size: 1rem;
    font-weight: 400;
    font-family: $roobert;
    margin: 0;
  }

  &__wrapper {
    max-width: 49.5rem;
    width: 100%;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
    .accordion {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      &-item {
        border-radius: 0.375rem;
        overflow: hidden;
        backdrop-filter: blur(2.5rem);
        background: rgba($white, 0.15);
        border: none;
      }

      &-button {
        background-color: transparent;
        border: none !important;
        box-shadow: none;
        font-family: $roobert;
        font-weight: 400;
        color: $white;
        font-size: 1.125rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 !important;
        &::after {
          margin: 0;
          width: 0.875rem;
          height: 0.875rem;
          background-position: center;
        }
      }

      &-header {
        border: none !important;
        padding: 1.125rem 1.25rem !important;
      }

      &-body {
        color: rgba($white, 0.7);
        font-family: $roobert;
        font-weight: 400;
        font-size: 1rem;
        padding: 0 1.25rem 1.875rem 1.25rem;
      }
    }
  }

  &__img {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 46.875rem;
    pointer-events: none;
    z-index: 0;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background-size: contain;
      opacity: 0;
      transition: all ease-in 500ms;
    }

    &::before {
      left: 50%;
      width: 18.125rem;
      height: 24.75rem;
      background: no-repeat url("../images/sss-left.webp");
    }

    &::after {
      right: 50%;
      width: 9.5rem;
      height: 14.8125rem;
      background: no-repeat url("../images/sss-right.webp");
    }

    @include media-breakpoint-down(md) {
      top: 63%;
      right: 100%;
    }

    .loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      width: 764px;
      height: 826px;
      object-fit: contain;
      animation: loading-rotate 20s infinite linear;
    }

    .character {
      position: relative;
      z-index: 2;
      transform: translate(0px, -20px) rotate(0deg);
      animation: sss-chracter 2.5s linear infinite alternate-reverse;
      @include media-breakpoint-down(lg) {
        display: none;
      }
    }
  }
}