/*
  Designschicht, Teil 4 von 4: die Buehne.

  Nur Bewegung, sonst nichts. Diese Datei darf als erste geloescht werden,
  wenn die Seite ruhiger werden soll. Es geht dabei keine Funktion verloren.

  Drei Stufen, gesteuert ueber das Merkmal data-bewegung am html-Element:

    0  ruhig   keine Bewegung, keine Uebergaenge. Fuer schwache Geraete,
               lange offene Fenster und den Akku.
    1  normal  sanfte Uebergaenge. Das ist die Vorgabe.
    2  voll    zusaetzlich ein Pulsieren an den Stellen, die sich gerade aendern.
               Bewusst NICHT als Vorgabe: eine Seite, die stundenlang offen steht,
               soll nicht dauernd rechnen.

  Wer im System "weniger Bewegung" eingestellt hat, bekommt immer Stufe 0.
*/

/* ---- Stufe 0: alles steht still. ---- */

html[data-bewegung="0"] {
  --takt: 0ms;
  --takt-lang: 0ms;
}

html[data-bewegung="0"] *,
html[data-bewegung="0"] *::before,
html[data-bewegung="0"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --takt: 0ms;
    --takt-lang: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Stufe 1 und hoeher: sanfte Uebergaenge. ---- */

@keyframes hereinschieben {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes balkenlauf {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(400%);
  }
}

html:not([data-bewegung="0"]) .meldung {
  animation: hereinschieben var(--takt-lang) ease-out;
}

html:not([data-bewegung="0"]) .kachel,
html:not([data-bewegung="0"]) .positionskarte {
  animation: hereinschieben var(--takt-lang) ease-out;
}

/* Der laufende Balken beim Warten. Er zeigt an, dass etwas passiert,
   ohne einen Fortschritt vorzutaeuschen, den es noch nicht gibt. */
.balken-laeuft {
  width: 25%;
  animation: balkenlauf 1.1s ease-in-out infinite;
}

html[data-bewegung="0"] .balken-laeuft {
  width: 100%;
  animation: none;
  opacity: 0.4;
}

/* ---- Stufe 2: zusaetzliche Betonung. ---- */

@keyframes pulsieren {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--gut-tief);
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

html[data-bewegung="2"] .arbeitsleiste[data-an="true"] {
  animation: pulsieren 1.8s ease-in-out infinite;
}

html[data-bewegung="2"] .laufwert[data-art="gut"] .laufzahl,
html[data-bewegung="2"] .laufwert[data-art="schlecht"] .laufzahl {
  text-shadow: 0 0 12px currentColor;
}

html[data-bewegung="2"] .knopf-haupt:hover:not(:disabled) {
  box-shadow: 0 0 16px var(--gut-tief);
}