.albums {
  padding: 2.5rem 1.5rem 3.5rem;
  width: calc(100% - 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
}

.album {
  max-width: 300px;
  text-align: center;

  & .outer {
    border-radius: 0.5rem;
    transition: 0.3s all ease;
    box-shadow: 0 0 20px 0 #222;
    transform-origin: bottom center;
    position: relative;
  }

  & .inner {
    position: relative;
    overflow: visible;
    border-radius: 0.5rem;
    margin: 0 0 1.5rem;
    max-height: 300px;
    overflow: hidden;
    z-index: 1;
  }

  & .cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    transition: 0.5s all ease;
    filter: sepia(0.15) saturate(0.7) brightness(0.95);
  }

  & .links {
    bottom: 0;
    position: absolute;
    width: calc(100% - 2rem);
    padding: 0.75rem 1rem;
    background-color: hsl(0 0% 0% / 0.4);
    backdrop-filter: blur(5px);
    border-radius: 0 0 0.5rem 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;

    & a {
      transition: 0.2s all ease;
      display: flex;
      align-items: center;
    }

    & svg {
      max-width: 32px;
      max-height: 32px;
    }
  }

  & .play-overlay {
    display: none;

    & button {
      color: currentColor;
      position: relative;
      appearance: none;
      background: transparent;
      border: 0;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  & .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    z-index: 2;
    transition: all 0.2s ease;
  }

  & .progress-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    z-index: 1;
  }

  & .progress-ring__circle {
    transition: stroke-dasharray 0.3s ease;
    stroke-dasharray: 0 327;
    opacity: 0.8;
  }

  & .outer.is-active.is-playing .play-icon {
    color: #1db954;
  }

  & .record {
    display: none;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    opacity: 0;
    transition: 0.5s all ease;
    border-radius: 50%;
    box-shadow:
      0 10px 10px black,
      inset 0 -10px 10px black;
  }

  & .disc {
    position: relative;
    width: 250px;
    height: 250px;
    background:
      conic-gradient(
        from 45deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.15) 25deg,
        transparent 50deg,
        transparent 130deg,
        rgba(255, 255, 255, 0.08) 155deg,
        transparent 180deg,
        transparent 230deg,
        rgba(255, 255, 255, 0.05) 255deg,
        transparent 280deg
      ),
      radial-gradient(
        circle at center,
        transparent 5%,
        #000000 5%,
        #000000 7%,
        transparent 7%
      ),
      repeating-radial-gradient(
        circle at center,
        #0a0a0a 0px,
        #0a0a0a 0.5px,
        #1a1a1a 0.5px,
        #1a1a1a 1.2px,
        #0f0f0f 1.2px,
        #0f0f0f 1.8px
      );
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg>');
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50"/></svg>');
    animation: none;

    & img {
      width: 50%;
      height: 50%;
      display: block;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      object-fit: cover;
      transform-origin: center;
      transform: translate(-50%, -50%);
    }
  }
}

@keyframes afos-rotate-disc {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ─── Desktop enhancements ─────────────────────────────────── */
@media (min-width: 768px) {
  .album {
    &:first-child {
      width: 600px;
      max-width: calc(100% - 6rem);
      margin: 0 6rem 3rem;

      & .inner {
        max-height: 768px;
      }

      & .disc {
        width: 500px;
        height: 500px;
      }
    }

    & .cover {
      filter: sepia(0.3) saturate(0.4) brightness(0.8);
    }

    & .links {
      z-index: 2;
      width: calc(100% - 2rem);
      padding: 1rem;
      background-color: hsl(0 0% 0% / 0.5);
      border-radius: 0;

      & a:hover {
        transform: scale(1.2);
      }
    }

    & .outer {
      &:hover,
      &.is-active {
        box-shadow: 0 0 30px 0 #000;
        transform: scale(1.05);

        & .cover {
          filter: none;
        }

        & .play-overlay {
          opacity: 1;
          pointer-events: all;
        }
      }

      &.is-active {
        z-index: 2;

        & .record {
          opacity: 1;
        }

        &.is-playing .disc {
          animation: afos-rotate-disc 5s linear infinite;
        }
      }
    }

    & .play-overlay {
      display: flex;
      color: #dedede;
      z-index: 2;
      position: absolute;
      width: 120px;
      height: 120px;
      margin: 0 auto;
      cursor: pointer;
      border-radius: 50%;
      transition: all 0.3s ease;
      transform-origin: center;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;

      &:hover {
        color: #fff;
      }
    }

    & .record {
      display: block;
    }
  }
}