/* Quiet reading treatment with stronger homepage-only motion. */
.crt-reading {
    --color-background: #fafbf9;
    --font-color: #202420;
    --font-color-secondary: #555b55;
    --font-color-extra: #717871;
    --color-post-content: #303630;
    --color-hr: #d4dad2;
    --color-background-code: #f0f3ee;
    --color-border-code: #dce2d9;
    --crt-bottom-shadow: 7%;
    --crt-bottom-red: 6%;
    --crt-bottom-blue: 4%;
}

/* Keep the screen texture weakest over the reading column. These layers
   never capture clicks, selection, scrolling or keyboard focus. */
.crt-reading::before,
.crt-reading::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

.crt-reading::before {
    background: repeating-linear-gradient(
        to bottom,
        transparent 0 3px,
        rgb(28 42 26 / var(--crt-scan, 5%)) 3px 4px
    );
    mask-image: linear-gradient(to right,
        #000, rgb(0 0 0 / 32%) 28%, rgb(0 0 0 / 32%) 72%, #000);
}

.crt-reading::after {
    box-shadow:
        inset 0 -78px 96px rgb(48 35 46 / var(--crt-bottom-shadow)),
        inset 0 0 90px rgb(34 50 29 / var(--crt-edge, 4%));
    background:
        linear-gradient(
            to top,
            rgb(106 62 77 / var(--crt-bottom-red)) 0%,
            rgb(71 87 112 / var(--crt-bottom-blue)) 7%,
            transparent 24%
        ),
        radial-gradient(ellipse at center,
            transparent 60%, rgb(34 50 29 / var(--crt-vignette, 2.5%)) 100%);
}

/* A restrained phosphor tint is confined to the masthead and its rule. */
.crt-reading .logo {
    color: #354632;
    text-shadow: 0 0 9px rgb(74 111 61 / 13%);
}

.crt-reading .header-container {
    border-bottom-color: #b8c5b2;
    box-shadow: 0 1px 5px rgb(90 125 70 / 5%);
}

.crt-reading .post-item-extra .tag-item {
    color: var(--font-color-extra);
}

.crt-reading a:focus-visible {
    outline: 2px solid #536b49;
    outline-offset: 4px;
}

/* Homepage enhancements; article pages keep the original reading intensity. */
.is-home {
    --crt-scan: 7%;
    --crt-edge: 6%;
    --crt-vignette: 4.5%;
}

.is-home,
.is-about {
    --crt-bottom-shadow: 11%;
    --crt-bottom-red: 9%;
    --crt-bottom-blue: 6%;
}

/* Bottom phosphor falloff: the overlay sits above the whole viewport, so the
   last band tints text and the paper beneath it together like an old display. */
.is-home::after,
.is-about::after {
    box-shadow:
        inset 0 0 90px rgb(34 50 29 / var(--crt-edge));
    background: radial-gradient(ellipse at center,
        transparent 60%, rgb(34 50 29 / var(--crt-vignette)) 100%);
}

.crt-reading .main :is(
    h1, h2, h3, h4, h5, h6, p, a, li, blockquote, pre, code,
    .post-title, .post-meta, .post-item-extra, .archive-item
) {
    --chroma-strength: 0;
    text-shadow:
        calc(var(--chroma-strength) * -2px) 0 rgb(190 39 72 / calc(var(--chroma-strength) * 0.19)),
        calc(var(--chroma-strength) * 2px) 0 rgb(30 102 185 / calc(var(--chroma-strength) * 0.16));
    transform: translateX(calc(var(--chroma-strength) * 0.75px))
        skewX(calc(var(--chroma-strength) * 0.1deg));
}
.is-home .main {
    position: relative;
}

.is-home .logo {
    position: relative;
    isolation: isolate;
}

.is-home .logo::before,
.is-home .logo::after {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    content: attr(data-glitch);
    opacity: 0;
    white-space: normal;
}

.is-home .logo::before {
    color: #874d4d;
    mix-blend-mode: multiply;
    animation: home-glitch-red 3.6s steps(1, end) infinite;
}

.is-home .logo::after {
    color: #4b6574;
    mix-blend-mode: multiply;
    animation: home-glitch-blue 3.1s steps(1, end) infinite;
}

.is-home .post-item-title:hover {
    text-shadow: 1px 0 rgb(112 63 63 / 32%), -1px 0 rgb(57 88 105 / 30%);
    transform: skewX(-2deg);
}

@keyframes home-glitch-red {
    0%, 17%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 100% 0); }
    18% { opacity: 0.42; transform: translateX(3px); clip-path: inset(10% 0 60% 0); }
    19% { opacity: 0; }
    47% { opacity: 0.34; transform: translateX(-3px); clip-path: inset(54% 0 18% 0); }
    48% { opacity: 0; }
    78% { opacity: 0.3; transform: translateX(2px); clip-path: inset(28% 0 46% 0); }
    80% { opacity: 0; }
}

@keyframes home-glitch-blue {
    0%, 9%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(100% 0 0 0); }
    10% { opacity: 0.36; transform: translateX(-3px); clip-path: inset(62% 0 9% 0); }
    11% { opacity: 0; }
    39% { opacity: 0.3; transform: translateX(3px); clip-path: inset(4% 0 68% 0); }
    41% { opacity: 0; }
    68% { opacity: 0.28; transform: translateX(-2px); clip-path: inset(34% 0 36% 0); }
    70% { opacity: 0; }
}

@media (max-width: 640px) {
    .crt-reading::before { opacity: 0.5; }
    .crt-reading::after { opacity: 0.55; }
}

@media (prefers-contrast: more), (forced-colors: active), print {
    .crt-reading::before,
    .crt-reading::after { display: none; }
    .crt-reading .logo { text-shadow: none; }
    .crt-reading .header-container { box-shadow: none; }
    .is-home .logo::before,
    .is-home .logo::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .is-home .logo::before,
    .is-home .logo::after { animation: none; }
}