/* Einblenden beim Hereinscrollen - Ersatz fuer wow.js + animate.css.
 *
 * animate.css brachte rund 56 kB fuer fuenf benutzte Animationen mit, wow.js
 * weitere 8 kB und eine jQuery-Abhaengigkeit. Hier stehen genau die fuenf.
 *
 * Ein Unterschied zu wow.js mit Absicht: dort wurden die Elemente bis zum
 * Einblenden auf visibility:hidden gesetzt, wodurch sie aus dem
 * Bedienhilfen-Baum fielen - ein Screenreader fand die Galerielinks dann nicht.
 * Hier wird nur die Deckkraft heruntergesetzt; die Elemente bleiben die ganze
 * Zeit vorhanden.
 */

.wow { opacity: 0; }
.wow.sichtbar { opacity: 1; animation-fill-mode: both; }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt den Inhalt
   sofort und ohne Animation. Zuvor lief wow.js unabhaengig davon. */
@media (prefers-reduced-motion: reduce) {
    .wow { opacity: 1; }
    .wow.sichtbar { animation: none !important; }
}

/* Ohne JavaScript darf nichts unsichtbar bleiben. */
.kein-js .wow { opacity: 1; }

.wow.sichtbar.fadeIn       { animation-name: birke-fadeIn; }
.wow.sichtbar.flipInX      { animation-name: birke-flipInX; backface-visibility: visible !important; }
.wow.sichtbar.slideInLeft  { animation-name: birke-slideInLeft; }
.wow.sichtbar.slideInRight { animation-name: birke-slideInRight; }
.wow.sichtbar.zoomIn       { animation-name: birke-zoomIn; }

@keyframes birke-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes birke-flipInX {
    from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
    40%  { transform: perspective(400px) rotateX(-20deg); }
    60%  { transform: perspective(400px) rotateX(10deg); opacity: 1; }
    80%  { transform: perspective(400px) rotateX(-5deg); }
    to   { transform: perspective(400px); opacity: 1; }
}
/* translate3d wie in animate.css. Die Elemente stehen in Spalten mit
   overflow-Begrenzung, deshalb entsteht dabei keine seitliche Bildlaufleiste -
   tests/browser/seite.js prueft das ausdruecklich nach. */
@keyframes birke-slideInLeft {
    from { transform: translate3d(-100%, 0, 0); opacity: 0; visibility: visible; }
    to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes birke-slideInRight {
    from { transform: translate3d(100%, 0, 0); opacity: 0; visibility: visible; }
    to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes birke-zoomIn {
    from { transform: scale3d(.3, .3, .3); opacity: 0; }
    50%  { opacity: 1; }
    to   { transform: scale3d(1, 1, 1); opacity: 1; }
}