/* ══════════════════════════════════════════════════════════════════════
   teil-schmuck.css — der animierte Schmuck: ein Auge und eine Brille.
   Gehoert zu inc/schmuck.php (bv_auge(), bv_brille()). Beide Figuren sind
   inline gezeichnetes SVG, nichts wird nachgeladen.

   Christopher, 03.10.2026: „animierte Augen oder Brillen".

   Was hier gilt und woran es sich messen laesst:

   * Bewegt werden ausschliesslich transform und opacity. Die einzige
     Ausnahme ist stroke-dashoffset beim EINMALIGEN Zeichnen der Brillen-
     linie — genau das ist der Auftrag, und sie laeuft nicht endlos.
   * Jede Endlosanimation haelt an, sobald ihre Figur aus dem Sichtfenster
     laeuft: inc/schmuck.php setzt dafuer .bv-ruht (IntersectionObserver).
     Niemand bezahlt Rechenzeit fuer etwas, das niemand sieht. Ohne
     JavaScript faellt das Anhalten weg — CSS allein kann nicht wissen, wo
     das Fenster steht. Dann laufen zwei Animationen auf zwei kleinen SVG
     weiter; das ist der Preis dafuer, dass die Figuren ueberhaupt leben,
     wenn kein Skript da ist.
   * prefers-reduced-motion schaltet die Bewegung AUS, nicht langsamer.
     Dann steht das Auge offen und die Brille fertig gezeichnet da.
   * Ohne JavaScript ebenso: ohne .bv-schmuck--js gibt es keine
     stroke-dasharray, die Linie ist von Anfang an ganz da.
   * Keine neue Farbe — alles kommt aus den Token in grund.css.
     Kein !important, keine neue Schrift, kein CDN.
   * Beide Figuren sind inline-block mit fester Seitenverhaeltnis-Flaeche:
     sie koennen keinen Text verschieben und nichts springen lassen.
   ══════════════════════════════════════════════════════════════════════ */


/* ── 1. Huelle ────────────────────────────────────────────────────────
   Das <span> traegt die Breite, das <svg> fuellt sie. Dadurch steht die
   Hoehe schon vor dem Zeichnen fest (viewBox + height:auto) und der
   Seitenaufbau springt nicht.                                            */

.bv-schmuck{
  display:inline-block;
  position:relative;
  line-height:0;
  max-width:100%;
  vertical-align:middle;
  pointer-events:none;        /* Schmuck faengt keine Klicks ab */
}
.bv-schmuck svg{ display:block; width:100%; height:auto }

.bv-schmuck-auge{ width:clamp(88px,13vw,164px) }
.bv-schmuck-brille{ width:clamp(132px,21vw,248px) }


/* ── 2. Das Auge ──────────────────────────────────────────────────────
   Aufbau von innen nach aussen: Lederhaut, Iris mit goldenen Fasern,
   Pupille, zwei Lichter, darueber die Lidlinie und ein goldener Bogen.
   Die Lidlinie bekommt vector-effect:non-scaling-stroke, damit sie beim
   Lidschlag (scaleY) als klare Linie stehen bleibt, statt duenner zu
   werden und zu verschwinden.                                            */

.bv-auge-weiss{ fill:var(--weiss) }

.bv-iris-innen { stop-color:var(--blau-hell) }
.bv-iris-mitte { stop-color:var(--blau) }
.bv-iris-aussen{ stop-color:var(--text) }

.bv-auge-pupille{ fill:var(--text) }

.bv-auge-rand{
  fill:none; stroke:var(--blau); stroke-width:1.6; opacity:.55;
  vector-effect:non-scaling-stroke;
}

.bv-faser{ fill:none; stroke:var(--gold); stroke-linecap:round; vector-effect:non-scaling-stroke }
.bv-faser-1{ stroke-width:.9; opacity:.62 }
.bv-faser-2{ stroke-width:.7; opacity:.44 }
.bv-faser-3{ stroke-width:.6; opacity:.30 }

