/* Preserve the existing visual language; only coordinate native page snapshots. */
html.nav-transition-quiet .card,
html.nav-transition-quiet .card .cover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
}
html.nav-transition-quiet .card::before { opacity: 0 !important; transition: none !important; }
html.nav-transition-quiet .card { box-shadow: none !important; }
/* Page switch: a short directional push. Going deeper, the old page drifts left and fades
   while the new one slides in from the right; going back mirrors it; a language switch is a
   plain crossfade. The header stays put and the cover morphs on its own layer. */
html[data-nav-direction]::view-transition-group(song-cover) {
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
html[data-nav-direction]::view-transition-old(root),
html[data-nav-direction]::view-transition-new(root) { mix-blend-mode: normal; }
html[data-nav-direction]::view-transition-old(root) {
    animation: nav-page-out-forward 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
html[data-nav-direction]::view-transition-new(root) {
    animation: nav-page-in-forward 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
html[data-nav-direction="back"]::view-transition-old(root) { animation-name: nav-page-out-back; }
html[data-nav-direction="back"]::view-transition-new(root) { animation-name: nav-page-in-back; }
html[data-nav-direction="swap"]::view-transition-old(root) { animation: nav-page-fade-out 180ms ease both; }
html[data-nav-direction="swap"]::view-transition-new(root) { animation: nav-page-fade-in 260ms ease 60ms both; }
@keyframes nav-page-out-forward { to { opacity: 0; transform: translateX(-32px) scale(0.99); } }
@keyframes nav-page-in-forward { from { opacity: 0; transform: translateX(48px); } }
@keyframes nav-page-out-back { to { opacity: 0; transform: translateX(32px) scale(0.99); } }
@keyframes nav-page-in-back { from { opacity: 0; transform: translateX(-48px); } }
@keyframes nav-page-fade-out { to { opacity: 0; } }
@keyframes nav-page-fade-in { from { opacity: 0; } }
/* The same artwork moves once rather than two fading copies crossing mid-flight. */
html[data-nav-direction]::view-transition-old(song-cover) { display: none; }
html[data-nav-direction]::view-transition-new(song-cover) {
    animation: none;
    height: 100%;
    object-fit: cover;
}
/* Ancestor overflow/radius is not inherited by the promoted image snapshot.
   Clip its image-pair layer itself, with the same timing as the geometry morph. */
html[data-nav-direction]::view-transition-image-pair(song-cover) {
    overflow: clip;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
    animation: nav-cover-round-open 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
html[data-nav-direction="back"]::view-transition-image-pair(song-cover) {
    animation-name: nav-cover-round-back;
}
@keyframes nav-cover-round-open {
    from { border-radius: 12px; clip-path: inset(0 round 12px); }
    to { border-radius: 16px; clip-path: inset(0 round 16px); }
}
@keyframes nav-cover-round-back {
    from { border-radius: 16px; clip-path: inset(0 round 16px); }
    to { border-radius: 12px; clip-path: inset(0 round 12px); }
}
html[data-nav-direction]::view-transition-group(site-header) { animation-duration: 420ms; }
html[data-nav-direction]::view-transition-old(site-header) { display: none; }
html[data-nav-direction]::view-transition-new(site-header) { animation: none; }
/* Keep the scrim/blur in the root snapshot; never lift a crisp card above it. */
html.nav-transition-quiet #downloadModal,
html.nav-transition-quiet #downloadModal .modal-content {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
}
html[data-nav-modal]::view-transition-group(download-dialog) { animation-duration: 420ms; }
html[data-nav-modal="return"]::view-transition-old(root) {
    animation: nav-dialog-page-out 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    mix-blend-mode: normal;
}
html[data-nav-modal="return"]::view-transition-new(download-dialog) {
    animation: nav-dialog-in 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes nav-dialog-page-out {
    from { opacity: 1; filter: blur(0); }
    to { opacity: 0; filter: blur(5px); }
}
@keyframes nav-dialog-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    20% { opacity: 0.25; }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-nav-direction]::view-transition-group(*),
    html[data-nav-direction]::view-transition-image-pair(*),
    html[data-nav-direction]::view-transition-old(*),
    html[data-nav-direction]::view-transition-new(*) { animation: none !important; }
}