/* Gemeinsamer literarischer Kommentator der Bibliothek. */
.system-marcel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6ch;
    min-width: 6ch;
    color: var(--system-marcel-color, var(--library-accent, #FF3B3B));
    font-size: .98rem;
    line-height: 1;
    white-space: nowrap;
    font-variant-ligatures: none;
    pointer-events: none;
}

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

.system-marcel-glyph::before {
    content: "{ಠ:ಠ}";
    position: absolute;
    inset: 0 auto auto 0;
    width: 5ch;
    color: var(--system-marcel-color, var(--library-accent, #FF3B3B));
    text-align: center;
    text-shadow:
        0 0 3px color-mix(in srgb, var(--system-marcel-active, var(--library-active, #FFBAB5)) 58%, transparent),
        0 0 8px color-mix(in srgb, var(--system-marcel-color, var(--library-accent, #FF3B3B)) 38%, transparent),
        0 0 15px color-mix(in srgb, var(--system-marcel-deep, var(--library-deep, #A91720)) 24%, transparent);
    animation: systemMarcelReading 41s steps(1, end) infinite;
}

@keyframes systemMarcelReading {
    0%, 18%, 22%, 42%, 46%, 66%, 70%, 82%, 86%, 95%, 98%, 100% {
        content: "{ಠ:ಠ}";
        color: var(--system-marcel-color, var(--library-accent, #FF3B3B));
        transform: translate(0, 0);
    }
    19%, 21% {
        content: "{¬:ಠ}";
        color: var(--system-marcel-muted, var(--library-muted, #D97878));
        transform: translateX(-1px);
    }
    43%, 45% {
        content: "{ಠ:¬}";
        color: var(--system-marcel-muted, var(--library-muted, #D97878));
        transform: translateX(1px);
    }
    67%, 69% { content: "{•:•}"; }
    83%, 85% {
        content: "{ಠ:°}";
        color: var(--system-marcel-active, var(--library-active, #FFBAB5));
    }
    96%, 97% {
        content: "{•‿•}";
        color: var(--system-marcel-active, var(--library-active, #FFBAB5));
        transform: translateY(-1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .system-marcel-glyph::before {
        content: "{ಠ:ಠ}";
        color: var(--system-marcel-color, var(--library-accent, #FF3B3B));
        animation: none !important;
        transform: none;
    }
}