/* ==============================
   GLOBAL STYLES
   ============================== */

*::selection {
  background: transparent;
}
:root {
  --small: 0.55rem;
  --regular: 0.65rem;
  --medium: 1rem;
  --large: 1rem;
  /* --dayColor: #ff7ad5; */
  /* --dayColor: #00bbffdc; */
  --playList: #a6d223c1;
  --archive: #ff9df5;
  --dayColor: var(--archive);
}
*::-webkit-scrollbar {
  display: none;
}

html {
  font-size: 20px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: H-Light;
}

html a {
  color: black;
  text-decoration: none;
}

@font-face {
  font-family: H-Bold;
  src: url("../font/AlteHaasGroteskBold.ttf");
}
@font-face {
  font-family: H-Reg;
  src: url("../font/AlteHaasGroteskRegular.ttf");
}
@font-face {
  font-family: H-Light;
  src: url("../font/TradeGothicLTLight.ttf");
}
@font-face {
  font-family: H-LightOb;
  src: url("../font/TradeGothicLTLight Oblique.ttf");
}
body {
  /* font-size: var(--regular); */
}
/* ==============================
       HEADER
       ============================== */
header {
  font-size: 5rem;
  letter-spacing: -7.75px !important;
  color: var(--dayColor);
  cursor: pointer;
}

.header {
  position: fixed;
  right: 1rem;
  /* transform: translate(-50%, -50%); */
  font-size: 5rem;
  z-index: 9999999999;
  padding-top: 0.15rem;
  padding-bottom: 0.25rem;
  font-family: H-Bold;
}

.header > span {
  /* position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap; */
}

main {
  height: 100dvh;
  overflow: hidden;
}

.marquee-song {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  transform: translateX(0%);
}

.what {
  font-size: 1rem;
  position: absolute;
  right: 0.25rem;
  bottom: -1rem;
}

/* 
  .marquee-active {
    display: block;
    white-space: nowrap;
    animation: scroll-left linear;
    transition: 0.3s ease;
  } */

.marquee-container.marquee-active {
  display: block;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite;
}
.marquee-container {
  display: flex !important;
}

.active-track-marquee {
  animation: scroll-left 20s linear infinite;
}

.jump-track.active-track {
  animation: scroll-left 20s linear infinite;
}
.no-pointer-events {
  pointer-events: none !important;
}

.jump-track {
  cursor: pointer;
}

.player .marquee-container {
}
#marquee-text {
  display: block;
}

.player #marquee-text,
.player #marquee-text-2 {
  padding-right: 1rem;
}
/* ==============================
       CALENDAR WRAPPER
       ============================== */
.calendar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  font-family: H-Light;
  font-size: 0.85rem;
}
@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.actual-month {
  width: 11ch;
  min-height: calc(100dvh / 29) !important;
  max-height: calc(100dvh / 29) !important;
  display: flex;
  align-items: center;
  font-family: H-Light;

  font-weight: 100;
  padding-left: 1ch;
  box-sizing: border-box;
  text-transform: capitalize;
  color: var(--dayColor);
}

.actual-year {
  position: absolute;
  right: 0.5rem;
  color: var(--dayColor);
}

/* ==============================
       KEEN SLIDER STYLES
       ============================== */
#my-keen-slider {
  height: 100dvh;
  width: 100vw;
  flex-direction: column;
  overflow: hidden;
  flex-wrap: nowrap;
}

.keen-slider {
  margin-bottom: 0;
}
.keen-slider__slide:hover {
  opacity: 0.6;
  cursor: pointer;
}

.keen-slider__slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: calc(100dvh / 27.3) !important;
  min-height: calc(100dvh / 27.3) !important;
  max-height: calc(100dvh / 27.3) !important;
  font-family: H-Light;

  font-weight: 100;
}

