/* Good Repeats - Augen-Modul, Variante astra-06. Stand: Bewegungsstudie 2026-09-06.
   Die beiden o sind Superellipsen (aussen n 3,2; innen n 2,9), die Innenform ist
   die Pupille. Die Farbflaeche liegt hinter einer Maske, darum koennen Koerper
   und Innenform getrennt wachsen, schrumpfen und wandern.
   Drei Ebenen: .gr-eye (Lage), .gr-body (Groesse), .gr-hole (Innenform).
   Grundhaltung aus der Scrollposition (Klassen gr-eyes--*), darueber der
   seltene Blick (gr-eyes--blick) oder Blickkontakt zum Zeiger (gr-eyes--follow).
   Haltung laeuft ueber `scale`, Blick ueber `translate`, damit sich beides
   nicht ueberschreibt. Position und Breite der Plaetze gehoeren zu style.css. */

.gr-eyes__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1101.14 / 612;
  overflow: visible;
  color: var(--gr-eyes-color, #FF7445);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.gr-eyes__svg .gr-eye,
.gr-eyes__svg .gr-body,
.gr-eyes__svg .gr-hole,
.wordmark-live .gr-eye,
.wordmark-live .gr-body,
.wordmark-live .gr-hole {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Grundhaltung je Abschnitt: nur Groesse, mit Uebergang ---------- */
.gr-eyes__svg .gr-body,
.gr-eyes__svg .gr-hole {
  transition: scale 420ms cubic-bezier(.22, .61, .36, 1);
}

/* attentive: Ruhelage, Standard. */

/* curious = Staunen: Koerper 8 % groesser, Innenform 30 %, die Wand wird duenn. */
.gr-eyes--curious .gr-body { scale: 1.08; }
.gr-eyes--curious .gr-hole { scale: 1.3; }

/* focused = Fokus: nur die Innenform zieht sich zusammen. */
.gr-eyes--focused .gr-hole { scale: .72; }

/* satisfied = Kneifen: Koerper auf 80 % Hoehe, Innenform auf die Haelfte. */
.gr-eyes--satisfied .gr-body { scale: 1.03 .8; transition-duration: 460ms; }
.gr-eyes--satisfied .gr-hole { scale: 1.12 .5; transition-duration: 460ms; }

/* calm = Ruhe: alles ein wenig kleiner. */
.gr-eyes--calm .gr-body { scale: .96; transition-duration: 460ms; }
.gr-eyes--calm .gr-hole { scale: .85; transition-duration: 460ms; }

/* ---------- Seltener Blick: zweimal in 16 s, sonst Stille ---------- */
.gr-eyes--blick .gr-hole {
  animation: gr-blick 16s linear infinite both;
}

@keyframes gr-blick {
  0%     { translate: 0 0; }
  12.5%  { translate: 0 0; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  15.31% { translate: 44px 8px; }
  32.5%  { translate: 44px 8px; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  35.63% { translate: 0 0; }
  75%    { translate: 0 0; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  77.81% { translate: -40px 12px; }
  91.25% { translate: -40px 12px; animation-timing-function: cubic-bezier(.22, .61, .36, 1); }
  94.38% { translate: 0 0; }
  100%   { translate: 0 0; }
}

/* ---------- Blickkontakt: der Berater schaut zum Zeiger (eyes.js schreibt translate) ---------- */
.gr-eyes--follow .gr-hole {
  animation: none;
  transition: scale 420ms cubic-bezier(.22, .61, .36, 1), translate 220ms cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Wortmarke im Kopf: echte Pfade, die beiden o leben ---------- */
.wordmark-live {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5890 / 913;
  overflow: visible;
  fill: currentColor;
}

/* Reduzierte Bewegung: dauerhaft Ruhelage, kein Uebergang, kein Blick.
   Steht bewusst zuletzt und uebersteuert jede Zustandsklasse, auch ohne JavaScript. */
@media (prefers-reduced-motion: reduce) {
  .gr-eyes__svg .gr-eye,
  .gr-eyes__svg .gr-body,
  .gr-eyes__svg .gr-hole,
  .wordmark-live .gr-eye,
  .wordmark-live .gr-body,
  .wordmark-live .gr-hole {
    animation: none;
    transition: none;
    scale: none;
    translate: none;
  }
}