.bv-auge-licht{ fill:var(--weiss); opacity:.92 }
.bv-auge-licht-klein{ opacity:.5 }

.bv-auge-lid{
  fill:none; stroke:var(--blau); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.bv-auge-glanz{
  fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round;
  opacity:.8; vector-effect:non-scaling-stroke;
}


/* ── 3. Lidschlag ─────────────────────────────────────────────────────
   Ein Durchlauf dauert 30 s und enthaelt vier Lidschlaege bei 7,2 s /
   14,1 s / 22,8 s / 29,4 s. Die Abstaende sind damit 6,9 s · 8,7 s ·
   6,6 s · 7,8 s — alle im gewuenschten Fenster von 6 bis 9 Sekunden und
   keiner wie der vorige. Ein Lidschlag dauert 0,18 s (0,3 % von 30 s).
   Bewegt wird nur transform.                                             */

@keyframes bv-blinzeln{
  0%     { transform:scaleY(1) }
  23.70% { transform:scaleY(1) }
  24.00% { transform:scaleY(.06) }
  24.30% { transform:scaleY(1) }
  46.70% { transform:scaleY(1) }
  47.00% { transform:scaleY(.06) }
  47.30% { transform:scaleY(1) }
  75.70% { transform:scaleY(1) }
  76.00% { transform:scaleY(.06) }
  76.30% { transform:scaleY(1) }
  97.70% { transform:scaleY(1) }
  98.00% { transform:scaleY(.06) }
  98.30% { transform:scaleY(1) }
  100%   { transform:scaleY(1) }
}

.bv-auge-koerper{
  transform-box:view-box;
  transform-origin:80px 52px;
  animation:bv-blinzeln 30s linear infinite;
}


/* ── 4. Der Blick ─────────────────────────────────────────────────────
   Ohne Maus (Telefon) wandert die Iris langsam von selbst. Die groesste
   Auslenkung ist 2,8 Einheiten der viewBox; der Augapfel hat in dieser
   Zeichnung den Radius 54, also sin⁻¹(2,8/54) = 2,97° — die geforderten
   hoechstens 3 Grad.
   Mit Maus (.bv-schmuck--maus, von inc/schmuck.php gesetzt) uebernimmt
   das Skript und schiebt dieselben zwei Werte als --bv-ax/--bv-ay nach;
   die Traegheit steckt dort in der Glaettung je Bild.                     */

@keyframes bv-blick-wandern{
  0%   { transform:translate(0px,0px) }
  12%  { transform:translate(2.4px,-1.1px) }
  26%  { transform:translate(2.7px,.6px) }
  40%  { transform:translate(.4px,1.6px) }
  54%  { transform:translate(-2.2px,.9px) }
  68%  { transform:translate(-2.6px,-1.2px) }
  82%  { transform:translate(-.6px,-1.7px) }
  100% { transform:translate(0px,0px) }
}

.bv-auge-blick{
  transform-box:view-box;
  animation:bv-blick-wandern 24s ease-in-out infinite;
}
.bv-schmuck--maus .bv-auge-blick{
  animation:none;
  transform:translate(var(--bv-ax,0px),var(--bv-ay,0px));
}


/* ── 5. Die Brille ────────────────────────────────────────────────────
   Feine Goldfassung. Ohne JavaScript steht sie fertig gezeichnet da —
   erst .bv-schmuck--js versteckt die Linie, und erst .bv-sichtbar (die
   Figur steht im Fenster) zeichnet sie. Die Laenge jeder Linie misst das
   Skript mit getTotalLength() und legt sie als --bv-len ab; gelingt das
   nicht, traegt die Linie .bv-ohne-mass und bleibt einfach ganz da.       */

.bv-brille-glas{ fill:var(--blau-zart); opacity:.45 }
.bv-brille-linie{
  fill:none; stroke:var(--gold-tief); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
}

.bv-schmuck--js .bv-brille-linie{
  stroke-dasharray:var(--bv-len,none);
  stroke-dashoffset:var(--bv-len,0px);
}
.bv-schmuck--js .bv-brille-linie.bv-ohne-mass{
  stroke-dasharray:none;
  stroke-dashoffset:0;
}
.bv-schmuck--js .bv-brille-glas{ opacity:0 }

@keyframes bv-zeichnen{
  from{ stroke-dashoffset:var(--bv-len,0px) }
  to  { stroke-dashoffset:0 }
}
@keyframes bv-fuellen{
  from{ opacity:0 }
  to  { opacity:.45 }
}

.bv-schmuck--js.bv-sichtbar .bv-brille-linie{
  animation:bv-zeichnen 1.5s var(--weich) var(--bv-verzug,0s) forwards;
}
.bv-schmuck--js.bv-sichtbar .bv-brille-glas{
  animation:bv-fuellen .9s var(--weich) 1.25s forwards;
}

/* Danach atmet sie sehr langsam: 1,6 % Groessenaenderung in elf Sekunden.
   Nur transform, und erst nachdem die Linie fertig gezeichnet ist.        */
@keyframes bv-atmen{
  0%   { transform:scale(1) }
  50%  { transform:scale(1.016) }
  100% { transform:scale(1) }
}
.bv-brille-atem{
  transform-box:view-box;
  transform-origin:124px 46px;
  animation:bv-atmen 11s ease-in-out 2.2s infinite;
}


/* ── 6. Ausserhalb des Fensters wird angehalten ───────────────────────
   .bv-ruht setzt inc/schmuck.php ueber einen IntersectionObserver. Ohne
   das liefe der Lidschlag auch dann weiter, wenn er zwei Bildschirme
   weiter oben steht.                                                      */

.bv-schmuck.bv-ruht .bv-auge-koerper,
.bv-schmuck.bv-ruht .bv-auge-blick,
.bv-schmuck.bv-ruht .bv-brille-atem,
.bv-schmuck.bv-ruht .bv-brille-linie,
.bv-schmuck.bv-ruht .bv-brille-glas{ animation-play-state:paused }


/* ── 7. Auf dem Telefon sparsamer ─────────────────────────────────────
   Das Atmen der Brille faellt weg: eine Endlosanimation weniger auf dem
   Geraet mit der kleinsten Batterie. Lidschlag und wandernder Blick
   bleiben — sie sind das, was Christopher sehen will, und auf dem Telefon
   gibt es keine Maus, die die Iris bewegen koennte.                       */

@media (max-width:640px){
  .bv-brille-atem{ animation:none }
  .bv-schmuck-auge{ width:clamp(80px,24vw,120px) }
  .bv-schmuck-brille{ width:clamp(120px,40vw,190px) }
}


/* ── 8. prefers-reduced-motion: alles steht still ─────────────────────
   Nicht gedaempft — aus. Und zwar so, dass die Figuren trotzdem fertig
   aussehen: das Auge offen, die Brille vollstaendig gezeichnet und das
   Glas gefuellt.                                                          */

@media (prefers-reduced-motion: reduce){
  .bv-auge-koerper{ animation:none; transform:none }
  .bv-auge-blick{ animation:none; transform:none }
  .bv-schmuck--maus .bv-auge-blick{ animation:none; transform:none }
  .bv-brille-atem{ animation:none; transform:none }

  .bv-schmuck--js .bv-brille-linie{ stroke-dasharray:none; stroke-dashoffset:0 }
  .bv-schmuck--js .bv-brille-glas{ opacity:.45 }
  .bv-schmuck--js.bv-sichtbar .bv-brille-linie{ animation:none; stroke-dashoffset:0 }
  .bv-schmuck--js.bv-sichtbar .bv-brille-glas{ animation:none; opacity:.45 }
}