/* 0.0.0.0 — "the void" / no route to host. On load the page falls to black with
   TV static and a glitching caption, then eases back. (loads only on /0.0.0.0)
   Audio (static hiss) is wired separately once the asset is decided. */

#void-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity 1.1s ease;
}

#void-static {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

#void-caption {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: clamp(1rem, 3.5vw, 1.6rem);
    letter-spacing: 0.12em;
    color: #9fb0c0;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#void-caption small { display: block; font-size: 0.7em; color: #5b6b7a; margin-top: 0.4rem; }

body.egg-on #void-overlay { opacity: 1; }
body.egg-on #void-static  { opacity: 0.16; animation: void-flicker 0.12s steps(2) infinite; }
body.egg-on #void-caption { opacity: 1; animation: void-glitch 1.4s infinite; }

@keyframes void-flicker {
    0%   { background-position: 0 0; }
    50%  { background-position: 60px -40px; }
    100% { background-position: -50px 70px; }
}

@keyframes void-glitch {
    0%, 100% { transform: translate(-50%, -50%); text-shadow: none; }
    48%      { transform: translate(-50%, -50%); }
    50%      { transform: translate(calc(-50% + 2px), -50%); text-shadow: -2px 0 #f0f, 2px 0 #0ff; }
    52%      { transform: translate(calc(-50% - 2px), -50%); }
}

@media (prefers-reduced-motion: reduce) {
    body.egg-on #void-static  { animation: none; }
    body.egg-on #void-caption { animation: none; }
}