/* =====================================================
   CAROLYN LUGER VERMES
   PREMIUM MUSIC PAGE CLEAN CSS
===================================================== */

/* ===========================
   ROOT VARIABLES
=========================== */

:root {
  --spotify: #c6a15b;
  --black: #121212;
  --dark: #181818;
  --light: #282828;
  --text: #ffffff;
  --gray: #b3b3b3;
  --gold: #d4af37;
}

/* ===========================
   MUSIC PAGE RESET ONLY
   (Footer Safe)
=========================== */

.music-page,
.music-page * {
  box-sizing: border-box;
}

/* ===========================
   BODY MUSIC OVERRIDES REMOVED

   DO NOT ADD:
   padding-bottom
   flex layout
   footer positioning

=========================== */

/* ===========================
   HERO SECTION
=========================== */

.music-hero {
  min-height: 69vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 0;

  background: url("Images/sss1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;

  margin-top: -80px;
  padding-top: 150px;

  position: relative;
}

/* Overlay */
.music-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(66, 60, 60, 0.26);
  z-index: 1;
}

/* Keep content above overlay */
.music-hero .container {
  position: relative;
  z-index: 2;
}

.music-hero .container {
  padding-top: 0;
}

/* ===========================
   ALBUM COVER
=========================== */

.album-cover {
  width: 250px;

  max-width: 100%;

  border-radius: 20px;

  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.55);

  position: relative;

  top: 70px;

  animation: floatAlbum 5s ease-in-out infinite;

  transition: 0.4s;
}

.album-cover:hover {
  transform: scale(1.03);
}

@keyframes floatAlbum {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ===========================
   MUSIC DETAILS
=========================== */

.music-type {
  display: inline-block;

  font-size: 0.8rem;

  color: #f8b809;

  letter-spacing: 2px;

  margin-bottom: 15px;

  font-weight: 700;
}

.artist-name {
  font-family: "Cinzel", serif;

  font-size: 4rem;

  color: white;

  margin-bottom: 15px;
}

.artist-description {
  font-family: "Cormorant Garamond", serif;

  font-size: 2rem;

  font-style: italic;

  font-weight: 400;

  line-height: 1.8;

  letter-spacing: 0.4px;

  color: rgba(255, 255, 255, 0.9);

  max-width: 700px;

  margin-bottom: 30px;

  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* ===========================
   DROP TEXT ANIMATION
=========================== */

.artist-name.drop-text span {
  display: inline-block;

  opacity: 0;

  transform: translateY(-120px);

  animation: dropLetter 0.8s ease forwards;
}

@keyframes dropLetter {
  to {
    opacity: 1;

    transform: translateY(0);
  }
}

.artist-name.drop-text span:nth-child(1) {
  animation-delay: 0.05s;
}
.artist-name.drop-text span:nth-child(2) {
  animation-delay: 0.1s;
}
.artist-name.drop-text span:nth-child(3) {
  animation-delay: 0.15s;
}
.artist-name.drop-text span:nth-child(4) {
  animation-delay: 0.2s;
}
.artist-name.drop-text span:nth-child(5) {
  animation-delay: 0.25s;
}
.artist-name.drop-text span:nth-child(6) {
  animation-delay: 0.3s;
}
.artist-name.drop-text span:nth-child(7) {
  animation-delay: 0.35s;
}
.artist-name.drop-text span:nth-child(8) {
  animation-delay: 0.4s;
}
.artist-name.drop-text span:nth-child(9) {
  animation-delay: 0.45s;
}
.artist-name.drop-text span:nth-child(10) {
  animation-delay: 0.5s;
}
.artist-name.drop-text span:nth-child(11) {
  animation-delay: 0.55s;
}
.artist-name.drop-text span:nth-child(12) {
  animation-delay: 0.6s;
}
.artist-name.drop-text span:nth-child(13) {
  animation-delay: 0.65s;
}
.artist-name.drop-text span:nth-child(14) {
  animation-delay: 0.7s;
}
.artist-name.drop-text span:nth-child(15) {
  animation-delay: 0.75s;
}
.artist-name.drop-text span:nth-child(16) {
  animation-delay: 0.8s;
}
.artist-name.drop-text span:nth-child(17) {
  animation-delay: 0.85s;
}
.artist-name.drop-text span:nth-child(18) {
  animation-delay: 0.9s;
}

/* =====================================================
   HERO BUTTONS
===================================================== */

.hero-buttons {
  display: flex;

  gap: 15px;

  flex-wrap: wrap;
}

.hero-buttons .btn {
  padding: 14px 30px;

  border-radius: 50px;

  font-weight: 600;

  transition: 0.3s;
}

.hero-buttons .btn-success {
  background: #c9a24d;

  border: none;
}

.hero-buttons .btn-success:hover {
  transform: scale(1.05);
}

.hero-buttons .btn-outline-light:hover {
  background: white;

  color: black;
}

/* =====================================================
   PLAYLIST SECTION
===================================================== */

.playlist-section {
  padding: 60px 0;
}

.playlist-header {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 35px;

  flex-wrap: wrap;

  gap: 20px;
}

.playlist-header h2 {
  font-family: "Cinzel", serif;

  font-size: 3rem;

  color: white;

  margin-bottom: 15px;
}

#searchSong {
  max-width: 320px;

  background: #242424;

  border: none;

  color: white;

  border-radius: 50px;

  padding: 12px 20px;
}

#searchSong:focus {
  box-shadow: none;

  background: #2d2d2d;

  color: white;
}

#searchSong::placeholder {
  color: #8f8f8f;
}

/* =====================================================
   SONG LIST
===================================================== */

.playlist {
  max-height: 700px;

  overflow-y: auto;
}

.song {
  display: grid;

  grid-template-columns: 70px 1fr 90px;

  align-items: center;

  padding: 18px 25px;

  cursor: pointer;

  transition: 0.25s ease;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  position: relative;
}

.song:last-child {
  border-bottom: none;
}