.keen-slider__slide .number {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.active-slide {
  color: var(--dayColor) !important;
}

.future-slide {
  color: lightgray;
}

/* ==============================
       SLIDE CONTENT
       ============================== */
.slide-content {
  width: 3.5ch;
  text-align: left;
}

.track-calendar-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

/* ==============================
       PLAYER MODULE
       ============================== */
.player-module {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background-color: #f4f4f4d1;
  z-index: 9999999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  width: 20rem;
  padding: 0.3rem;
  padding-bottom: 0rem;
  border-radius: 0.1rem;
  max-width: 50vw;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}

.infos-buttons > div {
  display: flex;
  gap: 0.35rem;
}

.infos-buttons {
  display: flex;
  gap: 1rem;
  position: sticky;
  top: 1rem;
  z-index: 100;
}
.infos-buttons img {
  width: 0.65rem;
}

.amplitude-play-pause {
  width: 1.25rem;
}
.amplitude-playing .play {
  display: none;
}

.amplitude-paused .pause {
  display: none;
}

.menu-nav {
  display: flex;
  justify-content: space-between;
}

.menu-wrapper {
  display: flex;
  gap: 0.3rem;
}

.player-controls {
  display: flex;
  align-items: center;
}

.player-controls svg {
  height: 1rem;
  width: auto;
}

.progress-wrapper {
  display: flex;
  height: 1rem;
  align-items: center;
  flex: 1;
  position: relative;
  cursor: pointer;
  width: 100%;
}
.progress-wrapper:hover {
  opacity: 0.6;
}

.progress-wrapper input {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 10;
  height: 1px;
  background-color: black;
  opacity: 0;
  cursor: pointer;
}

.progress-wrapper progress {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 1px;
  cursor: pointer;
  /* background-color: lightgray; Background color of the progress bar */
  border: none;
  appearance: none; /* Removes default styling */
}

.progress-wrapper progress::-webkit-progress-bar {
  background-color: lightgray; /* Background color for WebKit browsers */
}
@keyframes colorShift {
  0%,
  100% {
    color: rgb(0, 0, 0);
  }
  50% {
    color: var(--dayColor);
  }
}
.keen-slider__slide.actual-playing-track {
  animation: colorShift 2.75s ease-in-out infinite;
}

.progress-wrapper progress::-webkit-progress-value {
  /* background-color: var(--dayColor); */
  background-color: black;
}

.progress-wrapper progress::-moz-progress-bar {
  background-color: black; /* Progress fill color for Firefox */
}

.progress-wrapper .amplitude-buffered-progress::-webkit-progress-value {
  background-color: rgb(
    123,
    123,
    123
  ); /* Progress fill color for WebKit browsers */
}

li {
  list-style: none;
  height: 1rem;
  display: table;
  white-space: nowrap;
}
.progress-wrapper .amplitude-buffered-progress::-moz-progress-bar {
  background-color: rgb(
    123,
    123,
    123
  ); /* Progress fill color for WebKit browsers */
}

.progress-wrapper .amplitude-song-played-progress {
  z-index: 20;
}

.progress-wrapper .amplitude-song-played-progress::-webkit-progress-bar {
  background-color: none;
}

.prev-next-wrapper {
  display: flex;
  gap: 0.25rem;
  padding: 0 0 0 0.25rem;
  box-sizing: border-box;
}
.prev-next-wrapper svg {
  height: 1.25rem !important;
}
.prev-next-wrapper svg:hover {
  opacity: 0.6;
  cursor: pointer;
}
.track-info {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.open-info-track img {
  width: 0.65rem;
  padding-right: 0.5rem;
}
.open-link-track {
  display: none;
}
.open-link-track img {
  width: 0.55rem;
  vertical-align: 25%;
  padding-right: 0.5rem;
}

.title-wrapper {
  display: flex;
  justify-content: space-between;
  /* border-bottom: 1px solid rgb(122, 122, 122); */
}
.title-wrapper:hover {
  opacity: 0.6;
  cursor: pointer;
}
.marquee-song-is-playing {
  height: 1rem;
  display: flex;
  gap: 75%;
  width: 64.5%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 97.5%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 65%,
    rgba(0, 0, 0, 0) 97.5%
  );
  white-space: nowrap;
}

.close-search img {
  width: 0.65rem;
}
.close-search:hover {
  opacity: 0.6;
  cursor: pointer;
}
.archive-infos {
  display: none;
  position: relative;
}

.gradient-wrapper {
  height: 10rem;
  width: 100%;
  position: fixed;
  top: 0;
  background: rgb(244, 244, 244);
  background: linear-gradient(
    180deg,
    rgba(244, 244, 244, 1) 21.5%,
    rgba(244, 244, 244, 0) 100%
  );
  pointer-events: none;
}
.size-up {
  height: 50dvh;
}

.size-up .open-info-track img {
  padding-right: 0rem;
  padding-left: 0.5rem;
  rotate: 180deg;
}
.show {
  display: flex;
  flex-direction: column;
  height: calc(100% - 2rem);
  overflow-x: hidden;

  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 10%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 95%,
    rgba(0, 0, 0, 0) 100%
  );
  padding-bottom: 5rem;
}

