/* =========================================================================
   The brand mark
   Five dots in a cross, and the word beside them.

   Loaded by the landing page and by the dashboard so the two cannot drift
   apart — it used to live in a <style> block inside includes/header.php, which
   meant the only way to put the same logo on a second page was to paste it
   there as well.

   Size and colour come from two custom properties, so a page can scale the
   mark without touching anything here.
   ========================================================================= */

.brand {
    --brand-ink: #16324c;
    --brand-dot: 6px;
    --brand-gap: 4px;

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-ink);
    text-decoration: none;
}

.brand__mark {
    display: grid;
    grid-template-columns: repeat(3, var(--brand-dot));
    gap: var(--brand-gap);
    flex: none;
}

.brand__dot {
    width: var(--brand-dot);
    height: var(--brand-dot);
    border-radius: 50%;
    background: var(--brand-ink);
    transition: box-shadow 0.3s ease;
}

/* Dots one and five sit in the middle column; the other three fill the row
   between them. That is what makes the cross. */
.brand__dot:nth-child(1),
.brand__dot:nth-child(5) { grid-column: 2; }

.brand__word {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 1px;
    line-height: 1;
    color: var(--brand-ink);
}

/* -------------------------------------------------------------------------
   The entrance, and the slow pulse afterwards
   ------------------------------------------------------------------------- */
.brand--animated .brand__dot { opacity: 0; transform: scale(0); }

.brand--animated .brand__dot:nth-child(1) { animation: brand-appear 0.5s var(--brand-ease) 0s    forwards, brand-pulse 2.8s ease-in-out 1s    infinite; }
.brand--animated .brand__dot:nth-child(2) { animation: brand-appear 0.5s var(--brand-ease) 0.12s forwards, brand-pulse 2.8s ease-in-out 1.2s  infinite; }
.brand--animated .brand__dot:nth-child(3) { animation: brand-appear 0.5s var(--brand-ease) 0.24s forwards, brand-pulse 2.8s ease-in-out 1.4s  infinite; }
.brand--animated .brand__dot:nth-child(4) { animation: brand-appear 0.5s var(--brand-ease) 0.36s forwards, brand-pulse 2.8s ease-in-out 1.6s  infinite; }
.brand--animated .brand__dot:nth-child(5) { animation: brand-appear 0.5s var(--brand-ease) 0.48s forwards, brand-pulse 2.8s ease-in-out 1.8s  infinite; }

.brand { --brand-ease: cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes brand-appear {
    0%   { opacity: 0; transform: scale(0) translateY(8px); }
    70%  { opacity: 1; transform: scale(1.5) translateY(-2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes brand-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.7; }
}

.brand:hover .brand__dot { box-shadow: 0 0 6px 2px rgba(22, 50, 76, 0.3); }

/* A mark that pulses for ever is exactly the kind of movement somebody turns
   this setting on to be rid of. The dots still have to be visible, so the
   entrance is skipped rather than left half-finished. */
@media (prefers-reduced-motion: reduce) {
    .brand--animated .brand__dot {
        opacity: 1;
        transform: none;
        animation: none;
    }
}