/*
 * citar-footnotes.css — Footnote highlight animation for the Sly.so blog.
 *
 * When a user clicks a [N] citation link in the body, the corresponding
 * reference item at the bottom scrolls into view and receives a 5-second
 * golden highlight fade-out.
 *
 * Loaded by citar_plugin → base.html includes this file via a custom
 * CSS link placed after sly-modern.css.
 */

/* Highlight flash animation — golden yellow → transparent over 5s */
@keyframes citar-ref-highlight {
    0%   { background-color: rgba(212, 175, 55, 0.35); }
    60%  { background-color: rgba(212, 175, 55, 0.12); }
    100% { background-color: transparent; }
}

/* Applied to a reference <p> when its anchor is targeted via #ref-N */
p[id^="ref-"]:target {
    animation: citar-ref-highlight 5s ease-out forwards;
    scroll-margin-top: 2rem;
}

/* Also support the explicit .citar-highlight class for JS-triggered highlights */
.citar-highlight {
    animation: citar-ref-highlight 5s ease-out forwards;
    scroll-margin-top: 2rem;
}

/* Smooth scroll behavior for footnote jumps */
html {
    scroll-behavior: smooth;
}

/* Subtle border-left accent on the targeted reference for extra visibility */
p[id^="ref-"]:target {
    border-left: 3px solid rgba(212, 175, 55, 0.6);
    padding-left: 0.75rem;
    margin-left: -0.75rem;
}