/* =========================================
   RED ECHO – ABOUT US EFFECT
   NAMEN WERDEN "GESCHRIEBEN"
========================================= */


/* =========================================
   1. SCHREIB-EFFEKT

   Der Name ist zuerst von rechts her ganz
   zugeschnitten (clip-path). Der Ausschnitt
   öffnet sich von links nach rechts – so
   wirkt es, als würde der Name von Hand
   geschrieben.

   Die Werte bei inset() bedeuten:
   oben, rechts, unten, links.
   Die negativen Werte lassen Platz für
   Schwünge, die über die Zeile hinausragen.

   "backwards" hält den Namen während der
   Wartezeit versteckt. Danach gelten wieder
   die normalen Regeln aus aboutus.css.
========================================= */

@keyframes redEchoWrite {

    0% {
        clip-path: inset(-0.4em 100% -0.4em -0.3em);
    }

    100% {
        clip-path: inset(-0.4em -0.3em -0.4em -0.3em);
    }
}


/* =========================================
   2. CELLY
   wird zuerst geschrieben
========================================= */

.about__name--celly {
    animation:
        redEchoWrite
        1000ms
        cubic-bezier(0.45, 0, 0.25, 1)
        400ms
        backwards;
}


/* =========================================
   3. MJ
   folgt, sobald Celly fertig ist
========================================= */

.about__name--mj {
    animation:
        redEchoWrite
        800ms
        cubic-bezier(0.45, 0, 0.25, 1)
        1400ms
        backwards;
}


/* =========================================
   4. WARTEN BIS SICHTBAR

   Mit js/reveal.js startet das Schreiben
   erst, wenn man zu den Namen scrollt.
   Bis dahin läuft keine Animation.

   Ohne JavaScript werden die Namen direkt
   beim Laden der Seite geschrieben.
========================================= */

.reveal-on .about__name:not(.is-visible) {
    animation: none;
}


/* =========================================
   5. REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .about__name {
        animation: none;
    }

}