@property --sec-accent {
    syntax: "<color>";
    initial-value: #22d3ee;
    inherits: true;
}
/* BluntAI scroll-morph + reading progress.
   Tokens & --cat-accent come from bluntai-tokens.css.
   JS (bluntai-scroll-morph.js) sets --sec-accent on article.morph-scope as sections enter view. */

/* Reading progress bar — tricolor cyan → magenta → lime (dark palette) */
[data-theme="dark"] .reading-progress {
    background: linear-gradient(90deg,
        var(--n-fire) 0%,    var(--n-fire) 33%,
        var(--n-flash) 33%, var(--n-flash) 66%,
        var(--n-abyss) 66%,    var(--n-abyss) 100%);
}
/* Reading progress bar — darker-neon palette for light mode */
[data-theme="light"] .reading-progress {
    background: linear-gradient(90deg,
        var(--nl-fire) 0%,    var(--nl-fire) 33%,
        var(--nl-flash) 33%, var(--nl-flash) 66%,
        var(--nl-abyss) 66%,  var(--nl-abyss) 100%);
}
.reading-progress::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: ba-shimmer 3s linear infinite;
}
@keyframes ba-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Article scope — JS drives --sec-accent via IntersectionObserver on H2 sections. */
article.morph-scope {
    --sec-accent: var(--cat-accent);
    transition: --sec-accent 80ms linear;
}

article.morph-scope section.ba-sec {
    padding: 32px 0 24px;
    position: relative;
}

article.morph-scope section.ba-sec > h2 {
    padding-left: 18px;
    border-left: 4px solid var(--sec-accent);
    transition: border-color 80ms linear;
}

article.morph-scope section.ba-sec blockquote {
    border-left: 4px solid var(--sec-accent);
    background: color-mix(in srgb, var(--sec-accent) 10%, transparent);
    padding: 16px 22px;
    margin: 20px 0;
    transition: --sec-accent 80ms linear;
}

article.morph-scope section.ba-sec a {
    color: var(--sec-accent);
    border-bottom: 1px dashed var(--sec-accent);
    text-decoration: none;
    transition: color 80ms linear, border-color 80ms linear;
}

article.morph-scope section.ba-sec figure {
    box-shadow: 0 0 60px -20px var(--sec-accent);
    transition: box-shadow 80ms linear;
}

/* Rating banner (appears at end of some articles) — lime-ish, echoes lime section */
article.morph-scope .rating-banner {
    margin: 40px 0 0;
    padding: 24px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sec-accent) 15%, transparent),
        color-mix(in srgb, var(--sec-accent) 5%, transparent));
    border: 1px solid var(--sec-accent);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
article.morph-scope .rating-banner .label {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--sec-accent);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}
article.morph-scope .rating-banner .value {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
}