/* Natural High · Der Farbhauch im Zeichen
   ---------------------------------------------------------------------------
   Beim Einatmen kommt ein sehr weicher Schein, bei jedem Atemzug eine andere
   Farbe an einer anderen Stelle. Der Rahmen bleibt gleich, der Zustand darin
   ist jedes Mal neu.

   Auf der Startseite steht dasselbe inline in index.html - dort gehoert es
   zur Buehne des Einstiegs. Hier ist die Fassung fuer alle anderen Seiten:
   das Markup dafuer setzt hauch.js von selbst, keine Seite muss angefasst
   werden.                                                                  */

.zeichen-huelle{position:relative}

.hauch-ring{
  position:absolute; inset:-70%;
  border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle at var(--hauch-x,50%) var(--hauch-y,50%),
             var(--hauch-farbe, transparent) 0%, transparent 58%);
  filter:blur(20px);
  opacity:0;
  animation:hauch-atem 11.5s ease-in-out infinite;
}

/* Das Zeichen selbst muss ueber dem Schein liegen. Im Hero regelt das die
   Buehne des Einstiegs; hier steht es ausdruecklich da, weil die Unterseiten
   keine eigene Ebene haben. */
.zeichen-huelle > .zeichen{position:relative; z-index:1}

/* Die Deckkraft folgt dem Atem: voll eingeatmet ist der Schein am
   staerksten, ausgeatmet ist er ganz weg. Genau dann wird die Farbe
   gewechselt - deshalb kann nichts flackern. */
@keyframes hauch-atem{
  0%    {opacity:0;   transform:scale(.55)}
  45.22%{opacity:.85; transform:scale(1.18)}
  100%  {opacity:0;   transform:scale(.55)}
}

@media (prefers-reduced-motion: reduce){
  .hauch-ring{display:none}
}