@layer components {
  .logo {
    width: 100%;
    height: auto;
    overflow: visible;
    filter: var(--logo-glow);
    transition: filter var(--speed) var(--ease);
  }

  /*
   * Jede Figur hat vier Zustandsvariablen. Die Regeln weiter unten setzen nur
   * diese Variablen — so bleibt die Kaskade überschaubar, statt dass sich
   * Hover-, Fokus- und Auswahl-Selektoren gegenseitig in der Spezifität schlagen.
   */
  .figure {
    --fig-color: var(--logo-fill);
    --fig-eye: var(--color-accent);
    --fig-opacity: 1;
    --fig-scale: 1;
    --fig-lift: 0px;

    cursor: pointer;
  }

  .figure__hit {
    fill: transparent;
  }

  .figure__inner {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    opacity: var(--fig-opacity);
    transform: translateY(var(--fig-lift)) scale(var(--fig-scale));
    transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
  }

  .figure__skull,
  .figure__body {
    fill: var(--fig-color);
    transition: fill var(--speed) var(--ease);
  }

  .figure__cut {
    fill: var(--logo-cut);
    transition: fill var(--speed) var(--ease);
  }

  /* Die Transition glättet die rAF-Updates der Blickverfolgung zu einem Nachziehen. */
  .figure__head,
  .figure__eyes {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    will-change: transform;
    transition: transform 340ms var(--ease);
  }

  .figure__eyes circle {
    fill: var(--fig-eye);
    opacity: var(--eye-opacity);
    transition: fill var(--speed) var(--ease), opacity var(--speed) var(--ease);
  }

  [data-theme="dark"] .figure__eyes {
    filter: drop-shadow(0 0 5px var(--fig-eye));
  }

  /* Auswahl — bleibt bestehen, auch wenn der Zeiger weg ist. */
  .logo[data-selected] .figure {
    --fig-opacity: var(--figure-dim);
    --fig-scale: 0.97;
  }

  .logo[data-selected] .figure.is-selected {
    --fig-opacity: 1;
    --fig-scale: 1.03;
    --fig-lift: -6px;
    --fig-color: var(--color-accent);
    --fig-eye: var(--color-bg);
  }

  /* Zeiger und Tastatur haben Vorrang vor der Auswahl. */
  .logo:has(.figure:hover) .figure,
  .logo:has(.figure:focus-visible) .figure {
    --fig-opacity: var(--figure-dim);
    --fig-scale: 0.97;
    --fig-lift: 0px;
    --fig-color: var(--logo-fill);
    --fig-eye: var(--color-accent);
  }

  .logo:has(.figure:hover) .figure:hover,
  .logo:has(.figure:focus-visible) .figure:focus-visible {
    --fig-opacity: 1;
    --fig-scale: 1.03;
    --fig-lift: -6px;
    --fig-color: var(--color-accent);
    --fig-eye: var(--color-bg);
  }

  .figure:focus-visible {
    outline: none;
  }

  .figure:focus-visible .figure__hit {
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-dasharray: 6 6;
    rx: 8;
  }

  @media (prefers-reduced-motion: reduce) {
    .figure {
      --fig-scale: 1;
      --fig-lift: 0px;
    }
  }
}