/* ══════════════════════════════════════════════════════════════
   Vasco — Erscheinung und Bewegung

   Nur die Figur. Sie tritt an drei Stellen auf — auf der Startseite,
   im Editor und im Gespräch —, und an allen dreien muss sie gleich
   aussehen. Stünde das in der Datei des Editors, wäre sie überall
   sonst ein schwarzer Klumpen: kein Visier, keine Augen, keine
   Bewegung.
   ══════════════════════════════════════════════════════════════ */

.vasco{
  display:block;width:100%;height:100%;
  fill:var(--ink);
  overflow:visible;
}
.vasco .v-visier,
.vasco .v-zahnrad > rect,
.vasco .v-zahnrad > circle:not(.v-nabe){ fill:#fff }
.vasco .v-nabe{ fill:var(--ink) }
.vasco .v-auge{ fill:var(--ink) }

/* Alles bewegt sich um einen gemeinsamen Mittelpunkt */
.vasco .v-all{ transform-origin:50px 46px; transform-box:view-box }
.vasco .v-augen{ transform-origin:50px 29px; transform-box:view-box; transition:transform .28s ease-out }
.vasco .v-auge{ transform-origin:center; transform-box:fill-box; transition:transform .1s }
.vasco .v-zahnrad{ transform-origin:50px 50px; transform-box:view-box }
.vasco .v-arm-l{ transform-origin:31px 32px; transform-box:view-box }
.vasco .v-arm-r{ transform-origin:69px 32px; transform-box:view-box }
.vasco .v-kinn{ transform-origin:50px 62px; transform-box:view-box }

/* ── Ruhe: leichtes Atmen, träges Zahnrad ───────────────────── */
.vasco .v-all{ animation:v-atmen 4.4s ease-in-out infinite }
@keyframes v-atmen{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-1.6px) }
}
.vasco .v-zahnrad{ animation:v-drehen 26s linear infinite }
@keyframes v-drehen{ to{ transform:rotate(360deg) } }

/* ── Blinzeln ───────────────────────────────────────────────── */
.vasco.v-blinzelt .v-auge{ transform:scaleY(.12) }

/* ── Denkt: Zahnrad rast, Augen verengt, leichtes Wiegen ────── */
.vasco.v-denkt .v-zahnrad{ animation:v-drehen 1.1s linear infinite }
.vasco.v-denkt .v-auge{ transform:scaleY(.55) }
.vasco.v-denkt .v-all{ animation:v-wiegen 1.6s ease-in-out infinite }
@keyframes v-wiegen{
  0%,100%{ transform:rotate(-1deg) }
  50%    { transform:rotate(1deg) }
}

/* ── Fragt: Kopfneigung, ein Arm hebt sich ──────────────────── */
/* Eine angedeutete Kopfneigung. 6 Grad Dauerschraeglage sahen aus,
   als kippe er um; das Dauerwinken dazu war reine Unruhe. */
.vasco.v-fragt .v-all{ animation:none; transform:rotate(2.5deg) }
.vasco.v-fragt .v-arm-r{ animation:v-winken 2.2s ease-in-out infinite }
@keyframes v-winken{
  0%,100%{ transform:rotate(0) }
  50%    { transform:rotate(-8deg) }
}

/* ── Freut: Hüpfer mit Stauchen und Strecken ────────────────── */
/* Ein knapper Impuls statt eines Huepfers. Stauchen und Strecken
   lasen sich als Zeichentrickfigur — fuer ein Fachwerkzeug zu viel. */
.vasco.v-freut .v-all{ animation:v-huepfen .5s cubic-bezier(.3,.8,.4,1) }
@keyframes v-huepfen{
  0%  { transform:translateY(0) }
  45% { transform:translateY(-3.5px) }
  100%{ transform:translateY(0) }
}
.vasco.v-freut .v-arm-l{ animation:v-winken .62s ease-in-out }
.vasco.v-freut .v-arm-r{ animation:v-winken .62s ease-in-out reverse }
.vasco.v-freut .v-kinn{ animation:v-lachen .62s ease-out }
@keyframes v-lachen{
  0%,100%{ transform:scaleY(1) }
  50%    { transform:scaleY(1.5) }
}

/* ── Unsicher: schiefe Neigung, Augen wandern ───────────────── */
.vasco.v-unsicher .v-all{ animation:none; transform:rotate(-5deg) }
.vasco.v-unsicher .v-augen{ transform:translateX(1.8px) }

@media(prefers-reduced-motion:reduce){
  .vasco *{ animation:none !important }
  .vasco .v-augen{ transition:none }
}

.vasco .v-stift{
  opacity:0; transform-origin:81px 52px; transform-box:view-box;
  transition:opacity .22s;
}
.vasco.v-schreibt .v-stift{ opacity:1 }