.site-alteration-overlay { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; overflow: hidden; color: #e5ebe5; background: rgba(9,15,11,.82); pointer-events: none; transition: opacity .12s; }
.site-alteration-overlay::before { content: ''; position: absolute; z-index: 1; inset: -20%; background: radial-gradient(circle, transparent 12%, rgba(2,5,3,.3) 55%, rgba(0,0,0,.9) 100%); animation: site-alteration-breathe .72s ease-in-out 2; }
.site-alteration-overlay::after { content: ''; position: absolute; z-index: 3; right: 0; left: 0; height: 2px; background: rgba(205,231,210,.72); box-shadow: 0 0 14px rgba(205,231,210,.65); opacity: 0; animation: site-alteration-sweep .72s .18s ease-in-out 1; }
.site-alteration-overlay__noise { position: absolute; z-index: 2; inset: -35%; opacity: .42; background-image: repeating-radial-gradient(circle at 23% 37%, transparent 0 1px, rgba(255,255,255,.28) 2px, transparent 3px 5px), repeating-linear-gradient(0deg, transparent 0 3px, rgba(205,225,209,.2) 4px, transparent 5px 7px); background-size: 9px 11px, 100% 7px; mix-blend-mode: screen; animation: site-alteration-noise .12s steps(2) infinite; }
.site-alteration-overlay__message { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(90vw,720px); transform: translate(-50%,-50%); text-align: center; }
.site-alteration-overlay__message p { margin: 0; padding: 25px 42px; color: #b52222; border: 1px solid rgba(181,34,34,.38); background: rgba(12,14,12,.86); box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 32px rgba(181,34,34,.16), 0 18px 55px rgba(0,0,0,.6); font-size: clamp(20px,3.2vw,36px); letter-spacing: .18em; text-shadow: 0 0 8px rgba(181,34,34,.55); animation: site-alteration-message 1.35s ease both; }
.is-site-altering .site-alteration-overlay { visibility: visible; opacity: 1; pointer-events: auto; }
.is-site-altering main, .is-site-altering .site-header, .is-site-altering .site-footer { animation: site-alteration-shift .48s .2s steps(2) 2; }
.site-alteration-debug { position: fixed; z-index: 10001; right: 18px; bottom: 18px; width: min(310px,calc(100vw - 36px)); color: #dbe7dd; border: 1px solid #59605a; border-radius: 5px; background: #1d211e; box-shadow: 0 8px 24px rgba(0,0,0,.35); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.site-alteration-debug[hidden] { display: none; }.site-alteration-debug button { min-height: 34px; color: inherit; border: 1px solid #59605a; border-radius: 3px; background: #303631; cursor: pointer; }.site-alteration-debug button:hover { background: #444c45; }.site-alteration-debug__heading { display:flex; align-items:center; justify-content:space-between; padding:10px; color:#d9b665; font-weight:700; letter-spacing:.12em; }.site-alteration-debug__heading span { color:#a9c9af; letter-spacing:0; }.site-alteration-debug__body { display:grid; gap:7px; padding:10px; border-top:1px solid #59605a; }.site-alteration-debug__body p { margin:0; }.site-alteration-debug__phases { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
@keyframes site-alteration-noise { 0%{transform:translate3d(-2%,-1%,0)}25%{transform:translate3d(3%,2%,0)}50%{transform:translate3d(-1%,4%,0)}75%{transform:translate3d(2%,-3%,0)}100%{transform:translate3d(-3%,1%,0)} } @keyframes site-alteration-sweep { 0%{top:7%;opacity:0}12%{opacity:.8}85%{opacity:.35}100%{top:94%;opacity:0} } @keyframes site-alteration-shift { 0%,100%{transform:translateX(0);filter:none}25%{transform:translateX(7px);filter:contrast(1.15) saturate(.65)}52%{transform:translateX(-5px)}72%{transform:translateX(3px);filter:contrast(1.3) saturate(.45)} } @keyframes site-alteration-breathe { 50%{transform:scale(1.04);opacity:.78} } @keyframes site-alteration-message { 0%,12%{opacity:0;filter:blur(1px)}28%,84%{opacity:1;filter:blur(0)}100%{opacity:.88;filter:blur(0)} }
@media (prefers-reduced-motion:reduce) { .site-alteration-overlay::before,.site-alteration-overlay::after,.site-alteration-overlay__noise { display:none; }.site-alteration-overlay__message p,.is-site-altering main,.is-site-altering .site-header,.is-site-altering .site-footer { animation:none; } }
@media (max-width:520px) { .site-alteration-overlay__message { width:calc(100% - 40px); }.site-alteration-overlay__message p { padding:22px 18px; letter-spacing:.1em; }.site-alteration-debug { right:10px; bottom:10px; } }