/* Bewegung, nach den Regeln von Emil Kowalski.

   Die drei Entscheidungen, die er vor jeder Animation verlangt:

   1. SOLL das ueberhaupt animieren?
      Was der Gast hundertmal macht, animiert NICHT. Deshalb hat das
      Ueberfahren einer Listenzeile keine Bewegung, nur einen Farbwechsel --
      und der dauert 120 ms, nicht 250.
      Was er einmal pro Besuch macht -- einen Weg waehlen, die Karte oeffnen --
      darf sich Zeit nehmen und etwas erklaeren.

   2. WOZU?
      Der Kartenflug beim Waehlen erklaert, wo der Weg liegt (Zweck: raeumliche
      Verbindung). Das Zeichnen der Linie zeigt ihre Richtung. Der
      Knopfdruck bestaetigt, dass die Seite zugehoert hat.
      Nichts hier bewegt sich, weil Bewegung huebsch waere.

   3. WELCHE KURVE, WIE LANG?
      Hinein und heraus: ease-out, weil es sofort losgeht.
      Auf dem Bildschirm bewegen: ease-in-out.
      ease-in gibt es hier nirgends -- es faengt langsam an und laesst die
      Seite traege wirken, genau im Moment des Hinsehens.
*/

:root{
  /* Kraeftiger als die eingebauten Kurven -- die sind zu brav. */
  --aus:    cubic-bezier(.23, 1, .32, 1);
  --einaus: cubic-bezier(.77, 0, .175, 1);
  --blatt:  cubic-bezier(.32, .72, 0, 1);   /* Schubladen, iOS-artig */

  --t-druck:  140ms;   /* Knopf gedrueckt */
  --t-nah:    120ms;   /* haeufig: Ueberfahren, Farbe */
  --t-tafel:  200ms;   /* Karteikarte, Aufklapper */
  --t-blatt:  320ms;   /* Blatt von unten */
  --t-flug:   520ms;   /* Kartenflug -- selten, darf erklaeren */
}

/* --- Knoepfe ------------------------------------------------------------
   Jedes druckbare Ding muss auf den Druck antworten. Ohne das fuehlt sich
   eine Seite an, als hoerte sie nicht zu. */
.wk-knopf{transition:background var(--t-nah) ease,
                     color var(--t-nah) ease,
                     border-color var(--t-nah) ease,
                     transform var(--t-druck) var(--aus)}
.wk-knopf:active{transform:scale(.97)}

/* --- Die Karte ---------------------------------------------------------- */
/* Der Flug zum gewaehlten Weg: Bewegung AUF dem Bildschirm, also ease-in-out.
   transform-origin oben links, weil die Buehne von dort aus gerechnet wird. */
.wk-buehne{transition:transform var(--t-flug) var(--einaus);
  transform-origin:0 0;will-change:transform}

/* Ueberfahren einer Zeile faerbt den Weg ein. Das passiert oft -- kurz. */
.wk-weg-linie{transition:stroke var(--t-nah) ease,
                         stroke-width var(--t-nah) ease}

/* Der gewaehlte Weg wird GEZEICHNET, von Anfang bis Ende. Das erklaert seine
   Richtung und dauert deshalb laenger als eine reine Zustandsaenderung.
   stroke-dashoffset ist die einzige Ausnahme von "nur transform und opacity" --
   ohne sie gibt es kein Zeichnen, und es ist genau EINE Linie. */
.wk-weg.zeichnet .wk-weg-linie{
  stroke-dasharray:var(--len,2000);
  stroke-dashoffset:var(--len,2000);
  animation:wk-ziehen 620ms var(--aus) forwards}
@keyframes wk-ziehen{to{stroke-dashoffset:0}}

.wk-massbalken,.wk-masstext{transition:opacity var(--t-nah) ease}

/* --- Listen -------------------------------------------------------------
   Nach einem Filterwechsel kommen die Zeilen gestaffelt herein, 34 ms
   auseinander und hoechstens acht lang. Laenger fuehlt sich die Seite
   langsam an, und die Staffelung darf nie das Klicken aufhalten. */
@keyframes wk-herein{from{opacity:0;transform:translateY(6px)}
                     to{opacity:1;transform:none}}
.wk-staffel > *{animation:wk-herein 260ms var(--aus) both}
.wk-staffel > *:nth-child(1){animation-delay:0ms}
.wk-staffel > *:nth-child(2){animation-delay:34ms}
.wk-staffel > *:nth-child(3){animation-delay:68ms}
.wk-staffel > *:nth-child(4){animation-delay:102ms}
.wk-staffel > *:nth-child(5){animation-delay:136ms}
.wk-staffel > *:nth-child(6){animation-delay:170ms}
.wk-staffel > *:nth-child(7){animation-delay:204ms}
.wk-staffel > *:nth-child(n+8){animation-delay:238ms}

/* --- Karteikarte des gewaehlten Weges ----------------------------------
   Nichts in der Wirklichkeit entsteht aus dem Nichts: sie beginnt bei 0,97,
   nicht bei 0. Und sie waechst aus der Stelle, an der sie angeschlagen ist. */
.wk-tafel{transition:opacity var(--t-tafel) var(--aus),
                     transform var(--t-tafel) var(--aus);
  transform-origin:var(--ursprung, 12% 50%)}
.wk-tafel[data-zu]{opacity:0;transform:scale(.97) translateY(4px);
  pointer-events:none}

/* --- Ueberfahren nur mit echtem Zeigegeraet ---------------------------
   Auf dem Telefon loest eine Beruehrung sonst den Ueberfahren-Zustand aus
   und er bleibt haengen. */
@media (hover:hover) and (pointer:fine){
  .wk-zeile-hover:hover{background:rgba(51,46,42,.04)}
}

/* --- Weniger Bewegung ---------------------------------------------------
   Nicht "keine Bewegung": Farbe und Deckkraft helfen beim Verstehen und
   bleiben. Weg faellt alles, was sich BEWEGT. */
@media (prefers-reduced-motion:reduce){
  .wk-buehne{transition:none}
  .wk-staffel > *{animation:none;opacity:1;transform:none}
  .wk-weg.zeichnet .wk-weg-linie{animation:none;stroke-dasharray:none;
    stroke-dashoffset:0}
  .wk-knopf:active{transform:none}
  .wk-tafel{transition:opacity var(--t-nah) ease}
  .wk-tafel[data-zu]{transform:none}
}