/* 1025DEX Community v0.31.35 · css/transitions.css · ausgelagert aus index.html */
/* Native Ansichtsübergänge in aktuellen Android- und Desktop-Browsern. */
main{view-transition-name:app-main}
header{view-transition-name:app-header}
nav{view-transition-name:app-nav}
::view-transition-group(app-main){animation-duration:var(--glide);animation-timing-function:var(--ease-glide)}
/* Ohne bekannte Richtung (Zurueck-Taste, Sprung aus einem Fenster heraus)
   bleibt es beim ruhigen Auf- und Abblenden. */
::view-transition-old(app-main){animation:mainViewOut 180ms ease both}
::view-transition-new(app-main){animation:mainViewIn 360ms var(--ease-fluid) both}
/* Beim Reiterwechsel schiebt sich der Inhalt in dieselbe Richtung, in die
   auch die rote Markierung unten wandert - beides ist dann eine Bewegung
   und nicht zwei, die nebeneinanderher laufen. */
html[data-schub="vor"]::view-transition-old(app-main){animation:schubRaus 210ms var(--ease-glide) both}
html[data-schub="vor"]::view-transition-new(app-main){animation:schubRein 380ms var(--ease-glide) both}
html[data-schub="zurueck"]::view-transition-old(app-main){animation:schubRausR 210ms var(--ease-glide) both}
html[data-schub="zurueck"]::view-transition-new(app-main){animation:schubReinR 380ms var(--ease-glide) both}
/* Kopf und Nav sind auf jedem Reiter identisch - beim Wechsel bleiben sie
   einfach stehen, statt sich zu doppeln oder zu verrutschen. */
::view-transition-group(app-header),
::view-transition-group(app-nav){animation:none}
::view-transition-old(app-header),
::view-transition-old(app-nav){animation:none;opacity:0}
/* Die Markierung unter den Reitern gleitet zur neuen Stelle. */
::view-transition-group(nav-pille){animation-duration:var(--glide);animation-timing-function:var(--ease-glide)}
::view-transition-old(nav-pille),
::view-transition-new(nav-pille){animation:none;width:100%;height:100%}
/* Ohne eigene Namen steckten Symbol und Beschriftung im Schnappschuss der
   Leiste - und der liegt UNTER der wandernden Flaeche. Die Schrift war
   waehrend des Wechsels also von der roten Flaeche verdeckt. Mit eigenem
   Namen wird jeder Reiter einzeln erfasst und liegt darueber. */
nav button[data-v="overview"]{view-transition-name:nav-b1}
nav button[data-v="dex"]     {view-transition-name:nav-b2}
nav button[data-v="finder"]  {view-transition-name:nav-b3}
nav button[data-v="binder"]  {view-transition-name:nav-b4}
nav button[data-v="community"]{view-transition-name:nav-b5}
::view-transition-group(nav-b1),::view-transition-group(nav-b2),
::view-transition-group(nav-b3),::view-transition-group(nav-b4),
::view-transition-group(nav-b5){animation:none}
::view-transition-old(nav-b1),::view-transition-old(nav-b2),
::view-transition-old(nav-b3),::view-transition-old(nav-b4),
::view-transition-old(nav-b5){animation:none;opacity:0}
::view-transition-new(nav-b1),::view-transition-new(nav-b2),
::view-transition-new(nav-b3),::view-transition-new(nav-b4),
::view-transition-new(nav-b5){animation:none}
::view-transition-new(app-header),
::view-transition-new(app-nav){animation:none}
html[data-transition="theme"]::view-transition-old(root){animation:themeOut 260ms ease both}
html[data-transition="theme"]::view-transition-new(root){animation:themeIn 420ms var(--ease-fluid) both}
html[data-transition="theme"]::view-transition-old(app-main),
html[data-transition="theme"]::view-transition-old(app-header),
html[data-transition="theme"]::view-transition-old(app-nav){animation:themeOut 260ms ease both}
html[data-transition="theme"]::view-transition-new(app-main),
html[data-transition="theme"]::view-transition-new(app-header),
html[data-transition="theme"]::view-transition-new(app-nav){animation:themeIn 420ms var(--ease-fluid) both}
@keyframes mainViewOut{to{opacity:0;transform:translateY(-6px) scale(.995)}}
@keyframes schubRaus  {to{opacity:0;transform:translateX(-7%)}}
@keyframes schubRein  {from{opacity:0;transform:translateX(9%)} to{opacity:1;transform:none}}
@keyframes schubRausR {to{opacity:0;transform:translateX(7%)}}
@keyframes schubReinR {from{opacity:0;transform:translateX(-9%)} to{opacity:1;transform:none}}
@keyframes mainViewIn{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:none}}
@keyframes themeOut{to{opacity:0}}
@keyframes themeIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.01ms!important}
}