/* ===================================================
   SCROLL-REVEAL
   Jeder Inhaltsblock schiebt sich beim Scrollen herein.

   Der Startzustand haengt an html.ov-rv – die Klasse setzt das
   Inline-Skript in header.php. Ohne JavaScript fehlt sie, dann
   bleibt alles ganz normal sichtbar.

   Steuerung im Template ueber data-reveal="up|down|left|right|zoom|greet".
   Den zeitlichen Versatz innerhalb einer Gruppe vergibt script.js
   als --rv-delay; data-reveal-delay="200" ueberschreibt ihn.
   =================================================== */

html.ov-rv [data-reveal] {
    opacity: 0;
    /* Weit auslaufende Kurve (schnell los, lange sanft aus) – das ist
       das, was eine Bewegung nach „geschoben" aussehen laesst statt
       nach „eingeblendet". */
    transition:
        opacity   0.5s  cubic-bezier(0.33, 1, 0.68, 1)   var(--rv-delay, 0ms),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1)    var(--rv-delay, 0ms);
    will-change: opacity, transform;
}

/* Der Weg ist bewusst laenger als ueblich (56 px statt der sonst
   gaengigen 20–30), sonst liest man die Bewegung nicht als Schub.
   Waagerecht etwas weniger, damit auf schmalen Bildschirmen nichts
   aus dem Sichtfeld ragt. */
html.ov-rv [data-reveal="up"]    { transform: translate3d(0, 56px, 0); }
html.ov-rv [data-reveal="down"]  { transform: translate3d(0, -44px, 0); }
html.ov-rv [data-reveal="left"]  { transform: translate3d(-44px, 0, 0); }
html.ov-rv [data-reveal="right"] { transform: translate3d(44px, 0, 0); }
html.ov-rv [data-reveal="zoom"]  { transform: scale(0.92); }

/* Nur aufblenden, ohne Weg: fuer die Kaesten selbst. Ihre Inhalte
   bringen die Bewegung mit – wenn beides schoebe, liefen die
   Bewegungen ineinander und das Ergebnis waere matschig. */
html.ov-rv [data-reveal="fade"] {
    transform: none;
    transition: opacity 0.4s ease-out var(--rv-delay, 0ms);
}

/* Begruessung: Vute kommt von rechts herein und waechst dabei auf */
html.ov-rv [data-reveal="greet"] {
    transform: translate3d(64px, 0, 0) scale(0.9);
    transition:
        opacity   0.6s cubic-bezier(0.33, 1, 0.68, 1) var(--rv-delay, 0ms),
        transform 1s   cubic-bezier(0.16, 1, 0.3, 1)  var(--rv-delay, 0ms);
}

html.ov-rv [data-reveal].rv-in {
    opacity: 1;
    transform: none;
}

/* Nach der Animation nimmt script.js data-reveal wieder weg, damit
   transform frei ist – sonst kaeme das Reveal den :hover-Effekten
   der Karten in die Quere. */

@media (prefers-reduced-motion: reduce) {
    html.ov-rv [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}