@import '../../components/sliders/products-slider.css';
@import '../../components/sliders/team-slider.css';
@import '../../components/cards/card-sponsor.css';
@import '../../components/sliders/sponsors-slider.css';

#header {
  width: 100%;
  height: 100vh;
  position: relative;
  #header-slides {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    #header-bgs {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      overflow: clip;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background: linear-gradient(182.35deg, rgba(0, 0, 0, 0) 41.19%, #000000 98.03%);
      }
      #header-bgs-items {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        transition: transform 2s var(--in-out);
        transform: translateY(calc(-100% * (var(--current) / (var(--len)))));
      }
      .item {
        width: 100%;
        height: 100vh;
        z-index: 0;
        display: flex;
        overflow: clip;
        img, video, iframe {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          transform: scale(1.1);
          transition: transform 1s var(--curve);
        }
        iframe {
          transform: scale(1.5);
        }
        &:not(.active) {
          img, video, iframe {
            transform: scale(1);
          }
          iframe {
            transform: scale(1.2);
          }
        }
      }
    }
    #header-contents {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      .item {
        width: 100%;
        height: 100%;
        position: absolute;
        padding-bottom: 68rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        .slide-title {
          display: block;
          margin-bottom: 30rem;
          .word {
            display: inline-block;
            overflow-y: clip;
            .text {
              display: inline-block;
              transition: transform 1s var(--in-out);
            }
            &:not(:first-child):not(.first-of-line) {
              margin-left: 0.25em;
            }
            &:not(.thunder) {
            }
          }
          .thunder {
            vertical-align: middle;
            position: relative;
            margin-left: 0 !important;
            & + .word {
              margin-left: 0 !important;
            }
          }
          svg {
            width: auto;
            height: 1.5em;
            fill: none;
          }
          &.has-thunder {
            margin-bottom: 10rem;
          }
        }
        .slide-description {
          width: 100%;
          max-width: 384rem;
          margin: 0;
          margin-bottom: 32rem;
          .line {
            overflow-y: clip;
            .text {
              transition: transform 1s var(--in-out) calc(var(--i) * 0.05s);
            }
          }
        }
        .slide-button {
          transition: transform 1s var(--in-out);
        }
        &:not(.active) {
          &, * {
            pointer-events: none;
          }
          .slide-button {
            transform: scale(0);
          }
          .slide-title, .slide-description {
            .text {
              transform: translateY(110%);
            }
            .thunder {
              .text {
                transform: translateY(100%) scale(0.2);
              }
            }
          }
        }
        &.active {
          .slide-title, .slide-description {
            .text {
              transition-delay: 0.6s;
            }
          }
          .slide-button {
            transition-delay: 1s;
          }
        }
      }
    }
  }
  #header-dots {
    position: absolute;
    right: var(--margin);
    top: 50%;
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    transform: translateY(-50%);
    .dot {
      width: 10rem;
      height: 10rem;
      border-radius: 50%;
      background: currentColor;
      cursor: pointer;
      transition: opacity 1s var(--curve), transform 1s var(--curve);
      &:not(.active) {
        opacity: 0.16;
      }
      &:not(.active):hover {
        transform: scale(1.4);
      }
    }
  }
  @media (max-width: 740px) {
    height: var(--start-vh);
    #header-slides {
      #header-contents {
        .item {
          padding-bottom: 90rem;
          text-align: center;
          .slide-title {
            max-width: 350rem;
            position: relative;
            line-height: 1.05;
            margin-bottom: 15px;
            .thunder {
              position: absolute;
              top: 50%;
              left: 50%;
              z-index: 9;
              transform: translate(-50%, -50%);
              svg {
                height: 1.2em;
              }
            }
            &.has-thunder {
              margin-bottom: 15px;
            }
          }
          .slide-description {
            margin-bottom: 24px;
          }
        }
      }
    }
    #header-dots {
      right: auto;
      left: 50%;
      bottom: 24px;
      top: auto;
      transform: translateX(-50%);
      flex-direction: row;
    }
  }
}
#featured-products {
  margin: 120rem 0;
  #featured-products-title {
    text-align: center;
    margin-bottom: 80rem;
  }
  @media (max-width: 1024px) {
    #featured-products-title {
      font-size: 40px;
      margin-bottom: 40px;
    }
  }
  @media (max-width: 580px) {
    margin: 60px auto;
  }
}

#team {
  margin: 120rem 0;
  #team-title {
    text-align: center;
    max-width: 450rem;
    margin: 0 auto;
    margin-bottom: 80rem;
  }
  @media (max-width: 1024px) {
    #team-title {
      max-width: 320px;
      font-size: 40px;
      margin-bottom: 30px;
    }
  }
  @media (max-width: 580px) {
    margin: 60px auto;
  }
}


#sponsors {
  margin: 56rem auto;
  perspective: 100vw;
  overflow-x: clip;
  #sponsors-title {
    width: calc(100% - var(--margin) * 2);
    text-align: center;
    max-width: 750rem;
    margin: 0 auto;
    margin-bottom: 48rem;
  }
  #sponsors-grid {
    width: calc(100% - var(--margin) * 2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-left: auto;
    margin-right: auto;
    transform:
      rotateX(calc((1 - var(--progress)) * 15deg))
    ;
  }
  .sponsors-slider {
    display: none;
  }
  @media (max-width: 1024px) {
    #sponsors-title {
      font-size: 40px;
      margin-bottom: 30px;
    }
  }
  @media (max-width: 580px) {
    margin: 60px auto;
    #sponsors-grid {
      display: none;
    }
    .sponsors-slider {
      display: block;
    }
  }
}