.song:hover {
  background: rgba(255, 255, 255, 0.05);
}

.song.active {
  background: rgba(196, 172, 37, 0.12);

  border-left: 4px solid var(--gold);
}

.song-number {
  font-size: 1.5rem;

  font-weight: 700;

  color: #ffffff;

  text-align: center;

  transition: 0.25s;
}

.song:hover .song-number {
  color: var(--gold);
}

.song-info {
  display: flex;

  flex-direction: column;

  justify-content: center;
}

.song-info h3 {
  font-size: 2rem;

  margin: 0;

  font-weight: 600;

  color: white;

  transition: 0.25s;
}

.song-info p {
  margin-top: 4px;

  margin-bottom: 0;

  color: #9e9e9e;

  font-size: 0.9rem;
}

.song-duration {
  text-align: right;

  color: #ffffff;

  font-size: 0.9rem;
}

/* PLAY ICON */

.song::before {
  content: "▶";

  position: absolute;

  left: 25px;

  opacity: 0;

  color: var(--spotify);

  font-size: 0.9rem;

  transition: 0.25s;
}

.song:hover::before {
  opacity: 1;
}

.song:hover .song-number {
  opacity: 0;
}

/* =====================================================
   SCROLLBAR
===================================================== */

.playlist::-webkit-scrollbar {
  width: 10px;
}

.playlist::-webkit-scrollbar-track {
  background: #111;
}

.playlist::-webkit-scrollbar-thumb {
  background: #444;

  border-radius: 20px;
}

.playlist::-webkit-scrollbar-thumb:hover {
  background: var(--spotify);
}

/* =====================================================
   DESCRIPTION TYPING ANIMATION
===================================================== */

.artist-description.typing span {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  width: 0;

  animation: typing2 1s steps(45, end) forwards;
}

.artist-description.typing span:nth-child(1) {
  animation-delay: 1s;
}

.artist-description.typing span:nth-child(2) {
  animation-delay: 2s;
}

@keyframes typing2 {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* Move content slightly down */

.music-hero .col-lg-8 {
  transform: translateY(40px);
}

/* =====================================================
   MUSIC PLAYER
===================================================== */

.music-player {
  position: fixed;

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  max-width: 900px;

  background: #181818;

  border-radius: 25px;

  padding: 25px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

  transition: 0.45s ease;

  z-index: 9999;
}

/* Hidden State */

.music-player.hidden {
  bottom: -420px;
}

/* Show Player */

.music-player.show {
  bottom: 30px;
}

/* Minimized */

.music-player.minimized {
  width: 380px;

  height: 80px;

  overflow: hidden;

  padding: 15px 20px;
}

/* =====================================================
   PLAYER LEFT
===================================================== */

.player-left {
  width: 30%;

  display: flex;

  align-items: center;

  gap: 18px;
}

.player-left img {
  width: 70px;

  height: 70px;

  object-fit: cover;

  border-radius: 10px;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.player-left h5 {
  margin: 0;

  font-size: 25px;

  font-weight: 600;

  color: white;
}

.music-page .music-player .player-left p {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
}

/* =====================================================
   PLAYER CENTER
===================================================== */

.player-center {
  width: 40%;

  display: flex;

  flex-direction: column;

  align-items: center;
}

.controls {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  margin-bottom: 10px;
}

.controls button {
  border: none;

  background: none;

  color: white;

  font-size: 22px;

  cursor: pointer;

  transition: 0.25s;
}

.controls button:hover {
  color: var(--spotify);

  transform: scale(1.15);
}

#playPauseBtn {
  width: 55px;

  height: 55px;

  border-radius: 50%;

  background: var(--spotify);

  color: white;

  font-size: 24px;
}

#playPauseBtn:hover {
  transform: scale(1.08);
}

/* =====================================================
   PROGRESS BAR
===================================================== */

#progressBar {
  width: 100%;

  cursor: pointer;

  accent-color: var(--spotify);
}

/* =====================================================
   PLAYER RIGHT
===================================================== */

.player-right {
  width: 20%;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 12px;
}

.player-right i {
  font-size: 18px;
}

#volume {
  width: 120px;

  accent-color: var(--spotify);

  cursor: pointer;
}

/* =====================================================
   PLAYER ACTION BUTTONS
===================================================== */

.player-actions {
  position: absolute;

  top: 15px;

  right: 20px;

  display: flex;

  gap: 10px;
}

.player-actions button {
  border: none;

  background: none;

  color: white;

  font-size: 18px;

  cursor: pointer;
}

/* =====================================================
   ALBUM SECTION
===================================================== */

.music-albums-section {
  padding: 90px 0;

  background: url("Images/my.png") center center / cover no-repeat;
}

.music-albums-heading {
  text-align: center;

  margin-bottom: 55px;
}

.music-albums-heading span {
  display: block;

  margin-bottom: 10px;

  font-size: 12px;

  letter-spacing: 3px;

  text-transform: uppercase;

  opacity: 0.6;
}

.music-albums-heading h2 {
  font-family: "Cinzel", serif;

  font-size: 3.5rem;

  color: #c9a24d;

  margin-bottom: 15px;
}

.music-albums-heading p {
  max-width: 600px;

  margin: 0 auto;

  font-size: 18px;

  line-height: 1.7;

  opacity: 0.7;
}

/* =====================================================
   ALBUM GRID
===================================================== */

.album-folder-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 30px;

  justify-content: center;
}

.album-folder-card {
  max-width: 380px;

  width: 100%;

  margin: 0 auto;

  padding: 15px;

  text-align: center;

  background: rgb(255, 255, 255);

  border: 1px solid rgb(192, 178, 178);

  border-radius: 12px;

  transition: 0.4s ease;
}

.album-folder-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.album-folder-cover {
  width: 100%;

  height: 280px;

  overflow: hidden;

  border-radius: 8px;
}

.album-folder-cover img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.6s ease;
}

.album-folder-card:hover .album-folder-cover img {
  transform: scale(1.06);
}

