/* ══════════════════════════════════════════════════════════
   header-logo.css — animated, clickable TIMBUKTU nav title
   Loaded AFTER each page's own stylesheet on every page.
   Uses only background-position + filter so it never fights
   the translateX(-50%) centering in the page CSS.
══════════════════════════════════════════════════════════ */
a.header-logo {
    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

a.header-logo .header-logo-text {
    display: inline-block;
    background: linear-gradient(90deg, #c9a227 0%, #ffd700 30%, #fff8dc 50%, #ffd700 70%, #c9a227 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, .35));
    animation: tmt-logo-shimmer 4.5s linear infinite;
    transition: transform .3s ease, filter .3s ease;
}

a.header-logo:hover .header-logo-text,
a.header-logo:focus-visible .header-logo-text {
    transform: scale(1.05);
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, .8));
    animation-duration: 1.8s;
}

a.header-logo:focus-visible {
    outline: 2px solid #ffd700;
    outline-offset: 6px;
    border-radius: 4px;
}

@keyframes tmt-logo-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    a.header-logo .header-logo-text { animation: none; background-position: 50% 0; transition: none; }
}