/* =====  ANIMATIONS / KEYFRAMES  =====
 * Reusable animation keyframes. */


@keyframes tilt-shaking {
0% { transform: rotate(0deg); }
25% { transform: rotate(10deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}

@keyframes fade-in{

from{
visibility: hidden;
opacity: 0;
}to{
 visibility: visible;
 opacity: 1;
 }

}

@keyframes fade-out{

from{
visibility: visible;
opacity: 1;
}to{
 visibility: hidden;
 opacity: 0;
 }

}

@keyframes scale-up{

50% {
transform: scale(1.1);
}

100% {
transform: scale(1);
}
}

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

/* Element fades in while slightly shrinking from 1.2 -> 1. Generic
 * reveal-variant ohne rotate — fuer alles was "auftauchen" soll.
 * Fuer die gedrehte Variante -> status-enter in database/index.css. */
@keyframes fade-scale-in{
from{
opacity:0;
transform:scale(1.2);
}
to{
opacity:1;
transform:scale(1);
}
}

/* Wandelnder Farbverlauf — braucht background-size groesser als 100%
 * (z.B. 400% 400%) und background-image mit linear-gradient. */
@keyframes gradient-shift{
0%{background-position:0 50%;}
50%{background-position:100% 50%;}
100%{background-position:0 50%;}
}


/* Mobile View only */
@media screen and (max-width: 45rem){

@keyframes scale-down{

70% {
transform: scale(1);
}

100% {
transform: scale(.5);
}
}

@keyframes add{

50% {
transform: scale(.9);
}

100% {
transform: scale(1);
}
}


}


/* Tablet and above */
@media screen and (min-width: 45rem){

@keyframes scale-down{

50% {
transform: scale(1.1);
}

70% {
transform: scale(1);
}

100% {
transform: scale(.5);
}
}

@keyframes add{

50% {
transform: scale(1.4);
}

100% {
transform: scale(1);
}
}
}