/* =====================================================
   ALBUM INFORMATION
===================================================== */

.album-folder-info {
  padding: 20px 5px 5px;
}

.album-folder-info h3 {
  margin: 0 0 7px;

  font-size: 21px;

  font-weight: 600;
}

.album-folder-info p {
  margin: 0 0 8px;

  font-size: 13px;

  opacity: 0.7;
}

.album-song-count {
  display: block;

  margin-bottom: 18px;

  font-size: 12px;

  letter-spacing: 1px;

  text-transform: uppercase;

  opacity: 0.5;
}

/* =====================================================
   ALBUM BUTTON
===================================================== */

.album-folder-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 9px 20px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 30px;

  background: transparent;

  color: white;

  font-family: inherit;

  font-size: 12px;

  cursor: pointer;

  transition: 0.3s ease;
}

.album-folder-button:hover {
  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.7);

  transform: translateY(-2px);
}

.album-folder-button i {
  font-size: 15px;
}

/* =====================================================
   ALBUM MODAL
===================================================== */

.album-modal {
  background: #161616;

  color: white;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 15px;

  overflow: hidden;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

/* =====================================================
   MODAL HEADER
===================================================== */

.album-modal .modal-header {
  padding: 25px 30px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.album-modal-label {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;

  letter-spacing: 3px;

  text-transform: uppercase;

  opacity: 0.5;
}

.album-modal .modal-title {
  margin: 0;

  font-size: 28px;

  font-weight: 600;
}

.album-modal-artist {
  margin: 5px 0 0;

  font-size: 13px;

  opacity: 0.6;
}

.album-modal .btn-close {
  filter: invert(1);

  opacity: 0.7;
}

.album-modal .btn-close:hover {
  opacity: 1;
}

/* =====================================================
   MODAL BODY
===================================================== */

.album-modal .modal-body {
  padding: 0;
}

.album-modal .playlist-section {
  padding: 25px 30px 30px;

  margin: 0;
}

.album-modal .playlist-section .container {
  width: 100%;

  max-width: 100%;

  padding: 0;
}

/* =====================================================
   MODAL PLAYLIST HEADER
===================================================== */

.album-modal .playlist-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;
}

.album-modal .playlist-header h2 {
  margin: 0;
}

/* =====================================================
   MODAL SEARCH
===================================================== */

.album-modal #searchSong {
  max-width: 250px;

  background: rgba(255, 255, 255, 0.05);

  color: white;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 25px;

  padding: 10px 16px;
}

.album-modal #searchSong::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.album-modal #searchSong:focus {
  background: rgba(255, 255, 255, 0.08);

  color: white;

  border-color: rgba(255, 255, 255, 0.4);

  box-shadow: none;
}

/* =====================================================
   MODAL PLAYLIST
===================================================== */

.album-modal .playlist {
  width: 100%;

  max-height: 450px;

  overflow-y: auto;

  padding-right: 5px;
}

.album-modal .playlist::-webkit-scrollbar {
  width: 5px;
}

.album-modal .playlist::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.album-modal .playlist::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);

  border-radius: 10px;
}

/* =====================================================
   MODAL SONG ROW
===================================================== */

.album-modal .song {
  display: flex;

  align-items: center;

  gap: 15px;

  width: 100%;

  padding: 14px 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 7px;

  cursor: pointer;

  transition: 0.3s ease;
}

.album-modal .song:hover {
  background: rgba(255, 255, 255, 0.07);
}

/* =====================================================
   MODAL SONG NUMBER
===================================================== */

.album-modal .song-number {
  width: 30px;

  flex-shrink: 0;

  text-align: center;

  font-size: 13px;

  opacity: 0.5;
}

/* =====================================================
   MODAL SONG INFO
===================================================== */

.album-modal .song-info {
  flex: 1;

  min-width: 0;
}

.album-modal .song-info h3 {
  margin: 0 0 4px;

  font-size: 20px;

  font-weight: 500;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.album-modal .song-info p {
  margin: 0;

  font-size: 12px;

  opacity: 0.5;
}

.album-modal .song-duration {
  flex-shrink: 0;

  font-size: 12px;

  opacity: 0.5;
}

/* =====================================================
   ACTIVE SONG
===================================================== */

.album-modal .song.active-song {
  background: rgba(255, 255, 255, 0.1);
}

/* =====================================================
   MODAL PLAY BUTTON
===================================================== */

.modal-song-play {
  width: 32px;

  height: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: 50%;

  background: transparent;

  color: white;

  cursor: pointer;

  transition: 0.3s ease;
}

.modal-song-play:hover {
  background: rgba(255, 255, 255, 0.15);

  transform: scale(1.08);
}

.modal-song-play i {
  font-size: 14px;
}

/* =====================================================
   MODAL BACKDROP
===================================================== */

.modal-backdrop.show {
  opacity: 0.8;
}

/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

/* ===========================
   TABLET
=========================== */

@media (max-width: 992px) {
  .music-player {
    flex-direction: column;

    width: 90%;

    padding: 20px;

    gap: 20px;
  }

  .player-left,
  .player-center,
  .player-right {
    width: 100%;

    justify-content: center;
  }

  .artist-name {
    font-size: 2.5rem;

    text-align: center;
  }

  .artist-description {
    text-align: center;

    font-size: 1.6rem;
  }

  .hero-buttons {
    justify-content: center;
  }

  .music-hero .col-lg-8 {
    transform: translateY(20px);
  }

  .album-folder-grid {
    grid-template-columns: repeat(2, 250px);

    gap: 25px;
  }

  .album-folder-card {
    max-width: 250px;
  }
}

/* ===========================
   MOBILE
=========================== */

@media (max-width: 768px) {
  .music-hero {
    margin-top: -50px;

    padding-top: 100px;
  }

  .artist-name {
    font-size: 2rem;
  }

  .artist-description {
    font-size: 1.3rem;
  }

  .playlist-header {
    flex-direction: column;

    align-items: stretch;
  }

  #searchSong {
    max-width: 100%;
  }

  .song {
    grid-template-columns: 45px 1fr 60px;

    padding: 15px;
  }

  .song-info h3 {
    font-size: 1rem;
  }

  .song-duration {
    font-size: 12px;
  }

  .music-player {
    width: 95%;

    bottom: 15px;

    padding: 18px;

    border-radius: 20px;
  }

  .player-left img {
    width: 55px;

    height: 55px;
  }

  .player-left h5 {
    font-size: 18px;
  }

  #volume {
    width: 90px;
  }

  .album-folder-grid {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .album-folder-card {
    width: 280px;

    max-width: 100%;
  }

  .music-albums-heading h2 {
    font-size: 2.5rem;
  }

  .album-modal .playlist-section {
    padding: 20px 15px;
  }

  .album-modal .playlist-header {
    flex-direction: column;

    align-items: stretch;
  }

  .album-modal #searchSong {
    max-width: 100%;
  }
}

