* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* Optional, but ensures complete hiding */
}

html,
body {
  width: 100%;
  min-height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

header {
  width: 100%;
  position: absolute;
  padding: 1rem 2rem;
  color: #fff;
  z-index: 99;
  background-color: #0003;

  nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    ul {
      list-style-type: none;
      display: flex;
      align-items: center;
      justify-content: space-between;

      li {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25%;
      }

      &:nth-of-type(1) {
        width: 50%;

        li {
          position: relative;
          letter-spacing: 0.125rem;

          &:after {
            content: "";
            position: absolute;
            top: 100%;
            width: 0%;
            height: 10%;
            background-color: #ffa489;
            transition-duration: 0.5s;
          }

          &:hover:after {
            width: 100%;
          }

          a {
            text-decoration: none;
            color: #fff;

            span {
              font-weight: 900;
              color: #ffa489;
            }
          }

          input {
            all: unset;
            position: absolute;
            left: 100%;
            max-width: 0;
            transition: 0.25s;
            background-color: #fff;
            color: black;
            background-image: url("assets/search.png");
            background-size: 10%;
            background-position: 5%;
            background-repeat: no-repeat;
            cursor: text;
            text-align: center;
            border-radius: 0.5rem;
          }

          &:has(input):hover input {
            max-width: 10rem;
            padding: 0.25rem;
          }
        }
      }

      &:nth-of-type(2) {
        width: 20%;

        li {
          position: relative;
          width: 40%;

          img {
            width: 2rem;
            filter: invert(1);
          }

          span {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffa489;
            border-radius: 50%;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            top: 0;
            right: 0;
            font-size: 0.75rem;
          }

          input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
          }

          &:has(input:checked) img {
            content: url(assets/close.svg);
            filter: invert(1) sepia(1) saturate(10000%) hue-rotate(280deg);
          }
        }
      }
    }
  }
}

main {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;

  padding-top: 10rem;

  section {
    width: 100%;
    scroll-snap-align: start;
    height: 100vh;

    &:nth-of-type(1) {
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: space-evenly;
      background-color: #000;

      h1 {
        text-align: center;
        color: #fff;
        font-size: 7vw;
        letter-spacing: 0.5rem;
        z-index: 6;

        span {
          color: black;
          -webkit-text-stroke: 1px #ffa489;
        }
      }

      button {
        all: unset;
        border: 0.25rem solid white;
        border-radius: 1rem;
        padding: 1rem 2rem;
        cursor: pointer;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.25s;

        img {
          width: 2.5rem;
          filter: invert(1);
          margin-left: 1rem;
        }

        &:hover {
          background-color: #fff;
          color: black;
          font-weight: 900;
          letter-spacing: 0.25rem;

          img {
            filter: invert(0);
          }
        }
      }
    }

    &:nth-of-type(2) {
      display: flex;
      flex-flow: column;

      & > div {
        height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;

        button {
          all: unset;
        }
      }

      .watch {
        position: relative;
        background-color: #ffa489;

        &::after,
        &::before {
          content: "";
          position: absolute;
          background-color: black;
          top: 0;
          bottom: 0;
          width: 50%;
        }

        &::before {
          left: 0;
          border-radius: 0 100% 100% 0 / 0 50% 50% 0;
        }

        &::after {
          right: 0;
          border-radius: 100% 0 0 100% / 50% 0 0 50%;
        }

        img {
          width: 25rem;
          position: absolute;
          z-index: 2;
          background-image: radial-gradient(black 0 35%, transparent 70%);
        }

        button {
          position: absolute;
          bottom: 1.5rem;
          color: white;
          z-index: 2;
          cursor: pointer;
          font-weight: 900;
          text-shadow: 0 0 1rem #0006;
          transition: 0.25s;
          font-size: 1.5rem;

          &:hover {
            text-shadow: 0 0 1rem #ffa489;
          }
        }
      }

      .aside {
        background-image: radial-gradient(circle, black 0 30%, #ffa489 45%);
        position: relative;

        .control {
          position: relative;
          border: 0.25rem solid white;
          border-radius: 1rem;

          & > img {
            width: 10rem;
            padding: 1rem;
          }

          button {
            position: absolute;
            cursor: pointer;

            &:active img {
              filter: invert(0.5);
            }

            img {
              width: 2.5rem;
              filter: invert(1);
            }

            &:nth-of-type(1) {
              bottom: -3rem;
              left: 0;

              img {
                transform: scaleY(-1);
              }
            }

            &:nth-of-type(2) {
              top: -3rem;
              right: 0;

              img {
                transform: scaleX(-1);
              }
            }
          }
        }
      }
    }
  }
}

@media (min-width: 600px) {
  header {
    nav {
      ul:nth-of-type(1) {
        li {
          &:has(input):hover input {
            max-width: 20rem;
          }
        }
      }
    }
  }

  main {
    section:nth-of-type(2) {
      .aside {
        background-image: radial-gradient(circle, black 0 22.5%, #ffa489 37.5%);
      }
    }
  }
}

@media (min-width: 768px) {
  header {
    nav {
      ul:nth-of-type(1) {
        width: 40%;
      }

      ul:nth-of-type(2) {
        width: 15%;
      }
    }
  }

  main {
    display: flex;
    overflow: hidden;

    section:nth-of-type(1) {
      flex: 1;
    }

    section:nth-of-type(2) {
      flex: 1;
      flex-flow: row;

      & > div {
        height: 100vh;
      }

      .watch {
        flex: 3;

        &::after {
          transform: scale(1.25);
          right: -7.5rem;
        }

        &::before {
          transform: scale(1.25);
          left: -7.5rem;
        }

        img {
          width: 40rem;
        }

        button {
          bottom: 3rem;
        }
      }

      .aside {
        flex: 1;
        background-image: none;
        background-color: #000;
      }
    }
  }
}

@media (min-width: 992px) {
  header {
    nav {
      ul:nth-of-type(1) {
        width: 30%;
      }

      ul:nth-of-type(2) {
        width: 10%;
      }
    }
  }
}