.p2-glitch-field {
    --crt-bloom-opacity: .43;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    isolation: isolate;
    mix-blend-mode: screen;
}

body {
    position: relative;
}

body::before,
body::after {
    z-index: 0;
}

body > header,
body > main,
body > footer {
    position: relative;
    z-index: 2;
}

/* No persistent scanline filter. CRT lines appear only during randomized sync/corruption events. */
.p2-glitch-field::before {
    content: none;
}

/* Soft phosphor breathing only. No fixed horizontal band. */
.p2-glitch-field::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(63,190,88,.055), transparent 68%);
    opacity: var(--crt-bloom-opacity);
    animation: crt-phosphor 4.7s steps(1, end) infinite;
}

.p2-glitch {
    position: absolute;
    display: block;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
}

.p2-glitch--tear {
    background: linear-gradient(90deg, transparent 0 2%, rgba(126,255,151,.82) 4%, rgba(220,255,226,.34) 24%, rgba(54,210,91,.72) 57%, rgba(115,255,145,.42) 82%, transparent 98%);
    box-shadow: 0 0 14px rgba(76,255,122,.38);
    animation: crt-tear var(--glitch-duration, 190ms) steps(3, end) forwards;
}

.p2-glitch--block {
    background: repeating-linear-gradient(90deg, rgba(93,255,126,.52) 0 11px, rgba(0,0,0,.08) 11px 15px, rgba(210,255,219,.25) 15px 23px, transparent 23px 31px);
    box-shadow: 0 0 16px rgba(72,255,116,.26);
    animation: crt-block var(--glitch-duration, 230ms) steps(4, end) forwards;
}

.p2-glitch--rgb {
    background: linear-gradient(90deg, rgba(255,35,72,.34), rgba(55,255,112,.72) 42%, rgba(55,118,255,.36) 78%, transparent);
    box-shadow: 0 0 10px rgba(65,255,120,.24);
    animation: crt-rgb var(--glitch-duration, 160ms) steps(3, end) forwards;
}

.p2-glitch--jump {
    left: 0 !important;
    width: 100% !important;
    background:
        repeating-linear-gradient(0deg, rgba(114,255,142,.24) 0 1px, transparent 1px 3px),
        linear-gradient(90deg, transparent, rgba(79,255,116,.50) 14%, rgba(225,255,230,.20) 47%, rgba(79,255,116,.42) 76%, transparent);
    box-shadow: 0 0 22px rgba(65,255,112,.26);
    animation: crt-jump var(--glitch-duration, 300ms) steps(5, end) forwards;
}

.p2-glitch--sync {
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: rgba(176,255,190,.80);
    box-shadow: 0 0 10px rgba(85,255,122,.65), 0 0 24px rgba(85,255,122,.30);
    animation: crt-sync var(--glitch-duration, 120ms) steps(2, end) forwards;
}

@keyframes crt-phosphor {
    0%, 18%, 100% { opacity: .56; }
    19%           { opacity: 1; }
    22%           { opacity: .68; }
    25%           { opacity: .88; }
    29%, 67%      { opacity: .58; }
    68%           { opacity: .92; }
    71%           { opacity: .62; }
}

@keyframes crt-tear {
    0%   { opacity: 0; transform: translateX(-28px) skewX(-8deg); }
    16%  { opacity: var(--glitch-opacity, .58); }
    42%  { transform: translateX(32px) skewX(5deg); }
    67%  { opacity: calc(var(--glitch-opacity, .58) * .72); transform: translateX(-11px); }
    100% { opacity: 0; transform: translateX(0); }
}

@keyframes crt-block {
    0%   { opacity: 0; transform: translateX(0); }
    14%  { opacity: var(--glitch-opacity, .58); transform: translateX(18px); }
    38%  { transform: translateX(-25px); }
    61%  { opacity: calc(var(--glitch-opacity, .58) * .78); transform: translateX(11px); }
    100% { opacity: 0; transform: translateX(0); }
}

@keyframes crt-rgb {
    0%   { opacity: 0; transform: translateX(-14px); }
    18%  { opacity: var(--glitch-opacity, .53); transform: translateX(22px); }
    48%  { transform: translateX(-17px); }
    100% { opacity: 0; transform: translateX(0); }
}

@keyframes crt-jump {
    0%   { opacity: 0; transform: translateX(0); }
    12%  { opacity: var(--glitch-opacity, .75); transform: translateX(26px); }
    30%  { transform: translateX(-38px); }
    48%  { transform: translateX(17px); }
    66%  { opacity: calc(var(--glitch-opacity, .75) * .66); transform: translateX(-9px); }
    100% { opacity: 0; transform: translateX(0); }
}

@keyframes crt-sync {
    0%   { opacity: 0; transform: translateY(-8px); }
    20%  { opacity: var(--glitch-opacity, .75); }
    55%  { opacity: calc(var(--glitch-opacity, .75) * .65); transform: translateY(8px); }
    100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .p2-glitch-field { display: none; }
}