@use "../mixin";

.Header {
  grid-column: span 12;

  position: relative;

  height: 570px;

  .carousel-container {
    position: relative;

    height: 100%;

    overflow: hidden;
    z-index: 0;

    .single {
      display: grid;
      align-items: center;
      grid-template-columns: 50% 50%;

      position: relative;

      height: 100%;
      width: 100%;

      border-radius: var(--md-sys-shape-corner-large);
      border: 1px solid var(--md-sys-color-outline-variant);

      background-size: cover;

      overflow: hidden;
      z-index: 1;

      h1 {
        @include mixin.typescale-style(
          "display-large",
          $font-size: 72rem,
          $line-height: 78rem,
          $font-variation-settings: "wght" 900
        );

        grid-column: 1 / 2;
        grid-row: 1;

        position: relative;

        margin-inline-start: 48px;

        color: transparent;

        background-clip: text;
        background-position: 0% 0%;
        background-repeat: no-repeat;
        background-size: 100%;

        animation: title-gradient 5s var(--md-sys-motion-spring-slow-effect) infinite alternate-reverse;
        z-index: 2;

        &.overlay {
          color: var(--md-ref-palette-primary20);

          background: none;

          animation: none;
          mix-blend-mode: luminosity;
          z-index: 3;
        }

        @keyframes title-gradient {
          0% {
            background-position: 0% 0%;
            background-size: 100%;
          }

          50% {
            background-position: 100% 0%;
          }

          100% {
            background-position: 100% 100%;
            background-size: 200%;
          }
        }

        @media screen and (max-width: 1200px) {
          @include mixin.typescale-style(
            "display-large",
            $font-size: 72rem,
            $line-height: 78rem,
            $font-variation-settings: "wght" 800
          );

          margin-inline: 36px;
        }

        @media screen and (max-width: 840px) {
          @include mixin.typescale-style(
            "display-large",
            $font-size: 48rem,
            $line-height: 54rem,
            $font-variation-settings: "wght" 900
          );

          grid-column: 1 / 3;

          margin-inline: 24px;
        }
      }

      img {
        grid-column: 1 / 3;
        grid-row: 1;

        height: 100%;
        width: 100%;

        object-fit: cover;
        overflow: hidden;
        pointer-events: none;
        user-select: none;
        -moz-user-select: none;

        &:nth-of-type(1) {
          backdrop-filter: blur(10px);
          filter: url(#noise-filter);
          mask-image: linear-gradient(to right, black 0%, transparent 60%);
          mix-blend-mode: screen;
          z-index: 1;
        }

        &:nth-of-type(2) {
          z-index: 0;
        }

        @media screen and (max-width: 840px) {
          &:nth-of-type(1) {
            mask-image: linear-gradient(to right, black 0%, transparent 100%);
          }
        }
      }
    }

    .stage {
      display: flex;

      position: absolute;
      left: 0px;
      top: 0px;

      height: 100%;
      width: 100%;

      z-index: 1;

      .item {
        flex-shrink: 0;

        position: relative;

        height: 100%;

        background-size: cover;
        background-position: center;
        border-radius: var(--md-sys-shape-corner-medium);

        opacity: 0;
        overflow: hidden;
        transition: var(--carousel-duration) var(--md-sys-motion-spring-slow-effect);

        img {
          height: 100%;
          width: 100%;

          object-fit: cover;
        }

        &.current {
          width: 90%;

          margin-inline-end: 12px;

          border: 1px solid var(--md-sys-color-outline-variant);
          border-radius: var(--md-sys-shape-corner-large);

          opacity: 1;
          z-index: 10;
        }

        &.next {
          width: calc(10% - 12px);

          border: 1px solid var(--md-sys-color-outline-variant);
          border-radius: var(--md-sys-shape-corner-full);

          opacity: 1;
          z-index: 9;
        }

        &.previous {
          width: 0%;

          opacity: 0;
          z-index: 1;
        }

        &.standby {
          width: 0%;

          opacity: 0;
          z-index: 0;
        }

        @media screen and (max-width: 840px) {
          &.current {
            width: 85%;
          }

          &.next {
            width: calc(15% - 12px);
          }
        }

        @media screen and (max-width: 600px) {
          &.current {
            width: 100%;

            border-radius: var(--md-sys-shape-corner-large);
          }

          &.next {
            width: 0%;

            border-radius: var(--md-sys-shape-corner-large);
          }
        }
      }
    }

    .progress-ring {
      position: absolute;
      left: 8px;
      top: 8px;

      pointer-events: none;
      z-index: 2;

      svg {
        transform: rotate(-90deg);

        circle {
          transform-origin: center;
        }
      }
    }

    .controls {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;

      position: absolute;
      left: 0px;
      top: 0px;

      height: 100%;
      width: 100%;

      cursor: pointer;
      z-index: 3;

      .prev,
      .next {
        height: 100%;
        width: 50%;
      }
    }

    .indicators {
      display: flex;
      gap: 6px;

      position: absolute;
      bottom: 24px;
      left: 50%;

      transform: translateX(-50%);

      z-index: 4;

      .dot {
        height: 8px;
        width: 8px;

        padding: 0;

        border-radius: var(--md-sys-shape-corner-full);
        border: none;

        background-color: var(--md-sys-color-tertiary-container);

        cursor: pointer;
        transition: width var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);

        &:hover {
          width: 16px;
        }

        &.active {
          width: 16px;

          background-color: var(--md-sys-color-tertiary);
        }
      }
    }
  }

  @media screen and (max-width: 1600px) {
    grid-column: span 12;
  }

  @media screen and (max-width: 1200px) {
    grid-column: span 8;

    height: 46vw;
    min-height: 270px;
  }

  @media screen and (max-width: 840px) {
    grid-column: span 6;

    min-height: 270px;
  }

  @media screen and (max-width: 600px) {
    grid-column: span 4;
  }
}

.header-enter-active {
  transition:
    opacity var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial)
      var(--md-sys-motion-duration-short1);

  .carousel-container .single {
    h1 {
      transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect);
    }

    img {
      &:nth-of-type(1) {
        transition: 5s var(--md-sys-motion-spring-slow-effect);
      }

      &:nth-of-type(2) {
        transition: var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-default-effect)
          var(--md-sys-motion-spring-fast-effect-duration);
      }
    }
  }
}

.header-leave-active {
  transition:
    opacity var(--md-sys-motion-spring-default-effect-duration) var(--md-sys-motion-spring-default-effect),
    transform var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial);
}

.header-enter-from,
.header-leave-to {
  opacity: 0;
  transform: scale(0.985);

  .carousel-container .single {
    h1 {
      opacity: 0;
      transform: translateX(5%);
    }

    img {
      &:nth-of-type(1) {
        opacity: 0;
        transform: translateX(-25%);
      }

      &:nth-of-type(2) {
        opacity: 0;
        transform: scale(1.005);
      }
    }
  }
}