/* ===========================
   SMALL MOBILE
=========================== */

@media (max-width: 576px) {
  .music-hero {
    padding-left: 15px;

    padding-right: 15px;
  }

  .artist-name {
    font-size: 1.8rem;
  }

  .artist-description {
    font-size: 1.1rem;

    line-height: 1.6;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .song {
    grid-template-columns: 35px 1fr 50px;
  }

  .song-number {
    font-size: 1rem;
  }

  .album-modal .modal-title {
    font-size: 22px;
  }

  .album-modal .song-info h3 {
    font-size: 14px;
  }
}

/* =====================================================
   FINAL FOOTER CONFLICT PREVENTION
   DO NOT REMOVE
===================================================== */

/*
   These rules prevent music.css
   from affecting your premium footer
*/

.music-page footer,
.music-page .premium-footer {
  all: unset;
}

/*
   Keep music player above everything
*/

.music-player {
  z-index: 9999;
}

/*
   Prevent modal/player overflow
*/

.modal {
  z-index: 10000;
}

.modal-backdrop {
  z-index: 9998;
}

/* =====================================================
   MUSIC PLAYER
===================================================== */

.music-player {
  position: fixed;

  bottom: -420px;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  max-width: 900px;

  background: #181818;

  border-radius: 25px;

  padding: 25px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

  transition: 0.45s ease;

  z-index: 9999;

  opacity: 0;

  pointer-events: none;
}

/* SHOW PLAYER ONLY WHEN ACTIVE */

.music-player.show {
  bottom: 30px;

  opacity: 1;

  pointer-events: auto;
}

/* MINIMIZED PLAYER */

.music-player.minimized {
  width: 380px;

  height: 80px;

  padding: 15px 20px;

  overflow: hidden;
}

/* =====================================================
   END MUSIC CSS
===================================================== */

/* =====================================================
   MUSIC PLAYER BUTTON FIX
===================================================== */

/* Make player fully clickable */
.music-player {
  pointer-events: auto;
}

/* Controls container */
.controls {
  position: relative;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Previous and Next buttons */
#prevBtn,
#nextBtn {
  width: 45px;
  height: 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  border: none;

  background: transparent;
  color: white;

  font-size: 24px;

  cursor: pointer;

  transition: all 0.3s ease;

  pointer-events: auto;
}

/* Hover effect */
#prevBtn:hover,
#nextBtn:hover {
  color: #c9a24d;
  transform: scale(1.15);
}

/* Play button */
#playPauseBtn {
  width: 60px;
  height: 60px;

  border-radius: 50%;

  border: none;

  background: #c9a24d;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  cursor: pointer;

  pointer-events: auto;
}

#playPauseBtn:hover {
  transform: scale(1.1);

  background: #d4af37;
}

/* Prevent icon blocking clicks */
#prevBtn i,
#nextBtn i,
#playPauseBtn i {
  pointer-events: none;
}

/* Keep player above modal/footer */
.music-player {
  z-index: 99999;
}
































.hero-buttons{
    display: none;
}




/* ===========================
   MUSIC HERO
=========================== */

.music-hero{
    position: relative;
    overflow: hidden;
    min-height: 85vh;
}

/* Full-screen background video */
.hero-logo-video{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;      /* Covers the entire section */
    object-position: center;

    z-index: 0;
}

/* Keep your content above the video */
.music-hero .container{
    position: relative;
    z-index: 2;
}








/* ===========================
   BUTTON CONTAINER
=========================== */

.album-folder-buttons{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

/* ===========================
   SMALL BUTTONS
=========================== */

.album-folder-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 4px 10px;      /* Smaller */
    min-width: 95px;
    height: 30px;

    font-size: 0.7rem;      /* Smaller text */
    font-weight: 600;

    border-radius: 18px;
    text-decoration: none;
    white-space: nowrap;

    transition: all .3s ease;
}

/* Smaller Icons */

.album-folder-button i{
    font-size: 0.75rem;
}

/* Spotify */

.spotify-button{
    background: #1DB954;
    color: #fff;
}

.spotify-button:hover{
    background: #169c46;
    color: #fff;
    transform: translateY(-2px);
}













/* ===========================
   MUSIC HERO BACKGROUND
=========================== */

.music-hero {

    position: relative;

    height: 60vh;

    overflow: hidden;

}



.music-hero .hero-bg {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    z-index: -2;

    transform: none !important;

    transition: none !important;

}



/* DARK OVERLAY */

.music-hero .overlay {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,0.55);

    z-index: -1;

}



/* REMOVE HOVER ZOOM */

.music-hero:hover .hero-bg {

    transform: none !important;

}




.music-hero {
    min-height: 71vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 150px 0 70px;

   
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    margin-top: -80px;

    position: relative;
}


.spotify-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 20px auto 0;
}




























































































/* ===========================================
            MUSIC PAGE LAYOUT
=========================================== */

