/* --- 0. Splash Screen Styles --- */

#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-family: 'Verdana', sans-serif;
    cursor: pointer;
    z-index: 10000; /* Highest z-index */
    transition: opacity 0.5s ease-out;
}

/* *** GLOBAL RAINBOW TEXT STYLES *** */

/* Apply the rainbow gradient to all text elements */
#splash-screen p,
.main-content h1, 
.main-content p, 
.main-content li, 
nav li {
    background: repeating-linear-gradient(
        45deg,
        #ff0000, /* Red */
        #ff7f00, /* Orange */
        #ffff00, /* Yellow */
        #00ff00, /* Green */
        #0000ff, /* Blue */
        #4b0082, /* Indigo */
        #9400d3  /* Violet */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Remove text-shadow to ensure sharp, non-blurry text */
    text-shadow: none; 
}

/* Ensure links remain readable */
.main-content a {
    background: linear-gradient(
        90deg,
        #ff0000, 
        #00ff00, 
        #0000ff 
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* --- NEW: MONITOR FRAME (BEZEL) STYLES --- */

#monitor-frame {
    /* Fixed position to always cover the whole viewport */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Allows clicks to pass through */
    z-index: 25; 
    
    /* Create the physical border effect */
    border: 30px solid #111; /* Thick dark gray border */
    border-radius: 20px; /* Slight rounding for the monitor edge */
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.9), /* Dark inner shading for depth */
        0 0 10px rgba(0, 0, 0, 0.5); /* Subtle shadow around the monitor */
    
    /* Optional: Small tilt for classic CRT feel */
    transform: perspective(1000px) rotateX(1deg);
}

/* --- 1. BASE BODY STYLES (Initial 'Off' State) --- */

body {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: fixed; 
    top: 0;
    left: 0;
    overflow: hidden; 
    margin: 0; 
    
    font-family: Verdana, sans-serif;
    color: white;
    text-align: center;
}

/* --- 2. CRT Power-On Animation (Legacy, overridden by matrix-animation.css) --- */

.is-powered-on {
    animation: crt-power-on 2s ease-out forwards; 
}

@keyframes crt-power-on {
    0% {
        width: 100vw;
        height: 100vh;
        background-color: black; 
        position: absolute; 
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    50% {
        width: 100vw; 
        height: 2px;
        background-color: black;
    }
    60% {
        width: 100vw; 
        height: 100vh;
        background-color: black;
    }
    70% {
        background-color: white;
    }
    100% {
        width: 100vw;
        height: 100vh;
        background-color: #333;
        position: relative;
        transform: translate(0, 0); 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}


/* --- 3. TV Static & Scanline Layer (#static-layer) --- */

#static-layer {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; 
    
    /* This background provides the faint scanline and static texture */
    background-image: 
        linear-gradient(rgba(0,0,0,0.5) 50%, transparent 50%), 
        url('http://dl5.glitter-graphics.net/pub/845/845105qsa2te9abl.gif');
        
    background-size: 100% 2px, auto; 
    background-attachment: fixed;
    
    opacity: 0; 
    animation: 
        scanline-scroll 5s linear infinite, 
        static-fade-in 0.1s forwards; 

    /* Animation delay handled by matrix-animation.css when .is-matrix-on is active */
    animation-delay: 1.5s; 
}

@keyframes scanline-scroll {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 -100%, 0 0; }
}

@keyframes static-fade-in {
    to { opacity: 0.3; } 
}


/* --- 4. Content Visibility and Clarity --- */

.main-content {
    opacity: 0; 
    animation: content-fade-in 0.5s forwards;
    animation-delay: 1.8s; 
    z-index: 15;
    
    /* ADDED STYLING FOR THE WHITE BORDER AND GLOW */
    border: 2px solid white;
    padding: 2rem; /* Add space between content and border */
    max-width: 900px; /* Prevent the bordered box from getting too wide */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); /* White glow */
    
    /* NEW: Holographic, translucent background for better readability */
    background-color: rgba(0, 0, 0, 0.75); /* Dark, 75% opaque background */
    backdrop-filter: blur(3px); /* Subtle blur for the "holographic" effect */
    
    width: 100%; 
    height: auto; 
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Removed padding-top: 5vh; since padding: 2rem; handles it */
}

@keyframes content-fade-in {
    to { opacity: 1; }
}


/* --- 5. Navigation Styles --- */

nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 20;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 4rem;
  align-items: center;
  justify-content: center;
  padding: 0; 
}

nav li {
  border-style: solid;
  border-color: white;
  border-width: 1px;
  padding:1rem;
  box-shadow: 0 0 5px white, 0 0 10px rgba(255, 255, 255, 0.5);
}