/* Gordon: ein ruhiger Katalogisierer im bestehenden Zeichenwesenformat. */
.system-gordon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6ch;
    min-width: 6ch;
    color: var(--system-gordon-color, #AFC8D8);
    font-size: .98rem;
    line-height: 1;
    white-space: nowrap;
    font-variant-ligatures: none;
    pointer-events: none;
}

.system-gordon-glyph {
    position: relative;
    display: inline-block;
    width: 5ch;
    color: transparent;
    text-align: center;
}

.system-gordon-glyph::before {
    content: "[▣_▣]";
    position: absolute;
    inset: 0 auto auto 0;
    width: 5ch;
    color: var(--system-gordon-color, #AFC8D8);
    text-align: center;
    text-shadow: 0 0 3px rgba(217,237,247,.62), 0 0 8px rgba(175,200,216,.3);
    animation: gordonCatalogue 38s steps(1,end) -16s infinite;
}

@keyframes gordonCatalogue {
    0%, 54%, 56%, 78%, 83%, 100% { content: "[▣_▣]"; color: var(--system-gordon-color, #AFC8D8); }
    55% { content: "[▬_▬]"; }
    79%, 82% { content: "[▣_◫]"; color: var(--system-gordon-active, #D9EDF7); }
}

/* Gordons Zeichenlexikon für spätere, ausdrücklich gesetzte Zustände. */
.system-gordon[data-state="normal"] .system-gordon-glyph::before { animation: none; content: "[▣_▣]"; }
.system-gordon[data-state="blink"] .system-gordon-glyph::before { animation: none; content: "[▬_▬]"; }
.system-gordon[data-state="interested"] .system-gordon-glyph::before { animation: none; content: "[▣.▣]"; }
.system-gordon[data-state="skeptical"] .system-gordon-glyph::before { animation: none; content: "[▣_◫]"; }
.system-gordon[data-state="pleased"] .system-gordon-glyph::before { animation: none; content: "[▣‿▣]"; }
.system-gordon[data-state="incredulous"] .system-gordon-glyph::before { animation: none; content: "[□_□]"; }
.system-gordon[data-state="annoyed"] .system-gordon-glyph::before { animation: none; content: "[▣-▣]"; }
.system-gordon[data-state="confused"] .system-gordon-glyph::before { animation: none; content: "[▣?▣]"; }
.system-gordon[data-state="alert"] .system-gordon-glyph::before { animation: none; content: "[▣!▣]"; }

@media (prefers-reduced-motion: reduce) {
    .system-gordon-glyph::before { animation: none !important; }
}