/* the society :: CRT layer.
   scanlines, phosphor bloom and a slow flicker, all painted by two fixed overlay
   elements that never take pointer events. every intensity routes through a
   custom property so the toggle and prefers-reduced-motion can zero them without
   this file needing to know either exists. */

.crt-scan,
.crt-bloom {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

/* the scanline pitch is 3px rather than 2px: at 2px it aliases into a moire
   pattern on non-integer device pixel ratios, which reads as a rendering bug. */
.crt-scan {
    background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.42) 0 1px,
        transparent 1px 3px
    );
    opacity: var(--scan-opacity);
    mix-blend-mode: multiply;
}

/* vignette plus a wash of amber, which is what sells "phosphor" more than the
   scanlines do. */
.crt-bloom {
    background:
        radial-gradient(
            ellipse 120% 100% at 50% 50%,
            transparent 45%,
            rgba(0, 0, 0, 0.55) 100%
        ),
        radial-gradient(
            ellipse 90% 70% at 50% 42%,
            rgba(255, 178, 36, 0.055) 0%,
            transparent 70%
        );
    opacity: var(--bloom-opacity);
}

/* flicker is deliberately shallow (2% swing) and slow. a strong flicker looks
   great in a screenshot and is unusable for an hour-long conversation. */
@keyframes crt-flicker {
    0%, 100% { opacity: calc(var(--bloom-opacity) * 1.00); }
    47%      { opacity: calc(var(--bloom-opacity) * 0.98); }
    62%      { opacity: calc(var(--bloom-opacity) * 1.02); }
    79%      { opacity: calc(var(--bloom-opacity) * 0.99); }
}

.crt-bloom {
    animation: crt-flicker 7.3s ease-in-out infinite;
}

:root[data-crt="off"] .crt-bloom,
:root[data-crt="off"] .crt-scan {
    animation: none;
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .crt-bloom { animation: none; }
}