/* =======================
   Default variables
   ======================= */
:root {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* =======================
   Themes
   ======================= */

/* Classic Titanium (default) */
:root[data-theme="classic-titanium"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 255, 255, 0.356) 0%, rgba(0, 0, 0, 0.445) 56%, rgba(255, 255, 255, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 255, 255, 0.63) 0%, rgba(0, 0, 0, 0.767) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 255, 255, 0.527) 0%, rgba(129, 129, 129, 0.555) 56%, rgba(255, 255, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(190, 190, 190, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(255, 255, 255);
  --accent-colors: rgb(221, 255, 99);
  --navbar-color: rgb(36, 36, 36);
}

/* Aqua Jelly */
:root[data-theme="aqua-jelly"] {
  --gradient-color-main: linear-gradient(355deg, rgba(73, 188, 255, 0.356) 0%, rgba(2, 100, 145, 0.445) 56%, rgba(157, 255, 214, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(0, 135, 145, 0.63) 0%, rgba(15, 206, 181, 0.233) 56%, rgba(40, 248, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(118, 200, 255, 0.527) 0%, rgba(4, 161, 209, 0.555) 56%, rgba(60, 232, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(13, 88, 65, 0.329);
  --border-color-inactive: rgba(255, 255, 255, 0.267);
  --svg-icons-active: rgb(158, 255, 234);
  --accent-colors: rgb(97, 255, 221);
  --navbar-color: rgb(0, 150, 170);
}

/* Crimson Love */
:root[data-theme="crimson-love"] {
  --gradient-color-main: linear-gradient(355deg, rgba(224, 0, 0, 0.356) 0%, rgba(255, 29, 29, 0.664) 56%, rgba(255, 27, 27, 0.753) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 80, 80, 0.63) 0%, rgba(179, 10, 10, 0.767) 56%, rgba(255, 83, 83, 0.459) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 0, 0, 0.527) 0%, rgba(255, 59, 59, 0.555) 56%, rgba(255, 136, 136, 0.61) 100%);
  --svg-icons-inactive: rgba(49, 28, 28, 0.329);
  --border-color-inactive: rgba(99, 19, 19, 0.267);
  --svg-icons-active: rgb(255, 223, 223);
  --accent-colors: rgb(255, 121, 104);
  --navbar-color: rgb(114, 20, 20);
}

/* Sunset Kiss */
:root[data-theme="sunset-kiss"] {
  --gradient-color-main: linear-gradient(355deg, rgba(255, 227, 68, 0.356) 0%, rgba(255, 130, 28, 0.445) 56%, rgba(241, 255, 112, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(255, 189, 114, 0.63) 0%, rgba(175, 140, 43, 0.945) 56%, rgb(255, 187, 147) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(255, 204, 64, 0.527) 0%, rgba(255, 121, 44, 0.836) 56%, rgba(252, 255, 55, 0.61) 100%);
  --svg-icons-inactive: rgba(151, 72, 19, 0.329);
  --border-color-inactive: rgba(104, 50, 14, 0.267);
  --svg-icons-active: rgb(255, 223, 41);
  --accent-colors: rgb(255, 187, 86);
  --navbar-color: rgb(201, 99, 40);
}

/* Midnight Sky */
:root[data-theme="midnight-sky"] {
  --gradient-color-main: linear-gradient(355deg, rgba(21, 14, 112, 0.815) 0%, rgba(26, 52, 92, 0.815) 56%, rgba(31, 15, 172, 0.884) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(16, 25, 153, 0.63) 0%, rgba(47, 41, 100, 0.788) 56%, rgba(71, 58, 252, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(19, 1, 43, 0.527) 0%, rgba(53, 67, 131, 0.555) 56%, rgba(79, 82, 231, 0.61) 100%);
  --svg-icons-inactive: rgba(84, 85, 177, 0.329);
  --border-color-inactive: rgba(73, 41, 190, 0.267);
  --svg-icons-active: rgb(144, 167, 230);
  --accent-colors: rgb(140, 76, 224);
  --navbar-color: rgb(9, 8, 88);
}

/* Bubblegum Flavor */
:root[data-theme="bubblegum-flavor"] {
  --gradient-color-main: linear-gradient(355deg, rgba(212, 78, 172, 0.356) 0%, rgba(185, 40, 120, 0.445) 56%, rgba(255, 133, 235, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(166, 215, 255, 0.63) 0%, rgba(15, 97, 129, 0.801) 56%, rgba(176, 243, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(88, 222, 255, 0.747) 0%, rgba(255, 171, 251, 0.836) 56%, rgba(134, 255, 249, 0.808) 100%);
  --svg-icons-inactive: rgba(190, 107, 158, 0.329);
  --border-color-inactive: rgba(172, 104, 166, 0.267);
  --svg-icons-active: rgb(255, 211, 226);
  --accent-colors: rgb(156, 255, 250);
  --navbar-color: rgb(61, 116, 189);
}

/* Serene Woods */
:root[data-theme="serene-woods"] {
  --gradient-color-main: linear-gradient(355deg, rgba(2, 77, 2, 0.685) 0%, rgba(42, 158, 67, 0.795) 56%, rgba(173, 247, 151, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(241, 197, 139, 0.63) 0%, rgba(119, 86, 24, 0.863) 56%, rgba(233, 186, 132, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(26, 202, 35, 0.527) 0%, rgba(22, 122, 22, 0.555) 56%, rgba(119, 255, 153, 0.61) 100%);
  --svg-icons-inactive: rgba(131, 161, 118, 0.445);
  --border-color-inactive: rgba(102, 138, 93, 0.753);
  --svg-icons-active: rgb(238, 184, 134);
  --accent-colors: rgb(162, 190, 125);
  --navbar-color: rgb(82, 72, 53);
}

/* Royal Genesis */
:root[data-theme="royal-genesis"] {
  --gradient-color-main: linear-gradient(355deg, rgba(187, 101, 148, 0.356) 0%, rgba(69, 10, 83, 0.445) 56%, rgba(255, 242, 250, 0.767) 100%);
  --gradient-color-secondary: linear-gradient(355deg, rgba(242, 188, 255, 0.63) 0%, rgba(63, 15, 55, 0.349) 56%, rgba(255, 255, 255, 0.87) 100%);
  --gradient-color-bg: linear-gradient(355deg, rgba(189, 69, 219, 0.527) 0%, rgba(199, 134, 185, 0.555) 56%, rgba(233, 152, 255, 0.61) 100%);
  --svg-icons-inactive: rgba(100, 33, 95, 0.329);
  --border-color-inactive: rgba(121, 31, 106, 0.267);
  --svg-icons-active: rgb(226, 182, 255);
  --accent-colors: rgb(252, 216, 255);
  --navbar-color: rgb(84, 38, 88);
}


* {
  margin: 0;
  padding: 0;
  font-family: Oxanium;
  -webkit-tap-highlight-color: transparent;
  font-weight: 300;
}

body {
    background: transparent;
}

section {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

a {
  text-decoration: none;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}


/*song obssessions styles*/
.albums-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

.albums-nest {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: clamp(0.625rem, 0.467rem + 0.6868vw, 1.25rem);
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100dvh;
  padding: clamp(0.5rem, 0.2313rem + 1.1681vw, 1.563rem);
  box-sizing: border-box;
  overflow: hidden;
}

.album-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 0.6209rem + 1.6484vw, 2.5rem);
  grid-column: span 2 / span 2;
  grid-row: span 2 / span 2;
  background-color: var(--svg-icons-inactive);
  border: 2px var(--border-color-inactive);
  border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  padding: 2rem;
  box-sizing: border-box;
}

.album-title h1 {
  font-size: clamp(1.5rem, 0.9945rem + 2.1978vw, 3.5rem);
  text-align: right;
  color: var(--accent-colors);
  font-weight: bold;
}

.album-title img {
  height: clamp(4rem, 2.989rem + 4.3956vw, 8rem);
}



.album-carousel {
  grid-column: span 3 / span 3;
  grid-row: span 2 / span 2;
  grid-column-start: 3;
  background-color: var(--svg-icons-inactive);
  border: 2px var(--border-color-inactive);
  border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  padding: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  box-sizing: border-box;
  overflow: hidden;        /* 🔑 hide overflow for infinite loop */
  display: flex;
  align-items: center;
  position: relative;
}

.artist-grid {
  display: flex;
  flex-direction: row;
  gap: clamp(0.3rem, 0.0599rem + 1.044vw, 1.25rem);
  will-change: transform;  /* 🔑 smoother GPU animation */
  overflow: hidden;
}

.artist-card {
  flex: 0 0 35rem;      /* ✅ now each card is exactly 50rem wide */
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: center;
  background-image: var(--gradient-color-secondary);
  border: 2px solid var(--border-color-inactive);
  border-radius: 2rem;
  overflow: hidden;
  height: 15rem;
}

.artist-desc {
  width: 100%;
  padding-right: 1rem;
}

.artist-rank, .album-name, .album-artist, .artist-plays {
  color: var(--svg-icons-active);
  font-weight: bold;
}

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

.album-name {
  font-size: 1.5rem;
}

.artist-card img {
  height: 15rem;
}

.skeleton {
  background-color: var(--navbar-color);
  width: 90%;
  margin-bottom: .4rem;
}


.album-art-skeleton {
  width: 15rem;
  height: 15rem;
  background-size: 400% 100%;
  flex-shrink: 0;
  background-color: var(--navbar-color);
}

.album-reco {
  grid-column: span 5 / span 5;
  grid-row: span 3 / span 3;
  grid-row-start: 3;
  background-color: var(--svg-icons-inactive);
  border: 2px var(--border-color-inactive);
  overflow: hidden;
  border-radius: clamp(1rem, 0.7473rem + 1.0989vw, 2rem);
  padding-right: clamp(0rem, -0.3159rem + 1.3736vw, 1.25rem);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
} 

.album-reco h1 {
  padding: 1rem 0 0 0;
  text-align: center;
  width: auto;
  font-size: clamp(1.5rem, 1.1209rem + 1.6484vw, 3rem);
  color: var(--accent-colors);
  font-weight: 500;
  text-transform: uppercase;
}

.album-reco-scroller {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 
  1rem
  clamp(1rem, 0.4629rem + 2.3352vw, 3.125rem)
  1rem
  clamp(1rem, 0.4629rem + 2.3352vw, 3.125rem);
  box-sizing: border-box;
  display: grid;
  gap: clamp(0.5rem, 0.1209rem + 1.6484vw, 2rem);
  grid-template-columns: repeat(auto-fit,minmax(clamp(250px, 30vw, 300px), 1fr));
  grid-auto-rows: clamp(18rem, 17.4945rem + 2.1978vw, 20rem);
  scrollbar-gutter: stable;
}

.album-items {
  background-color: transparent;
  display: flex;
  border-radius: 1rem;
  overflow: hidden;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  border: solid 2px var(--border-color-inactive);
  cursor: pointer;
}

.album-items-title {
  bottom: 0;
  position: absolute;
  width: 100%;
  background-color: color-mix(in srgb, var(--navbar-color) 80%, transparent);
  backdrop-filter: blur(5px);
  height: 7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  border-radius: 1rem;
  z-index: 9999;
}

.album-items-title h1{
  font-size: 1.2rem;
  text-align: left;
  color: var(--accent-colors);
  text-transform: capitalize;
}

.album-items-title h2 {
  font-size: 1rem;
  color: var(--accent-colors);
}

.album-items img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 1;
  object-fit: cover;
  border-radius: 1rem;
}

.album-reco-scroller::-webkit-scrollbar {
  width: 15px;             
}

.album-reco-scroller::-webkit-scrollbar-track {
  background: transparent;   
  margin: 15px;      
}

.album-reco-scroller::-webkit-scrollbar-thumb {
  background: var(--accent-colors);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: content-box;
}

.tooltip {
  position: fixed;
  background: var(--accent-colors);
  color: var(--navbar-color);
  font-size: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.5rem;
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  animation: fadeIn 0.2s ease;
  font-weight: 500;
  text-transform: capitalize;
}



@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -90%); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}


@media (max-width: 900px) {
  .album-title {
    flex-direction: column-reverse;
  }

  .album-title h1 {
    text-align: center;
  }

  .artist-card {
    flex-direction: column;
    flex: 0 0 clamp(10rem, 9.2418rem + 3.2967vw, 13rem);
    height: clamp(12rem, 10.4835rem + 6.5934vw, 18rem);
    gap: clamp(0.7rem, 0.6242rem + 0.3297vw, 1rem);
    box-sizing: border-box;
    border-radius: 1rem;
    padding: 1rem;
  }

  .artist-card img {
    height: clamp(6rem, 4.989rem + 4.3956vw, 10rem);
    border-radius: clamp(0.5rem, 0.3736rem + 0.5495vw, 1rem);
  }

  .album-art-skeleton {
    width: clamp(6rem, 4.989rem + 4.3956vw, 10rem);
    height: clamp(6rem, 4.989rem + 4.3956vw, 10rem);
  }

  .artist-desc {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100%;
    padding-right: 0;
  }

  .artist-rank, .artist-plays {
    display: none;
  }

  .album-name, .album-artist {
    font-size: clamp(0.6rem, 0.4989rem + 0.4396vw, 1rem);
  }

  .skeleton {
  width: 100%;
  }

}

@media (max-width: 600px) {
  .album-reco-scroller::-webkit-scrollbar {
  width: 0;             
  }
}