/**
 * Shared atmospheric interference layer.
 * Used in three modes — see interference.js for behavior:
 *   - storm    : full TV interference + CRT scanlines + vignette pulse  (index, portal, preview-elevated)
 *   - whisper  : rare soft noise + vignette pulse only                  (exhibition, about, system, 404, experience)
 *   - off      : module not loaded                                      (cv, dashboard, signal-noise)
 *
 * The script auto-creates the DOM elements; this stylesheet only positions them.
 */

#staticCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.05s linear;
    will-change: opacity;
    /* z-index set by JS per mode */
}

/* CRT scanlines + vignette burn — storm mode only */
.crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 101;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(22, 22, 29, 0.08) 2px,
        rgba(22, 22, 29, 0.08) 4px
    );
}

.crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(22, 22, 29, 0.4) 100%);
}

/* Slow ambient breathing vignette — present in storm + whisper modes.
   This is the cross-page DNA: every page that loads the script gets it. */
.vignette-pulse {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        ellipse at center,
        transparent 58%,
        rgba(22, 22, 29, 0.22) 100%
    );
    animation: vignettePulse 8s ease-in-out infinite;
    will-change: opacity;
}

/* Lighter touch on ivory pages so it doesn't darken text */
.vignette-pulse.is-light {
    background: radial-gradient(
        ellipse at center,
        transparent 62%,
        rgba(22, 22, 29, 0.07) 100%
    );
}

@keyframes vignettePulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* Respect reduced motion: kill the breathing vignette and ambient bursts.
   Page-specific exits / explicit burst() calls still fire. */
@media (prefers-reduced-motion: reduce) {
    .vignette-pulse {
        animation: none;
        opacity: 0.7;
    }
}