.matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.88);
    background-image:
        radial-gradient(120% 100% at 50% 0%, rgba(20, 24, 48, 0.55) 0%, rgba(0, 0, 0, 0) 60%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(18, 18, 38, 0.72) 100%);
    filter: brightness(0.7) saturate(1.05);
}

/* CSS only on phones/tablets and for reduced motion: no canvas work. */
/* Keep this query in sync with js/flowfield.js. */
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) {
    body {
        background:
            radial-gradient(ellipse at 0% 0%, rgba(79, 195, 247, 0.18), transparent 55%),
            radial-gradient(ellipse at 100% 65%, rgba(118, 75, 162, 0.22), transparent 60%),
            linear-gradient(150deg, #0b1220, #100c1c);
    }

    .matrix-canvas,
    .avatar .glitch-layer {
        display: none;
    }

    .main-container .glass,
    .avatar::after,
    .homelab-background,
    .homelab-background::after,
    .homelab-title {
        animation: none;
    }

    .main-container .glass {
        will-change: auto;
    }

    /* Avoid blur compositing work while scrolling. */
    body .main-container :is(.glass, .content, .projects-section, .homelab-section, .btn) {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}