.music-page{

    position:relative;
    overflow:hidden;

    padding:100px 50px;

    background:
    linear-gradient(rgba(252, 249, 243, 0),rgba(248, 243, 234, 0)),
    url("Images/yss.png");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

/* Decorative Background */

.music-bg-circle{

    position:absolute;
    border-radius:50%;
    pointer-events:none;

}

.circle-1{

    width:650px;
    height:650px;

    border:2px solid rgba(190,150,90,.08);

    top:-280px;
    left:-250px;

}

.circle-2{

    width:450px;
    height:450px;

    background:rgba(180,145,90,.05);

    bottom:-180px;
    right:-180px;

    filter:blur(10px);

}

/* Main Container */

.music-container{

    position:relative;

    z-index:5;

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:110px;

    align-items:flex-start;

}

/* ==========================
        LEFT PANEL
========================== */

.music-left{

    position:sticky;

    top:100px;

}

/* Album */

.album-showcase{

    position:relative;

    width:340px;
    height:420px;

    margin:auto;

}

/* Album Cover */

.album-cover{

    position:relative;

    width:100%;

    border-radius:10px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.15);

    z-index:5;

}

/* Album Info */

.album-information{

    margin-top:50px;

}

.album-information h2{

    font-size:2rem;

    color:#3a2918;

    margin-bottom:15px;

    line-height:1.3;

}

.album-information p{

    font-size:1.15rem;

    color:#705b47;

    line-height:1.9;

}

/* Divider */

.music-divider{

    width:70px;

    height:3px;

    background:#c49a58;

    border-radius:50px;

    margin:45px 0;

}

/* Quote */

.music-quote{

    max-width:320px;

}

.quote-icon{

    font-size:4rem;

    color:#c49a58;

    line-height:1;

    display:block;

    margin-bottom:20px;

}

.music-quote p{

    font-size:1.3rem;

    font-style:italic;

    line-height:1.8;

    color:#6d5842;

}

/* ==========================
        RIGHT PANEL
========================== */

.music-right{

    width:100%;

}

/* Page Title */

.music-title{

    text-align:center;

    font-size:4rem;

    font-family:Georgia, serif;

    font-weight:400;

    color:#382617;

    margin-bottom:18px;

}

/* Gold Divider */

.music-title-divider{

    width:180px;
    height:2px;

    background:#c49a58;

    margin:0 auto 50px;

    position:relative;

}

.music-title-divider::before{

    content:"𝄞";

    position:absolute;

    left:50%;
    top:-18px;

    transform:translateX(-50%);

    background:#faf7f2;

    padding:0 15px;

    color:#b68c4d;

    font-size:28px;

}

/* Track Container */

.album-tracklist-container{

    background:rgba(255,255,255,.70);

    backdrop-filter:blur(14px);

    border:1px solid rgba(198,154,88,.15);

    border-radius:28px;

    padding:25px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.08);

}

/* ==========================
        RESPONSIVE
========================== */

@media(max-width:1100px){

.music-container{

    grid-template-columns:1fr;

    gap:60px;

}

.music-left{

    position:relative;

    top:0;

    text-align:center;

}

.album-showcase{

    margin:auto;

}

.music-divider{

    margin:35px auto;

}

.music-quote{

    margin:auto;

}

}

@media(max-width:768px){

.music-page{

    padding:70px 20px;

}

.music-title{

    font-size:2.7rem;

}

.album-showcase{

    width:270px;
    height:340px;

}

.album-information h2{

    font-size:1.6rem;

}

.music-quote p{

    font-size:1.05rem;

}

.album-tracklist-container{

    padding:18px;

}

}


/* ===========================================
        3D ALBUM & VINYL RECORD
=========================================== */

/* Album Showcase */

.album-showcase{

    position:relative;

    width:340px;
    height:430px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin:auto;

}

/* ===========================
        VINYL RECORD
=========================== */

.vinyl-record{

    position:absolute;

    right:-75px;

    width:240px;
    height:240px;

    border-radius:50%;

    z-index:1;

    background:
    radial-gradient(circle at center,

    #b88b4d 0 12%,
    #222 12% 16%,
    #111 16% 23%,
    #222 23% 30%,
    #111 30% 37%,
    #222 37% 44%,
    #111 44% 51%,
    #222 51% 58%,
    #111 58% 65%,
    #222 65% 72%,
    #111 72% 100%

    );

    box-shadow:
    -15px 15px 30px rgba(0,0,0,.18);

    animation:vinylSpin 20s linear infinite;

}

/* Record Reflection */

.vinyl-record::before{

    content:"";

    position:absolute;

    inset:18px;

    border-radius:50%;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.18),

    transparent 55%

    );

}

/* Center Label */

.vinyl-record::after{

    content:"";

    position:absolute;

    width:70px;
    height:70px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,

    #d9b06f 0%,
    #b88b4d 70%,
    #8a6435 100%

    );

    border:3px solid rgba(255,255,255,.35);

}

/* ===========================
        ALBUM COVER
=========================== */

.album-cover{

    position:relative;

    z-index:5;

    width:200px;

    border-radius:10px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.18);

    transition:.45s;

}

/* Floating Hover */

.album-showcase:hover .album-cover{

    transform:

    translateY(-8px)
    rotate(-2deg);

}

/* Pull Record Out */

.album-showcase:hover .vinyl-record{

    right:-105px;

}

/* Glow */

.album-showcase::before{

    content:"";

    position:absolute;

    width:360px;
    height:360px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(184,145,87,.18),

    transparent 70%

    );

    filter:blur(45px);

    z-index:0;

}

/* Small Decorative Shadow */

.album-showcase::after{

    content:"";

    position:absolute;

    bottom:-28px;

    width:240px;
    height:35px;

    background:

    rgba(0,0,0,.18);

    filter:blur(18px);

    border-radius:50%;

    z-index:-1;

}

/* ===========================
        ANIMATIONS
=========================== */

@keyframes vinylSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Pause When Hovered */

.album-showcase:hover .vinyl-record{

    animation-play-state:paused;

}

/* ===========================
        MOBILE
=========================== */

