/* =========================================================
   SUPERBASE — ASCII LOGO
   Appearance for the animated ASCII wordmark that replaces
   the plain "SUPERBASE" text in the navbar. Height/width are
   set at runtime by assets/js/ascii-logo.js once the real
   (trimmed) frame dimensions are known — this file only owns
   how it looks, never how big it is.
   ========================================================= */

.ascii-logo {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: transparent;
}

.ascii-logo-canvas {
    display: block;
    white-space: pre;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text);
    background: transparent;
}

/* =========================================================
   KUROHIDE TERMINAL-STYLE LOGO
   Uses the same visual language as the boot terminal.
   ========================================================= */

.logo-text {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: var(--text);

    text-shadow:
        0 0 2px rgba(255,255,255,0.2),
        0 0 8px rgba(141,154,82,0.12);
}

#kurohide-logo {
    white-space: nowrap;
    display: inline-block;
}

/* Reuse the terminal cursor look */
#kurohide-cursor {
    display: inline-block;
    width: 7px;
    height: 15px;
    background: var(--green);
    opacity: 1;
    animation: none;
    margin-left: 2px;
}

#kurohide-cursor.blinking {
    animation: cursor-blink 0.9s steps(1) infinite;
}

@keyframes cursor-blink {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #kurohide-cursor {
        animation: none;
    }
}

/* Dedicated navbar cursor */

.logo-cursor {
    display: inline-block;
    width: 7px;
    height: 16px;

    background: var(--blue);

    margin-left: 2px;

    animation: logo-cursor-blink 0.9s steps(1) infinite;
}

@keyframes logo-cursor-blink {
    0%, 49% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}