/* The music player: a frosted pill, Apple-ish, small enough to sit in the
   corner without competing with the name.

   PARKED: the player's markup is commented out in index.html, so most of this
   file is dormant. It stays linked because .band__head below lays out the
   projects and mindspace heading rows, player or no player. */

:root {
  /* Its own height, shared by the corner it parks in and the slots it lands
     in, so the three can never drift apart. */
  --player-h: 3.75rem;
}

.player {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%; /* the slot it sits in decides how wide that is */
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(20, 17, 15, 0.07);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 26px -14px rgba(20, 17, 15, 0.38);
}

/* The player's first home: the hero's empty bottom-left. Measured down from
   the top of the first screenful rather than up from the hero's bottom edge,
   because the board can push the hero past the window and a bottom-anchored
   slot would go with it, below the fold where it can't be pressed. */
.player-slot--hero {
  position: absolute;
  left: var(--gutter);
  top: calc(100svh - var(--topbar-h) - var(--player-h) - clamp(2.5rem, 7vh, 4.5rem));
  width: 15.5rem;
}

/* Lifted out of the layout for the trip, and positioned against the document
   rather than the screen: the visitor is often scrolling while it travels, and
   a screen-anchored target would be somewhere else by the time it arrived. */
.player--flying {
  position: absolute;
  z-index: 8;
  margin: 0;
  pointer-events: none;
}

.player__art {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.5rem;
  /* Standing in for cover art, which isn't mine to ship. One per track, so the
     tile changing is part of how the switch reads. */
  background: var(--art);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: background 0.4s var(--ease);
}

.player[data-art="blue"] { --art: linear-gradient(145deg, #4f8ff7 0%, #2b5fd0 45%, #16307a 100%); }
.player[data-art="wave"] { --art: linear-gradient(145deg, #86d7c8 0%, #3a9e91 48%, #124f4d 100%); }

.player__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.player__title,
.player__artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.player__title {
  font-size: 0.86rem;
  font-weight: 600;
}

.player__artist {
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.player__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 17, 15, 0.06);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}

.player__toggle:hover {
  background: rgba(20, 17, 15, 0.1);
  transform: scale(1.06);
}

.player__toggle svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

/* One icon at a time, swapped by the audio's own state. */
.player__icon--pause,
.player--playing .player__icon--play { display: none; }

.player--playing .player__icon--pause { display: block; }

.player__progress {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(20, 17, 15, 0.08);
  overflow: hidden;
}

.player__progress span {
  display: block;
  height: 100%;
  background: var(--ink-soft);
  transform: scaleX(0);
  transform-origin: left;
}

/* Where it comes to rest: the far side of a heading row. Stays a row at every
   width -- the player belongs beside the title, not under it. */
.band__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  /* The heading's own spacing, moved off the title: as a flex item its margins
     would push it around inside the row instead of around the row. */
  margin: 0.5rem 0 clamp(1.5rem, 4vh, 2.5rem);
}

/* The title states its size; the slot takes whatever the row can spare. */
.band__head .band__title {
  flex: none;
  margin: 0;
}

/* Level with the letters, not with the box around them: Anton's cap line sits
   0.31em below the top of its line box, so the slot starts that far down. It
   hangs lower than the title -- the top edge is the line that reads. */
.band__head .player-slot { margin-top: calc(var(--title-size) * 0.31); }

/* Sized to the player even while empty. Hiding one would give a trip a
   zero-sized target to aim at, and reserving the space also means the heading
   row doesn't jump when the player arrives. In a heading row it asks for the
   player's full width and gives ground to the title on a narrow screen. */
.player-slot {
  flex: 0 1 15.5rem;
  height: var(--player-h);
}

@media (max-width: 62rem) {
  /* No dead corner to park in at this width, so the hero's slot rides in the
     flow instead, under the board. */
  .player-slot--hero {
    position: static;
    width: 15.5rem;
  }

  /* Tighter, because the title and the player are sharing a narrow row. */
  .band__head { gap: 1rem; }

  /* Trimmed to leave the track name as much of that row as possible. */
  .player { gap: 0.55rem; }
  .player__art { width: 2.1rem; height: 2.1rem; }

  /* Stacked, the player already sits just above the projects section, so it
     has no trip to make and the row keeps no space for it. An empty box here
     is also how the script knows this isn't a home at this width. */
  .player-slot--wide { display: none; }
}