/*
    The wordmark lockup shared with the marketing site (www.datalinq.co.uk).

    Colours are NOT redefined here — app.css already owns the brand tokens
    (--brand-blue and friends) and drives the header, buttons and accents from them.
    Changing the blue is a one-line change there; this file only adds the mark itself.

    Loaded after Bootstrap and Blazorise in index.html so it needs no !important.
*/

/* The site sets the wordmark lowercase in Space Grotesk. Matching the face is what makes
   the two read as one brand rather than two similar ones. */
.dl-wordmark {
    font-family: "Space Grotesk", Inter, system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/*
    The blinking block after the wordmark — the site's brand device, a terminal caret.
    1.1s step-end is copied exactly: step-end gives the hard on/off of a real cursor
    rather than a fade.

    At ~0.9Hz this sits well below the 3Hz flash threshold associated with seizure risk,
    but it is still motion, so it stops for anyone who has asked for less of it.
*/
@keyframes dl-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

.dl-cursor {
    display: inline-block;
    width: 0.625rem;
    height: 1.25rem;
    margin-left: 0.125rem;
    vertical-align: middle;
    background-color: var(--brand-blue);
    animation: dl-blink 1.1s step-end infinite;
}

/* On the blue header a --brand-blue caret would vanish into the background; the pale
   shade keeps it visible and echoes the site's light palette. */
.dl-cursor--on-brand {
    background-color: var(--brand-blue-pale);
}

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