/* Seitenübergänge */
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
.mobile-nav { view-transition-name: tabbar; }
.bg-motion { view-transition-name: bgmotion; }
::view-transition-old(tabbar) { display: none; }
::view-transition-new(tabbar), ::view-transition-old(bgmotion), ::view-transition-new(bgmotion) { animation: none; }
html[data-vt="fwd"]::view-transition-old(root) { animation: vtOutL .38s cubic-bezier(.32,.72,0,1) both; }
html[data-vt="fwd"]::view-transition-new(root) { animation: vtInR .5s cubic-bezier(.32,.72,0,1) both; }
html[data-vt="back"]::view-transition-old(root) { animation: vtOutR .38s cubic-bezier(.32,.72,0,1) both; }
html[data-vt="back"]::view-transition-new(root) { animation: vtInL .5s cubic-bezier(.32,.72,0,1) both; }
@keyframes vtOutL { to { opacity: 0; transform: translateX(-6%) scale(.98); filter: blur(4px); } }
@keyframes vtInR { from { opacity: 0; transform: translateX(8%); filter: blur(4px); } }
@keyframes vtOutR { to { opacity: 0; transform: translateX(6%) scale(.98); filter: blur(4px); } }
@keyframes vtInL { from { opacity: 0; transform: translateX(-8%); filter: blur(4px); } }
/* Karte → Seite: Karte wächst in die Seite, Rest blendet weich über */
html[data-vt="morph"]::view-transition-old(root) { animation: vtFadeOut .28s ease both; }
html[data-vt="morph"]::view-transition-new(root) { animation: vtRise .55s cubic-bezier(.32,.72,0,1) both; }
@keyframes vtFadeOut { to { opacity: 0; } }
@keyframes vtRise { from { opacity: 0; transform: translateY(22px); } }
::view-transition-group(hero), ::view-transition-group(hero-num) { animation-duration: .6s; animation-timing-function: cubic-bezier(.32,.72,0,1); }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; width: 100%; object-fit: fill; animation-duration: .45s; }
::view-transition-old(hero) { animation-duration: .22s; }