$t: 2s;
$e1: cubic-bezier(0.8, 0, 0.1, 1);
$e2: cubic-bezier(0.6, 0.04, 0.98, 0.335);
$er: linear;
$color: hsl(250, 96%, 49%);
$slides: 7;
$width:450px;
$images: url("../../../public/img/dummy_image/1.jpg")
  url("../../../public/img/dummy_image/2.jpg")
  url("../../../public/img/dummy_image/3.jpg")
  url("../../../public/img/dummy_image/4.jpg")
  url("../../../public/img/dummy_image/6.jpg")
  url("../../../public/img/dummy_image/7.jpg")
  url("../../../public/img/dummy_image/5.jpg");

header {
  background-color: #09090a;
  height: 100vh;
  flex-direction: row-reverse;
}
.text__container {
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  gap: 10vmax;
  padding: 5vmin;
  @media (max-width: $width) {
    align-items: center;
    justify-content: center;
    // height: 100vh; // Optionally, set the height to 100vh to take up the full viewport height.
  }
  .opensource__title {
    span {
      color: $color;
      font-family: "Mefika", sans-serif;
      font-size: 5vmax;
      animation: rotateHue infinite $t * $slides * 2 linear;
      animation-delay: calc($t / 17);
    }
  }
  .github__section {
    font-family: "Roboto Mono", sans-serif;
    font-size: 3vmin;
    font-weight: 800;
    color: #efe4e4;
    position: relative;
    top: -80px;
    span {
      line-height: 2vmax;
      letter-spacing: 0.5vmax;
    }

    .button {
      text-decoration: none;
      text-transform: uppercase;
      display: inline-block;
      position: relative;
      border: 3px solid white;
      box-shadow: -0.5vmin 0.5vmin 0 rgba(white, 0.5);
      background: transparent;
      margin-top: 5vmin;
      mix-blend-mode: lighten;
      color: white;
      padding: 3vmin 3vmin 2.4vmin 3vmin;
      letter-spacing: 0.2em;
      text-shadow: none;
      line-height: 1;
      transform: translate3d(0.5vmin, -0.5vmin, 0);
      transition: all 100ms linear;
      &:hover {
        transform: translate3d(1vmin, -1vmin, 0);
        box-shadow: -1vmin 1vmin 0 rgba(white, 0.5);
        background: white;
        color: black;
      }
      &:active {
        transform: translate3d(0px, 0px, 0);
        box-shadow: -0px 0px 0 rgba(white, 0.5);
      }
    }
  }
}
.animation__container {
  position: relative;
  flex-basis: 70%;
}

.untitled {
  position: absolute;
  height: 100%;
  width: 100%;
  animation: rotateHue infinite $t * $slides * 2 linear;
  animation-delay: calc($t / 7);
  overflow: hidden;

  &__shutters {
    position: absolute;
    height: 150vmax;
    width: 150vmax;
    left: calc(50% - 75vmax);
    top: calc(50% - 75vmax);
    pointer-events: none;
    z-index: 2;
    animation: rotateFrame $t * 4 $er infinite;

    &:before,
    &:after {
      content: "hellooo";
      position: absolute;
      height: 100%;
      width: 100%;
      left: 50%;
      transform: translate3d(-50%, 0, 0);
      background-color: $color;

      pointer-events: auto;
    }
    &:before {
      bottom: 50%;
      animation: openTop $t * 2 infinite;
    }
    &:after {
      top: 50%;
      animation: openBottom $t * 2 infinite;
    }
  }

  &__slides {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: $color;
  }

  &__slide {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    animation: showHideSlide infinite $t * $slides * 2 steps(1);
    @for $i from 1 through $slides {
      &:nth-child(#{$i}) {
        animation-delay: $t * ($i - 1) * 2;
        object-fit: cover;
        .untitled__slideBg {
          background-image: nth($images, $i);
        }
      }
    }
  }

  &__slideBg {
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: $color;
    background-blend-mode: hard-light;
    opacity: 1;
    z-index: -1;
    animation: bgInOut 4s -4s infinite;
  }
  &__slideContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    color: rgb(248, 252, 252);
    line-height: 1;
    letter-spacing: -0.025em;
    z-index: 2;
    opacity: 1;
    text-shadow: #feea3a 5px 10px 10px;
    span {
      display: block;
      font-size: 12vmin;
      font-family: "Mefika", sans-serif;
    }
  }
}

@keyframes openTop {
  0% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: $e1;
  }
  40% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: $e2;
  }
  70% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: $e2;
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: $e2;
  }
}
@keyframes rotateHue {
  0% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(45deg);
  }
  25% {
    filter: hue-rotate(90deg);
  }
  45% {
    filter: hue-rotate(135deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  70% {
    filter: hue-rotate(225deg);
  }
  75% {
    filter: hue-rotate(270deg);
  }
  95% {
    filter: hue-rotate(315deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes rotateFrame {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes openBottom {
  0% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: $e1;
  }
  40% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: $e2;
  }
  70% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: $e2;
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    animation-timing-function: $e2;
  }
}

@keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  #{ calc(100% / $slides)} {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}

@keyframes bgInOut {
  0% {
    transform: rotate(-45deg) scale(1.1);
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  33% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  66% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    transform: rotate(45deg) scale(0.9);
  }
}