@media(max-width:768px){

.album-showcase{

    width:270px;
    height:340px;

}

.album-cover{

    width:250px;

}

.vinyl-record{

    width:170px;
    height:170px;

    right:-50px;

}

.album-showcase:hover .vinyl-record{

    right:-65px;

}

}



/* ===========================================
            TRACK LIST
=========================================== */

.album-tracklist-container{

    display:flex;
    flex-direction:column;
    gap:12px;

}

/* Song */

.album-tracklist-container .song{

    position:relative;

   
    align-items:center;

    gap:20px;

    min-height:82px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(15px);

    border:1px solid rgba(0,0,0,.05);

    transition:.35s;

    cursor:pointer;

    overflow:hidden;

}

/* Elegant Hover */

.album-tracklist-container .song:hover{

    transform:translateX(8px);

    box-shadow:

    0 12px 30px rgba(0,0,0,.08);

    border-color:#d4b07b;

}

/* Gold Left Accent */

.album-tracklist-container .song::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#c49a58;

    transform:scaleY(0);

    transition:.3s;

}

.album-tracklist-container .song:hover::before{

    transform:scaleY(1);

}

/* Number */

.song-number{

    width:55px;

    font-size:24px;

    font-weight:600;

    color:#b88b4d;

    text-align:center;

    flex-shrink:0;

}

/* Song Information */

.song-info{

    flex:1;

}

.song-info h4{

    margin:0;

    font-size:1.25rem;

    color:#2d2015;

    font-weight:600;

    transition:.3s;

}

.song-info p{

    margin-top:6px;

    color:#7d6954;

    font-size:.95rem;

    line-height:1.4;

}

/* Duration */

.song-duration{

    font-size:15px;

    font-weight:600;

    color:#6b5843;

    margin-left:20px;

    white-space:nowrap;

}

/* Three Dots */

.album-tracklist-container .song::after{

    content:"•••";

    margin-left:18px;

    color:#9b815f;

    font-size:18px;

    letter-spacing:2px;

}

/* Active Song */

.song.playing{

    background:

    linear-gradient(

    90deg,

    #f9f2e6,

    #fdfaf4

    );

    border:1px solid #d2ab6b;

    box-shadow:

    0 12px 28px rgba(184,145,87,.18);

}

/* Playing Number */

.song.playing .song-number{

    color:#8f6432;

}

/* Playing Title */

.song.playing h4{

    color:#4d2d12;

}

/* Small Equalizer */

.song.playing .song-duration{

    position:relative;

    padding-left:38px;

}

