/* Homepage wordmark. Static text stays put until the script marks the stage live. */

.nk-pixel-stage {
    position: relative;
    container-type: inline-size;
    --accent: var(--cb, #3B35E6);
    --pixel-ink: #1D1B17;
    --pixel-amber: #FFB547;
}

.nk-pixel-canvas {
    display: none;
    width: 100%;
    height: auto;
    touch-action: pan-y;
    user-select: none;
}

.nk-pixel-stage.is-live .nk-pixel {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nk-pixel-stage.is-live .nk-pixel-canvas {
    display: block;
    aspect-ratio: var(--pixel-ratio, 6.2);
}

.nk-pixel-hint {
    display: none;
    margin: 8px 0 4px;
    text-align: center;
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mu);
    transition: opacity 0.45s ease;
}

.nk-pixel-stage.is-live .nk-pixel-hint {
    display: block;
}

.nk-pixel-hint.is-gone {
    opacity: 0;
}

body.theme-reading .site-footer.nk-magnet a {
    position: relative;
    transition: transform 0.18s ease;
}

body.theme-reading .site-footer.nk-magnet a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease;
    pointer-events: none;
}

body.theme-reading .site-footer.nk-magnet a.is-near::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .nk-pixel-canvas,
    .nk-pixel-hint {
        display: none !important;
    }

    .nk-pixel-stage.is-live .nk-pixel {
        position: static;
        width: auto;
        height: auto;
        margin: 36px 0 0;
        overflow: hidden;
        clip: auto;
        white-space: nowrap;
    }
}