/* ============================================================
   VIEW TRANSITION — SPA content cross-fade
   ============================================================ */

/* Named transition for the main content area */
.mzk-main-in {
  view-transition-name: mzk-content;
  contain: layout style;
}

/* Only animate content — header/sidebar/player stay static */
::view-transition-old(mzk-content),
::view-transition-new(mzk-content) {
  animation-fill-mode: both;
  will-change: opacity;
}

::view-transition-old(mzk-content) {
  animation: mzk-vt-fade-out 120ms ease-out forwards;
}

::view-transition-new(mzk-content) {
  animation: mzk-vt-fade-in 180ms ease-in forwards;
}

@keyframes mzk-vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes mzk-vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Disable the default cross-fade so our custom animations take over */
::view-transition-group(mzk-content) {
  animation: none;
}

/* Prevent player/header/sidebar from participating in transitions */
#footer-player-container,
#player-mobile,
#player-queue-panel,
.mzk-sidebar-left {
  view-transition-name: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(mzk-content),
  ::view-transition-new(mzk-content) {
    animation-duration: 0.01ms;
  }
}