@view-transition {
    navigation: auto;
}

@keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-down {
    from { transform: translateY(-2rem); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes slide-up {
    from { transform: translateY(2rem); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes blur-in {
    from { filter: blur(10px); opacity: 0; }
    to   { filter: blur(0); opacity: 1; }
}

/* 🎯 Transitions für benannte Bereiche */

::view-transition-old(main-content),
::view-transition-new(main-content) {
    animation: fade 0.4s ease;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: slide-down 0.4s ease;
}

::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: slide-up 0.4s ease;
}

::view-transition-old(sidebar),
::view-transition-new(sidebar) {
    animation: blur-in 0.3s ease;
}