.title-fix {
  position: absolute;
  width: calc(100% - 0.6rem);
  bottom: 1.48em;
  z-index: 999999;
}

.active-track {
  color: red;
  color: var(--dayColor);
}
.copy-plyr-controls {
  display: none;
}
.live .copy-plyr-controls {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.25rem;
}

.copy-plyr-controls .progress-wrapper {
  width: 10vw;
}

.copy-plyr-controls .progress-wrapper input {
  opacity: 1;
  width: 100%;
  height: 1px;
  -webkit-appearance: none;
  background: lightgray;
  outline: none;
  transition: background 0.3s;
}

/* Progress bar track */
.copy-plyr-controls .progress-wrapper input::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: lightgray;
  border-radius: 5px;
}

/* Progress thumb (the movable handle) */
.copy-plyr-controls .progress-wrapper input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 6px;
  height: 6px;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -3px; /* Aligns thumb in center */
}

/* Firefox progress bar */
.copy-plyr-controls .progress-wrapper input::-moz-range-progress {
  background: black;
}

/* Firefox track */
.copy-plyr-controls .progress-wrapper input::-moz-range-track {
  background: lightgray;
}

/* Edge/IE progress bar */
.copy-plyr-controls .progress-wrapper input::-ms-fill-lower {
  background: black;
}

.copy-plyr-controls .progress-wrapper input::-ms-fill-upper {
  background: lightgray;
}

.amplitude-wrapper {
  display: flex;
  width: 100%;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
}

.live .amplitude-wrapper {
  /* display: none; */
}

.copy-plyr-controls button {
  padding: 0;
  border: none;
  border-radius: none;
  width: max-content;
  height: 1rem;
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: none;
  background: none;
}

.plyr-custom-control svg {
  width: 0.8rem ;
  height: 1rem !important;
}

/* Video Container */
.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  z-index: -1;
  background-color: white;
  display: none;
}

.isLiveNow .video-container {
  display: block;
}

/* Video Styling */
video {
  position: absolute;
  min-width: 100vw;
  min-height: 100dvh;
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
}

.plyr {
  background-color: white;
}

.duration-wrapper {
  display: flex;
}

.live .duration-wrapper {
  display: none;
}

.live .live-nav {
  color: var(--dayColor);
}

.marquee-wrapper {
  overflow: hidden;
}

.text-content {
  display: inline-block;
}

.mix-title {
  flex: 1;
  overflow: scroll;
  height: 100%;
}

.marquee-wrapper {
  white-space: nowrap;
  position: relative;
  display: flex;
  height: 100%;
  align-items: center;
}

.text-content {
  display: inline-block;
  white-space: nowrap;
  padding-right: 1rem; /* Space between repetitions */
}

.fake-last {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
  opacity: 0;
}

.informations {
  height: 100dvh;
  width: 100vw;
  z-index: 10000;
  background-color: rgba(255, 255, 255, 0.925);
  display: none;
  align-items: flex-start;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  flex-direction: column;
  gap: 1rem;
  padding: 1ch;
  font-size: 0.95rem;
  box-sizing: border-box;
  padding-top: 0.5rem;
}

