/*
 * MixHub page transitions
 * Progressive enhancement: unsupported browsers simply ignore cross-document
 * view transitions and continue with normal navigation.
 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: mixhub-page-out 120ms cubic-bezier(.4,0,1,1) both;
}

::view-transition-new(root) {
  animation: mixhub-page-in 220ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes mixhub-page-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: .82; transform: translateY(-2px); }
}

@keyframes mixhub-page-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/*
 * DJ Pool already uses its own persistent AJAX router. Only the replaceable
 * content panel transitions; the global player/header remain mounted.
 */
[data-dj-pool-view] .music-sidebar,
[data-dj-pool-view] .music-pool-main,
[data-dj-pool-view].music-creator-page,
[data-dj-pool-view] .creator-content {
  transition:
    opacity 180ms cubic-bezier(.16,1,.3,1),
    transform 180ms cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}

.dj-pool-view-hydrating {
  visibility: visible !important;
  opacity: 0 !important;
  transform: translateY(6px) !important;
  pointer-events: none;
}

html.dj-pool-navigating [data-dj-pool-view] .music-pool-main {
  opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  [data-dj-pool-view] .music-sidebar,
  [data-dj-pool-view] .music-pool-main,
  [data-dj-pool-view].music-creator-page,
  [data-dj-pool-view] .creator-content {
    transition: none !important;
    transform: none !important;
  }

  .dj-pool-view-hydrating {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Defensive sizing for avatar images during persistent-navigation swaps. */
[data-dj-pool-view] .music-sidebar img,
[data-dj-pool-view] .crate-owner-avatar > img,
[data-dj-pool-view] .creator-search-result img {
  max-width: 100%;
  object-fit: cover;
}