/* ============================================================
   Circular audio visualizer ring encircling the B.Ross logo.
   The canvas is centered on the logo and sized relative to the
   viewport height (like the logo), so the ring scales with it.
   Drawn by drawViz() in music.js from the Web Audio analyser.
   ============================================================ */
#header .logos {
  position: relative;
}

#logoViz {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 44vh, 460px);
  height: clamp(150px, 44vh, 460px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

#logoViz.active {
  opacity: 1;
}

#header .logos img {
  position: relative;
  z-index: 1;
  display: block;
}

#header .logos .logo-cloud {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

:root[data-service-view="cloud"] #header .logos .logo-cloud {
  opacity: 1;
}

:root[data-service-view="cloud"] #header .logos .logo-media {
  opacity: 0;
  transition: opacity 1s ease;
}

#header .logos .logo-media {
  transition: opacity 1s ease;
}

/* ============================================================
   Music player card (adapted from Uiverse.io by Vosoone)
   Fade-in wrapper — hidden until the first click on the page.
   .visible is added by startMusic() in music.js on first
   interaction. The timer / progress bar are driven from the
   real <audio id="bga"> element by updateMusicCard() in music.js.
   ============================================================ */
#musicPlayerCard {
  /* Floating, draggable widget kept above everything else (incl. modals). */
  position: fixed;
  left: 50%;
  bottom: 24px;
  width: 420px;
  max-width: 96vw;
  z-index: 2147483000;
  cursor: grab;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
  pointer-events: none;
}

#musicPlayerCard.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* While dragging: no position transition, and JS switches to left/top. */
#musicPlayerCard.dragging {
  transition: opacity 0.8s ease, visibility 0.8s;
  cursor: grabbing;
}

.main-music-card {
  position: relative;
  width: 100%;
  padding: 18px;
  border-radius: 35px;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: -apple-system, system-ui, sans-serif;
  color: white;
  transition: all 0.3s ease;
}

/* Minimize / restore control in the card's top-right corner — a plain
   text character: "−" when expanded, "+" when minimized. */
.card-minimize-btn {
  position: absolute;
  top: 4px;
  right: 16px;
  height: auto;
  padding: 2px 6px;
  border: none;
  background: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.75);
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: color 0.2s;
}

.card-minimize-btn:hover {
  color: #fff;
}

.card-minimize-btn .icon-max {
  display: none;
}

/* Minimized state: show only the control buttons (plus the corner button),
   and shrink the whole widget down to that compact button cluster. */
#musicPlayerCard:has(.main-music-card.minimized) {
  width: auto;
}

.main-music-card.minimized {
  width: auto;
  padding-top: 42px;
}

.main-music-card.minimized .track-info,
.main-music-card.minimized .time-info,
.main-music-card.minimized .progress-bar,
.main-music-card.minimized .tracklist-button,
.main-music-card.minimized .download-button {
  display: none;
}

.main-music-card.minimized .card-minimize-btn .icon-min {
  display: none;
}

.main-music-card.minimized .card-minimize-btn .icon-max {
  display: block;
}

.main-music-card.minimized .control-button {
  width: 38px;
  height: 38px;
}

.main-music-card.minimized .button-row {
  gap: 6px;
}

.main-music-card.minimized .main-control-btns {
  gap: 4px;
}

/* ---- Mini title: scrolling song name shown only when minimized ------- */
.mini-title {
  display: none;
}

.main-music-card.minimized .mini-title {
  display: block;
  position: absolute;
  top: 12px;
  left: 18px;
  right: 42px;
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 88%, transparent 100%);
}

.mini-title-text {
  display: inline-block;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  pointer-events: none;
}

.mini-title-text.scrolling {
  animation: miniTitleScroll var(--mini-scroll-duration, 6s) linear infinite alternate;
}

@keyframes miniTitleScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--mini-scroll-distance, 0px))); }
}

/* ---- Track info: album art, title, artist ---------------------------- */
.track-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.album-art {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.album-art:hover {
  transform: scale(1.05);
}

.track-details {
  flex-grow: 1;
  overflow: hidden;
}

.track-title {
  font-size: 1.3em;
  font-weight: 400;
  overflow: hidden;
}

/* Inner span holds the text; it marquees only when JS marks it .scrolling */
#card-track-title-text {
  display: inline-block;
  white-space: nowrap;
  /* Non-interactive display text. pointer-events:none lets hit-testing fall
     through to the card, and dropping will-change avoids a compositor layer —
     together they stop the cursor from flickering (arrow/hand) as the marquee
     animation runs under a stationary pointer. */
  pointer-events: none;
}

#card-track-title-text.scrolling {
  animation: titleScroll var(--scroll-duration, 8s) linear infinite alternate;
}

/* Ping-pong: slide from the start to the end of the overflow and back */
@keyframes titleScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--scroll-distance, 0px)));
  }
}

.artist-name {
  font-size: 0.9em;
  color: #d1d1d6;
  margin-top: 2px;
}

