/* =====================================================================
   MAX – Character (geteilte Komponente)
   Wiederverwendbare Optik der Max-Figur. Wird von der öffentlichen
   Seite (/max/), der Konfiguration (/max/config/) und dem Startseiten-
   Teaser gemeinsam genutzt. Alles ist unter .max-char gescoped, damit
   keine globalen Regeln andere Seiten der Website beeinflussen.

   Farbe der Augen wird pro Instanz über die CSS-Variablen --eye /
   --eye-glow direkt am Wurzel-Element (.max-char) gesetzt – so können
   mehrere Max-Instanzen unabhängig voneinander existieren.
   ===================================================================== */

.max-char{
  /* Max' Kopf */
  --screen:        #0b1120;
  --helmet-1:      #ffffff;
  --helmet-2:      #d4dae6;
  --helmet-shadow: #aeb6c6;

  /* Aktuelle Augenfarbe – je Emotion per JS gesetzt (Standard: türkis) */
  --eye:      #12c5bc;
  --eye-glow: #12c5bc;

  display:block;
  width:100%;
}

/* Drei Transform-Ebenen, damit sich nichts gegenseitig überschreibt:
   .max-char__flyer → Position (Flug quer)
   .max-char__stage → sanftes Schweben (CSS-Float)
   .max-char__pose  → Kopfneigung / Squash & Stretch / Gesten            */
.max-char__flyer{ will-change:transform; }
.max-char__stage{
  width:100%;
  animation:maxFloat 6s ease-in-out infinite;
  will-change:transform;
}
.max-char--no-float .max-char__stage{ animation:none; }
@keyframes maxFloat{ 0%,100%{transform:translateY(-8px)} 50%{transform:translateY(8px)} }

.max-char__pose{ transform-origin:50% 62%; will-change:transform; }
.max-char.is-flying .max-char__stage{ animation-play-state:paused; }

.max-char svg{ width:100%; height:auto; display:block; overflow:visible; }

/* ── Augen / Emotionen ─────────────────────────────────────── */
.max-char__glyphs{
  filter: drop-shadow(0 0 8px var(--eye-glow)) drop-shadow(0 0 18px var(--eye-glow));
  transition: filter .5s ease;
}
.max-char__glyphs .fill  { fill:var(--eye); stroke:none; transition:fill .5s ease; }
.max-char__glyphs .stroke{ fill:none; stroke:var(--eye); stroke-width:8;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .5s ease; }

.max-char__blink{ transform-box:fill-box; transform-origin:center; }
.max-char.is-blinking .max-char__blink{ animation:maxBlink 190ms ease-in-out; }
@keyframes maxBlink{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.06)} }

.max-char__squint{ transform-box:fill-box; transform-origin:center; transition:transform .18s ease; }
.max-char__eyes{ transition:transform .9s cubic-bezier(.25,.8,.35,1); }
.max-char__antenna-dot{ fill:var(--eye); transition:fill .5s ease; }

/* ── Signature / Markenzeichen ("MAX"-Schriftzug) ──────────── */
.max-char__word{ fill:var(--eye); font-family:'Courier New', monospace; font-weight:700;
  font-size:21px; letter-spacing:6px; opacity:.6;
  filter:drop-shadow(0 0 6px var(--eye-glow)); transition:fill .5s ease; }
.max-char--no-sig .max-char__sig{ display:none; }

/* ── Antriebs-/Schweif-Effekt (nur während des Fluges) ─────── */
.max-char__thrust g{ transition:opacity .15s linear; }

/* ── Bewegungsreduktion respektieren ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  .max-char__stage{ animation:none; }
  .max-char__thrust{ display:none; }
}