/* Music Videos section — reuses the color/font tokens defined in style.css */

.music {
  position: relative;
  overflow: hidden;
}

/* Ambient blurred backdrop, scoped to this section only — cycles through heavily
   blurred thumbnails so only their color palette comes through, never any
   recognizable detail. */
#mv-bg-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg);
}
.mv-bg {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(80px) saturate(1.6) brightness(0.85);
  opacity: 0;
  transition: opacity 7s ease;
  animation: mv-bg-drift 22s ease-in-out infinite;
}
.mv-bg.active { opacity: 1; }
@keyframes mv-bg-drift {
  0%   { transform: scale(1.15) translate(0, 0); }
  50%  { transform: scale(1.3) translate(-2.5%, 2%); }
  100% { transform: scale(1.15) translate(0, 0); }
}
#mv-bg-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 10, 0.22);
}

.music .page-head {
  padding: 12vh 5vw 2vh;
  position: relative;
  z-index: 1;
}
.music .page-head h2 {
  font-family: var(--display);
  font-weight: 300;
  font-variant: small-caps;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 0.3em;
  letter-spacing: 0.01em;
}
.music .page-head p {
  margin: 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
  max-width: 640px;
  line-height: 1.5;
}

.mv-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 4vh 0 8vh;
}

/* Exact, gap-free position from the precomputed layout — see js/music.js. */
.mv-item {
  position: absolute;
  cursor: pointer;
}

/* Inset from the outer box by a fixed pixel gutter, which is what creates the
   visible gap between tiles without touching the exact tiling underneath. */
.mv-item-inner {
  position: absolute;
  inset: 2.5px;
  overflow: hidden;
  background: #141412;
}

.mv-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.4s ease;
  filter: grayscale(0.15);
}
.mv-item img.loaded { opacity: 1; transform: scale(1); }
.mv-item:hover img { transform: scale(1.04); filter: grayscale(0); }

.mv-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.mv-song {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--fg);
  font-weight: 400;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mv-item:hover .mv-song { opacity: 1; transform: translateY(0); }
.mv-artist {
  text-align: right;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mv-item.mv-small .mv-song, .mv-item.mv-small .mv-artist { font-size: 0.6rem; }

.mv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(11,11,10,0.55);
  border: 1px solid rgba(243,241,236,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mv-item:hover .mv-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mv-play::after {
  content: '';
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent var(--fg);
  margin-left: 2px;
}
.mv-item.mv-small .mv-play {
  width: 18px;
  height: 18px;
}
.mv-item.mv-small .mv-play::after {
  border-width: 3px 0 3px 5px;
}

/* Video modal */
.mv-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 5, 0.6);
}
.mv-modal.open { display: flex; }
.mv-modal-inner {
  width: min(88vw, 1100px);
  aspect-ratio: 16 / 9;
  background: #000;
  position: relative;
}
.mv-modal-inner iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.mv-close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: var(--fg);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.mv-close:hover { opacity: 1; }

/* Mobile — the desktop treemap (see js/music.js) packs all 65 videos into a
   fixed 16:9 box, so on a narrow screen every tile shrinks to fit rather than
   the page growing taller. Below this width, js/music.js skips the computed
   x/y/w/h entirely and just appends items in normal flow; this turns that
   into a plain 2-column grid of real, readably-sized 16:9 tiles that scrolls
   as far as it needs to. Desktop layout is completely untouched above this
   breakpoint. */
@media (max-width: 640px) {
  /* Bounded instead of inset:0, since inset:0 would stretch this to cover
     the now much-taller scrolling grid and badly distort the blurred
     thumbnails backing it — it's only ever meant to color the top of the
     section, not the whole page. */
  #mv-bg-container {
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 70vh;
  }

  .mv-grid {
    aspect-ratio: unset;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 3vh 0 6vh;
  }

  .mv-item {
    position: relative;
    aspect-ratio: 16 / 9;
  }

  .mv-item-inner {
    inset: 0;
  }

  /* No real hover on touch — song title and play glyph default to visible
     instead of only revealing on a hover that will never fire. */
  .mv-song, .mv-play {
    opacity: 1;
    transform: none;
  }
}