/* ---- Bouncing level bars (decorative, not tied to real audio) -------- */
.volume-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: 38px;
  height: 32px;
}

.volume-bars .bar {
  width: 3px;
  background: linear-gradient(180deg, #ffc061, #ff8c00);
  border-radius: 2px;
  animation: bounce 0.8s infinite ease-in-out;
  animation-delay: var(--delay);
  animation-play-state: running;
}

@keyframes bounce {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 26px;
  }
}

/* ---- Playback controls: timers, progress bar, buttons ---------------- */
.playback-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8em;
  color: #8e8e93;
}

/* Timer values are set as real text by updateMusicCard() in music.js */
.current-time,
.remaining-time {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

/* progress-fill width and progress-handle left are driven by
   the real audio position in music.js */
.progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ffc061, #ff8c00);
  border-radius: 2px;
  transition: width 0.4s linear;
}

.progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  transition: left 0.4s linear;
}

/* ---- Track list ------------------------------------------------------
   Collapsed to zero height until toggleTracklist() adds .tracklist-open to
   the card, then it expands below the controls. The card is pinned by its
   top edge on open (see pinCardToTop in music.js) so the growth reads as
   the player extending downwards rather than shooting upwards. */
.tracklist {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.33, 0, 0.2, 1),
              opacity 0.22s ease;
}

.main-music-card.tracklist-open .tracklist {
  max-height: 260px;
  opacity: 1;
}

/* Minimized player hides the list entirely. */
.main-music-card.minimized .tracklist {
  display: none;
}

.tracklist-inner {
  max-height: 260px;
  overflow-y: auto;
  padding-top: 10px;
  padding-right: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  /* Vertical drags inside the list are scrolls, not player drags. Paired with
     the drag-handle check in initCardDrag(), which refuses to start a drag
     from here. overscroll-behavior stops a fling at either end from chaining
     out to the page behind the player. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tracklist-inner::-webkit-scrollbar {
  width: 6px;
}

.tracklist-inner::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}

.tracklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s ease, color 0.15s ease;
}

.tracklist-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.tracklist-item .tl-num {
  min-width: 1.7em;
  text-align: right;
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
}

.tracklist-item .tl-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Track that's currently playing. */
.tracklist-item.current {
  background: rgba(255, 163, 26, 0.14);
  color: #ffa31a;
}

.tracklist-item.current .tl-num {
  opacity: 1;
}

/* Pressed state for the list button that opens this panel. */
.tracklist-button.active {
  color: #ffa31a;
}

/* Card pinned by its top edge (so it can grow downwards) — same transition
   handling as .dragging, without the grabbing cursor. */
#musicPlayerCard.pinned {
  transition: opacity 0.8s ease, visibility 0.8s;
}

/* On phones the card is draggable only by the top bar — the strip level with
   the minimize/maximize button and above. Everything below it is content that
   needs to scroll or be tapped. The grab cursor would be a lie there, and a
   thin grip marker hints at where the handle actually is. */
@media screen and (max-width: 736px) {
  #musicPlayerCard {
    cursor: default;
  }

  .main-music-card::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    pointer-events: none;
  }
}


/* ---- Transport buttons: tracklist, prev, play/pause, next, download -- */
.button-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.control-button {
  margin-top: 2%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
  color: #fff;
}

.control-button.play-pause-button:hover,
.control-button.d:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

/* Icons (button size itself is unchanged) */
.control-button svg {
  width: 26px;
  height: 26px;
  /* Keep the icon from being collapsed to 0 width by the flex layout —
     without this the icons intermittently vanish (they render height but
     0 width) while the button circles stay visible. */
  flex-shrink: 0;
}

.control-button.play-pause-button svg {
  width: 30px;
  height: 30px;
}

/* Download button icon bounces while hovered */
.download-button:hover svg {
  animation: downloadBounce 0.78s ease-in-out infinite;
}

@keyframes downloadBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

.main-control-btns {
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 10px;
}

/* Shrink the buttons on narrow screens so all five stay on one row */
@media (max-width: 400px) {
  .control-button {
    width: 44px;
    height: 44px;
  }
  .main-control-btns {
    gap: 6px;
  }
}

.play-pause-button .icon-pause {
  display: none;
}

/* #play-toggle is a hidden checkbox synced to the audio's paused
   state by music.js: checked = paused, unchecked = playing. */
#play-toggle:checked ~ .track-info .volume-bars .bar {
  animation-play-state: paused;
}
#play-toggle:checked ~ .playback-controls .play-pause-button .icon-play {
  display: block;
}
#play-toggle:checked ~ .playback-controls .play-pause-button .icon-pause {
  display: none;
}

#play-toggle:not(:checked) ~ .playback-controls .play-pause-button .icon-play {
  display: none;
}
#play-toggle:not(:checked) ~ .playback-controls .play-pause-button .icon-pause {
  display: block;
}