.informations p {
  width: 45ch;
  line-height: 113%;
}

.show-info .informations {
  display: flex;
}

@media (max-width: 800px) {
  html {
    font-size: 18px;
  }

  .player-module {
    width: 100vw;
    max-width: calc(100vw - 3ch);
    right: 1ch;
    bottom: 1ch;
  }

  .actual-month {
    width: 6ch;
  }

  .active-marquee {
    /* font-size: 13.5px; */
  }

  .plyr-custom-control svg {
    height: 1.25rem !important;
    width: 1rem !important;
  }

  .player {
    display: flex;
    flex-direction: column;
  }

  .live .copy-plyr-controls {
    gap: 0.75rem;
    padding: 0.2rem;
  }

  .slide-content {
    width: 3.5ch;
  }

  .informations {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 3.25rem;
  }

  .informations p {
    width: 100%;
  }

  .search-container.open {
    display: block; /* show when 'open' */
    max-height: 80vh;
    overflow: scroll;
  }
}

.archives-nav a {
  color: lightgray;
  /* pointer-events: none; */
}

.selection-nav a {
  color: lightgray;
  /* pointer-events: none; */
}

.menu-nav nav:last-child {
  color: lightgray;
}

.gray-future .actual-year,
.gray-future .actual-month {
  color: lightgray;
}

.live-nav {
  color: lightgray;
}

.active-nav a {
  color: var(--dayColor);
}

.home .trackSelectionPlaylist {
  display: none;
}
.home-track-selection .archivePlaylist {
  display: none;
}

/* Initially, hide the close button and keep the search symbol visible */
.search-wrapper .close-search {
  display: none;
}

/* When .search-wrapper has the .open class, show the close button, hide the search symbol */
.search-wrapper.open .close-search {
  display: inline-block;
}
.search-wrapper.open .search-symb {
  display: none;
}

/* Optionally, if you want the .search-container to appear/disappear too */
.search-container {
  display: none; /* hidden by default */
}
.search-container.open {
  display: block; /* show when 'open' */
  max-height: 50vh;
  overflow: scroll;
}

.search-container input {
  background: transparent;
  border: none;
  font-family: H-Light;
  color: black;
  outline: none;
  padding: 0;
  font-size: 0.9rem;
  width: 100%;
  position: sticky;
  top: 0;
  background-color: #f4f4f4;
  margin-bottom: 0.5rem;
  padding-bottom: 0.15rem;
  border-bottom: 0.5px solid #d1d1d1;
}

.archive-results-list,
.trackSelection-results-list {
  text-indent: 1rem;
  line-height: 120%;
}

.archive-results-list > li:hover,
.trackSelection-results-list > li:hover {
  opacity: 0.4;
  cursor: pointer;
}

.active-button {
  color: black;
}

.active-button .open-img {
  transform: rotate(-180deg);
}

.infos-buttons {
  color: rgb(154, 154, 154);
  cursor: pointer;
  transform: translateY(-0.5rem);
}



.isLiveNow .live-nav a {
  animation: redToBlack .8s infinite alternate ease-in-out;
}

@keyframes redToBlack {
  from {
    color: var(--archive);
  }
  to {
    color: lightgray;
  }
}

.home-button .live-nav a {
  color: var(--archive) !important;
  animation: none;
}

.home-button .span-live {
  color: var(--archive) !important;
}

.home-button .live-navigation {
  display: none;
}

.home-button  .span-live{
  display: block
}

.span-live {
  display: none;
}

.playing-live .copy-plyr-controls {
  display: flex;
  width: 100%;
  height: 1.25rem;
  gap: 0.5rem;
}

.playing-live .amplitude-wrapper {
  display: none;
}

.playing-live .archives-nav a {
  color: lightgray !important;
}

.plyr-p-pause {
  width: auto !important;
}

.playing-live .track-info {
  display: none;
}

.live-track-info {
  display: none;
}

.playing-live .live-track-info {
  display: block;
}



.live-nav {
  pointer-events: none;
}

.isLiveNow .live-nav {
  pointer-events: all;
}