@font-face {
    font-family: 'PixelDigivolve';
    /* The ../ tells Neocities to look outside the postpro folder */
    src: url('/fonts/PixelDigivolve.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GoogleSansCode';
    /* The ../ tells Neocities to look outside the postpro folder */
    src: url('/fonts/GoogleSansCode.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* --- WARNING GATE --- */
#warning-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    color: rgba(255, 255, 255, 0.9);
    z-index: 99999; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'GoogleSansCode', monospace;
    color: #ffffff; /* Clean white text */
    text-align: center;
}

.warning-box {
    max-width: 600px;
    padding: 50px;
    background: rgba(10, 0, 0, 0.95);
    border-radius: 20px;
    
    /* Box Fringe */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        -4px 0 0 rgba(0, 255, 255, 0.7), 
        4px 0 0 rgba(255, 0, 255, 0.7);
    
    /* Updated Animation: Combined Float and Sway */
    animation: pixel-float 6s infinite ease-in-out;
    /* Optional: use 'transform-origin: center' to ensure it pivots from the middle */
    transform-origin: center;
}

/* THE SWAYING FLOAT */
@keyframes pixel-float {
    0%, 100% { 
        transform: translateY(0) rotate(-1.5deg); 
    }
    50% { 
        transform: translateY(-15px) rotate(1.5deg); 
    }
}

.warning-box h1 {
    color: #ff00a6; /* Pure red warning header */
    font-size: 24px;
    margin-bottom: 20px;
    letter-spacing: 4px;
    text-shadow: none; /* Removed the color split from text */
    animation: warning-flicker 2s infinite;
}

.warning-box p {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 40px;
    color: #ffffff; /* Pure white for readability */
    text-shadow: none; /* Removed the color split from text */
}

.chromatic-text {
    font-family: 'PixelDigivolve', 'GoogleSansCode', monospace; /* Added fallbacks */
    font-size: 1.2em;
    color: #fff;
    text-shadow: 
        -1.5px 0 0 rgba(0, 255, 255, 0.8), 
         1.5px 0 0 rgba(255, 0, 255, 0.8);
    letter-spacing: 1px;
    display: inline-block;
}

#dismiss-warning {
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 8px; /* Rounded Button */
    color: #ffffff;
    padding: 12px 40px;
    cursor: pointer;
    font-family: 'GoogleSansCode', monospace;
    text-transform: uppercase;
    transition: all 0.3s ease;
    /* Static fringe on the button frame is okay */
    box-shadow: -2px 0 0 rgba(0, 255, 255, 0.5), 2px 0 0 rgba(255, 0, 255, 0.5);
}

#dismiss-warning:hover {
    background: #ffffff;
    color: #000;
    box-shadow: -4px 0 0 rgba(0, 255, 255, 0.9), 4px 0 0 rgba(255, 0, 255, 0.9);
}

@keyframes pixel-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes warning-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* --- POST PROCESSING EFFECTS --- */
.crt-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 3px;
    z-index: 10005; 
    pointer-events: none;
}

.glitch-active {
    filter: url(#rgb-split);
}

#intro-image {
    transform-origin: center center;
}

#white-out {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: white;
    opacity: 0;
    z-index: 10010;
    pointer-events: none;
}