.song.playing .song-duration::before{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    transform:translateY(-50%);

    width:22px;
    height:16px;

    background:

    linear-gradient(#b88b4d,#b88b4d) left bottom/3px 8px no-repeat,

    linear-gradient(#b88b4d,#b88b4d) center bottom/3px 16px no-repeat,

    linear-gradient(#b88b4d,#b88b4d) right bottom/3px 11px no-repeat;

}

/* Smooth Fade */

.album-tracklist-container .song{

    animation:fadeSong .5s ease both;

}

.album-tracklist-container .song:nth-child(2){

    animation-delay:.05s;

}

.album-tracklist-container .song:nth-child(3){

    animation-delay:.1s;

}

.album-tracklist-container .song:nth-child(4){

    animation-delay:.15s;

}

.album-tracklist-container .song:nth-child(5){

    animation-delay:.2s;

}

.album-tracklist-container .song:nth-child(6){

    animation-delay:.25s;

}

.album-tracklist-container .song:nth-child(7){

    animation-delay:.3s;

}

.album-tracklist-container .song:nth-child(8){

    animation-delay:.35s;

}

.album-tracklist-container .song:nth-child(9){

    animation-delay:.4s;

}

.album-tracklist-container .song:nth-child(10){

    animation-delay:.45s;

}

.album-tracklist-container .song:nth-child(11){

    animation-delay:.5s;

}

.album-tracklist-container .song:nth-child(12){

    animation-delay:.55s;

}

.album-tracklist-container .song:nth-child(13){

    animation-delay:.6s;

}

.album-tracklist-container .song:nth-child(14){

    animation-delay:.65s;

}

.album-tracklist-container .song:nth-child(15){

    animation-delay:.7s;

}

.album-tracklist-container .song:nth-child(16){

    animation-delay:.75s;

}

.album-tracklist-container .song:nth-child(17){

    animation-delay:.8s;

}

/* Animation */

@keyframes fadeSong{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Mobile */

@media(max-width:768px){

.song{

    padding:16px;

    gap:14px;

}

.song-number{

    width:40px;

    font-size:18px;

}

.song-info h4{

    font-size:16px;

}

.song-info p{

    font-size:13px;

}

.song-duration{

    font-size:13px;

}

}


/* ===================================================
            PREMIUM FINISHING EFFECTS
=================================================== */

/* Floating Music Notes */

.music-page::before{

    content:"♪";

    position:absolute;

    top:10%;

    left:6%;

    font-size:130px;

    color:rgba(184,145,87,.08);

    animation:floatOne 16s ease-in-out infinite;

}

.music-page::after{

    content:"♫";

    position:absolute;

    bottom:12%;

    right:6%;

    font-size:150px;

    color:rgba(184,145,87,.08);

    animation:floatTwo 18s ease-in-out infinite;

}

/* Floating Background */

.music-bg-circle{

    animation:blobMove 12s ease-in-out infinite;

}

.circle-2{

    animation-delay:4s;

}

/* ==========================
        SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f6f1e9;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    #a5a3a0,
    #a5a3a0
    );

    border-radius:30px;

}


/* ==========================
        ALBUM INFO
========================== */

.album-information h2{

    position:relative;

    display:inline-block;

}

.album-information h2::after{

    content:"";

    position:absolute;

    bottom:-10px;
    left:0;

    width:65px;
    height:3px;

    border-radius:30px;

    background:#c49a58;

}

/* Quote Card */

.music-quote{

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(10px);

    padding:28px;

    border-radius:18px;

    border:1px solid rgba(196,154,88,.12);

    box-shadow:

    0 15px 40px rgba(0,0,0,.06);

}

/* Album Card */

.album-showcase{

    transition:.45s;

}

.album-showcase:hover{

    transform:translateY(-8px);

}

/* Divider */

.music-divider{

    position:relative;

}

.music-divider::before{

    content:"";

    position:absolute;

    left:-40px;
    top:50%;

    width:30px;
    height:1px;

    background:#c49a58;

}

.music-divider::after{

    content:"";

    position:absolute;

    right:-40px;
    top:50%;

    width:30px;
    height:1px;

    background:#c49a58;

}

/* Song Title Animation */

.song-info h4{

    transition:.35s;

}

.song:hover .song-info h4{

    letter-spacing:.6px;

}

/* Duration */

.song-duration{

    transition:.35s;

}

.song:hover .song-duration{

    color:#b8894f;

}

/* Hover Glow */

.song{

    overflow:hidden;

}

.song span{

    position:relative;

    z-index:2;

}

/* Glass Glow */

.song::selection{

    background:transparent;

}

/* ==========================
        ANIMATIONS
========================== */

@keyframes floatOne{

    0%{

        transform:
        translateY(0)
        rotate(-8deg);

    }

    50%{

        transform:
        translateY(-35px)
        rotate(6deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(-8deg);

    }

}

@keyframes floatTwo{

    0%{

        transform:
        translateY(0)
        rotate(10deg);

    }

    50%{

        transform:
        translateY(30px)
        rotate(-8deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(10deg);

    }

}

@keyframes blobMove{

    0%{

        transform:
        translate(0,0)
        scale(1);

    }

    50%{

        transform:
        translate(20px,-20px)
        scale(1.08);

    }

    100%{

        transform:
        translate(0,0)
        scale(1);

    }

}

/* ==========================
        RESPONSIVE
========================== */

@media(max-width:992px){

.music-page::before,
.music-page::after{

    display:none;

}

.music-left{

    text-align:center;

}

.album-information h2::after{

    left:50%;

    transform:translateX(-50%);

}

.music-divider::before,
.music-divider::after{

    display:none;

}

.music-quote{

    margin:auto;

}

}

@media(max-width:768px){

.music-page{

    padding:60px 18px;

}

.music-title{

    font-size:2.4rem;

}

.album-information h2{

    font-size:1.7rem;

}

.music-quote{

    padding:22px;

}

.quote-icon{

    font-size:3rem;

}

.music-quote p{

    font-size:15px;

}

.album-tracklist-container{

    padding:16px;

}

}




.album-tracklist-container{

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(14px);

    border:1px solid rgba(198,154,88,.15);

    border-radius:25px;

    padding:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    /* Makes the list smaller */
    height:620px;

    /* Enables scrolling */
    overflow-y:auto;
    overflow-x:hidden;

    padding-right:10px;

}


/* ======================================
        Center Vertical Divider
====================================== */

.music-container{
    position: relative;
}

.music-container::after{

    content: "";

    position: absolute;

    top: 430px;          /* Adjust vertically */
    left: 33%;           /* Move left/right until centered */

    width: 1px;
    height: 520px;

    background: linear-gradient(
        to bottom,
        transparent,
        rgba(196,154,88,.8),
        transparent
    );

    transform: translateX(-50%);

}



.music-container{
    position: relative;
}

.music-container::after{

    content: "";

    position: absolute;

    top: 70px;          /* Starts much higher */
    left: 33%;

    width: 2px;         /* Thicker line */

    height: 820px;      /* Longer line */

    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(196,154,88,.95) 10%,
        rgba(196,154,88,.95) 90%,
        transparent 100%
    );

    transform: translateX(-50%);

    border-radius: 50px;

}


.music-container{
    position: relative;
}

.music-container::after{

    content: "";

    position: absolute;

    /* Starts near the top */
    top: 40px;

    /* Position between the left and right columns */
    left: 33%;

    transform: translateX(-50%);

    /* Slightly thicker */
    width: 2px;

    /* Almost the full height of the section */
    height: calc(100% - 80px);

    background: linear-gradient(
        to bottom,
        rgba(196,154,88,0),
        rgba(196,154,88,.9) 8%,
        rgba(196,154,88,.9) 92%,
        rgba(196,154,88,0)
    );

    border-radius: 10px;

    box-shadow: 0 0 6px rgba(196,154,88,.25);

}



.music-container{
    position: relative;
}

.music-container::after{

    content: "";

    position: absolute;

    /* Starts directly below the album cover */
    top: 395px;

    /* Between the album and track list */
    left: 33.5%;

    transform: translateX(-50%);

    width: 2px;

    height: calc(100% - 430px);

    background: linear-gradient(
        to bottom,
        rgba(196,154,88,0),
        #c49a58 8%,
        #c49a58 92%,
        rgba(196,154,88,0)
    );

    border-radius: 20px;

    opacity: .75;

}




/* ======================================
        Album Information
====================================== */

.album-information{

    margin:35px auto 45px;

    text-align:center;

    max-width:320px;

    padding:22px 20px;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(12px);

    border:1px solid rgba(196,154,88,.18);

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.album-information h2{

    margin:0 0 10px;

    font-size:1rem;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#b8894f;

}

.album-information p{

    margin:0;

    font-size:1.8rem;

    font-family:Georgia, serif;

    font-weight:500;

    line-height:1.4;

    color:#352314;

}

/* Gold divider */

.album-information::after{

    content:"";

    display:block;

    width:70px;

    height:2px;

    margin:18px auto 0;

    background:#c49a58;

    border-radius:50px;

}


.album-information{

    margin-top: 18px;      /* Reduce the gap */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;

    width: 260px;

    padding: 18px 20px;

    text-align: center;

    background: rgba(255,255,255,.55);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(196,154,88,.15);

    border-radius: 18px;

    box-shadow: 0 18px 35px rgba(0,0,0,.08);

}


.music-title{

    font-family: "Cinzel", serif;

    font-size: 3rem;

    font-weight: 700;

    color: #c9a24d;

    text-align: center;

    margin-bottom: 18px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


/* ======================================
        Bigger Album Showcase
====================================== */

.album-showcase{

    position: relative;

    width: 420px;

    height: 420px;

    margin: 0 auto 40px;

    display: flex;

    justify-content: center;

    align-items: center;

}

/* Album Cover */

.album-cover {
    width: 350px;

    border-radius: 18px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0);

    transform: none !important;

    transition: none !important;
}

/* Vinyl */

.vinyl-record{

    width: 270px;

    height: 270px;

    right: -70px;

    animation: none !important;

    transform: none !important;

}

/* Remove all hover movement */

.album-showcase:hover{

    transform: none !important;

}

.album-showcase:hover .album-cover{

    transform: none !important;

}

.album-showcase:hover .vinyl-record{

    right: -70px;

    transform: none !important;

    animation: none !important;

}

/* Optional: softer shadow under the album */

.album-showcase::after{

    content: "";

    position: absolute;

    bottom: -18px;

    left: 50%;

    transform: translateX(-50%);

    width: 280px;

    height: 35px;

    background: rgba(0,0,0,.15);

    filter: blur(18px);

    border-radius: 50%;

    z-index: -1;

}














.music-right h2 {
    max-width: 650px;
    margin: 20px auto 30px;
    text-align: center;
    font-size: 21.5px;
    line-height: 1.8;
    font-weight: 400;
    color: #888;
    opacity: 0.85;
    letter-spacing: 0.3px;
    text-align: justify;
    text-indent: 40px;  

}

.music-right h2 em {
    font-style: italic;
    color: #666;
}


















/* Hide before animation */

.music-left,
.music-right{
    opacity:0;
    transition:all 1.2s cubic-bezier(.22,1,.36,1);
}

/* Book Side */

.music-left{
    transform:translateX(-120px) scale(.9);
}

/* Song List */

.music-right{
    transform:translateX(120px);
}

/* When visible */

.music-left.show,
.music-right.show{
    opacity:1;
    transform:translateX(0) scale(1);
}

/* Album floating */

.music-left.show .album-cover{
    animation:floatBook 5s ease-in-out infinite;
}

/* Vinyl rotation */

.music-left.show .vinyl-record{
    animation:spinRecord 18s linear infinite;
}

/* Stagger songs */

.song{
    opacity:0;
    transform:translateY(40px);
    transition:.6s ease;
}

.song.show{
    opacity:1;
    transform:translateY(0);
}

/* Floating Book */

@keyframes floatBook{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}

/* Record */

@keyframes spinRecord{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


























/* =====================================================
   SEPARATE PLAYER — 14 SONGS
   Based on the existing .music-player design
===================================================== */

.music-page .fourteen-song-player {

    width: 90%;
    max-width: 900px;

    margin: 35px auto 20px;

    background: #181818;

    border-radius: 25px;

    padding: 25px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6);

    color: #ffffff;

    display: block;

    position: relative;

    z-index: 20;

    box-sizing: border-box;
}


/* =====================================================
   PLAYER INFORMATION
===================================================== */

.music-page .fourteen-player-info {

    text-align: center;

    margin-bottom: 18px;

}


.music-page .fourteen-player-label {

    display: block;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.45);

    margin-bottom: 6px;

}


.music-page #fourteen-player-title {

    margin: 0;

    padding: 0;

    color: #ffffff;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.4;

}


.music-page #fourteen-player-artist {

    margin: 5px 0 0;

    padding: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 13px;

    line-height: 1.4;

}


/* =====================================================
   CONTROLS
===================================================== */

.music-page .fourteen-player-controls {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 20px;

}


.music-page .fourteen-control-btn {

    width: 42px;

    height: 42px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.10);

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 15px;

    transition:
        transform 0.25s ease,
        background 0.25s ease;

}


.music-page .fourteen-control-btn:hover {

    background: rgba(255, 255, 255, 0.20);

    transform: scale(1.08);

}


.music-page .fourteen-play-btn {

    width: 54px;

    height: 54px;

    font-size: 19px;

    background: rgba(255, 255, 255, 0.14);

}


.music-page .fourteen-play-btn:hover {

    background: rgba(255, 255, 255, 0.23);

}


/* =====================================================
   PROGRESS BAR
===================================================== */

.music-page .fourteen-player-progress {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 12px;

}


.music-page .fourteen-player-progress span {

    min-width: 38px;

    color: rgba(255, 255, 255, 0.50);

    font-size: 11px;

    text-align: center;

}


.music-page #fourteen-progress {

    flex: 1;

    width: 100%;

    height: 4px;

    margin: 0;

    padding: 0;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background: rgba(255, 255, 255, 0.18);

    border-radius: 10px;

    outline: none;

}


/* Chrome / Edge / Safari */

.music-page #fourteen-progress::-webkit-slider-thumb {

    appearance: none;

    -webkit-appearance: none;

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: #ffffff;

    cursor: pointer;

}


/* Firefox */

.music-page #fourteen-progress::-moz-range-thumb {

    width: 12px;

    height: 12px;

    border: none;

    border-radius: 50%;

    background: #ffffff;

    cursor: pointer;

}


/* =====================================================
   HIDE NATIVE AUDIO
===================================================== */

.music-page #fourteen-audio {

    display: none;

}


/* =====================================================
   ACTIVE SONG
===================================================== */

.music-page .fourteen-song-active {

    background: rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    transform: translateX(4px);

    transition: 0.25s ease;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {

    .music-page .fourteen-song-player {

        width: 94%;

        padding: 22px 18px;

        margin-top: 30px;

    }


    .music-page #fourteen-player-title {

        font-size: 18px;

    }


    .music-page .fourteen-player-controls {

        gap: 12px;

    }


    .music-page .fourteen-player-progress {

        gap: 7px;

    }

}




.music-left p {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    font-weight: 500;
    color: #888;
    line-height: 1.5;
}