@property --music-primary {
  syntax: '<color>';
  inherits: true;
  initial-value: red;
}

@property --music-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: blue;
}

#music {
  --music-primary: red;
  --music-secondary: blue;
  --transition-speed: 0.5s;
  display: grid;
  justify-items: center;
  position: relative;

  font-family: 'ClashDisplay', sans-serif;
  color: white;
  width: 100%;
  padding-top: 5rem;
  padding-bottom: 10rem;

  @media (max-width: 1024px) {
    padding-top: 3rem;
    padding-bottom: 5rem;
  }

  height: 50rem;

  @media (max-width: 1024px) {
    height: 45rem;
  }

  @media (max-width: 768px) {
    height: auto;
    min-height: 50rem;
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 115rem;
    z-index: -1;
    pointer-events: none;
    clip-path: polygon(0% 0%, 100% 0%, 100% 200%, 0% 200%);
    background:
            url('../img/noise/album_noise.svg'),
            radial-gradient(circle 80rem at 50% 32.5rem, transparent 0%, black 60%),
            linear-gradient(135deg, var(--music-primary) 0%, var(--music-secondary) 100%);

    background-blend-mode: overlay, normal, normal;
    background-size: 200px 200px, auto, auto;
    transition: --music-primary calc(var(--transition-speed) * 1.625) ease, --music-secondary calc(var(--transition-speed) * 1.625) ease;
  }

  &.no-transition::after {
    transition: none !important;
  }


  .music-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    line-height: 0.1em;

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      width: 72%;
    }

    .header-left {
      @media (max-width: 1024px) {
        display: none;
      }
    }

    .header-right {
      display: grid;
      justify-items: left;

      .title {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        letter-spacing: 0.2rem;

        .horizontal-line {
          text-align: center;
          border-bottom: 1px solid white;
          line-height: 0.1em;
          width: 2.5rem;
          margin-left: 0.5rem;
          margin-right: 1rem;

          @media (max-width: 1024px) {
            width: 5rem;
          }
        }
      }

      .subtitle {
        font-size: 3.5rem;
        line-height: 4rem;

        @media (max-width: 1024px) {
          font-size: 2.5rem;
          line-height: 3rem;
        }

        @media (max-width: 768px) {
          font-size: 1.5rem;
          line-height: normal;
          margin-top: 1rem;
          margin-bottom: 1rem;
        }

        span {
          color: dimgrey;
        }
      }
    }
  }

  .music-content {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    position: relative;
    width: 72%;
    max-width: 84rem;
    min-height: 25rem;
    height: 30rem;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

    @media (max-width: 1024px) {
      width: 85%;
      height: auto;
      min-height: 25rem;
    }

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      width: 90%;
      height: auto;
      padding-bottom: 2rem;
    }

    .content-left {
      display: flex;
      align-items: center;
      justify-content: center;

      @media (max-width: 1024px) {
        flex-direction: column;
      }

      .album-cover {
        width: 80%;
        aspect-ratio: 1 / 1;
        transform: translateY(-6rem);
        margin-bottom: -3rem;
        z-index: 10;

        @media (max-width: 1024px) {
          transform: translateY(-2rem);
          margin-bottom: 0;
        }

        @media (max-width: 768px) {
          transform: translateY(2rem);
          margin-bottom: 2rem;
          width: 60%;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.5rem;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
          transition: opacity var(--transition-speed) ease;
        }
      }

      .social-links {
        position: absolute;
        top: 2rem;
        right: 2rem;
        display: flex;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        z-index: 20;
        transition: opacity var(--transition-speed) ease;

        @media (max-width: 1024px) {
          position: relative;
          top: auto;
          right: auto;
          width: 80%;
          justify-content: center;
        }

        @media (max-width: 768px) {
          width: 60%;
          margin-top: 1rem;
        }

        a {
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          text-decoration: none;
          color: inherit;
          transition: color calc(var(--transition-speed) * 0.25) ease;

          &:hover {
            color: rgba(255, 255, 255, 1);
          }

          &.spotify, &.youtube {
            &::before {
              content: "";
              width: 2.5rem;
              height: 2.5rem;
              background-color: currentColor;
              -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
              -webkit-mask-position: center;
              mask-position: center;
              -webkit-mask-size: contain;
              mask-size: contain;
            }
          }

          &.spotify {
            &::before {
              -webkit-mask-image: url('../img/icons/music/spotify.svg');
              mask-image: url('../img/icons/music/spotify.svg');
            }
          }

          &.youtube {
            &::before {
              -webkit-mask-image: url('../img/icons/music/youtube.svg');
              mask-image: url('../img/icons/music/youtube.svg');
            }
          }
        }
      }
    }

    .vertical-line {
      grid-column: 2;
      grid-row: 1;
      border-left: 1px solid rgba(255, 255, 255, 0.3);
      margin: 3rem 0 4rem 0;
      justify-self: center;
      align-self: stretch;

      @media (max-width: 768px) {
        display: none;
      }
    }

    .content-right {
      display: flex;
      flex-direction: column;
      position: relative;

      .album-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        box-sizing: border-box;

        padding: 3rem 10rem 4rem 3rem;

        @media (max-width: 1024px) {
          padding: 2rem 5rem 2rem 2.5rem;
        }

        @media (max-width: 768px) {
          padding: 3rem 2rem 1rem 2rem;
          text-align: center;
        }

        .album-text {
          font-size: 2rem;
          padding-bottom: 2rem;
          transition: opacity var(--transition-speed) ease;

          @media (max-width: 1500px) {
            font-size: 1.5rem;
          }

          @media (max-width: 1300px) {
            font-size: 1.3rem;
          }

          @media (max-width: 1024px) {
            font-size: 1.5rem;
          }

          @media (max-width: 768px) {
            font-size: 1.3rem;
          }

          span {
            color: grey;
          }
        }

        .album-info-footer {

          .album-name {
            font-size: 1.4rem;
            transition: opacity var(--transition-speed) ease;

            @media (max-width: 1024px) {
              max-width: 12rem;
            }

            @media (max-width: 768px) {
              max-width: none;
            }
          }

          .album-date {
            font-size: 1rem;
            transition: opacity var(--transition-speed) ease;
          }
        }
      }
      .navigation-buttons {
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        display: flex;
        gap: 1rem;

        @media (max-width: 768px) {
          position: static;
          justify-content: center;
        }

        .button {
          background-color: rgba(255, 255, 255, 0.5);
          border: none;
          color: white;
          border-radius: 50%;
          padding: 0.5rem;

          width: 2.2rem;
          height: 2.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: border-box;
          cursor: pointer;
          transition: all calc(var(--transition-speed) * 0.25) ease;

          mask-image: url('../img/icons/arrow.svg'), linear-gradient(#fff, #fff);
          mask-composite: exclude;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: 1.2rem, 100%;

          &:hover {
            background-color: rgba(255, 255, 255, 1);
          }
        }

        .right-button {
          transform: scaleX(-1);
        }
      }
    }
  }
}