/* --- CSS Variables --- */
:root {
    --bg-color: #05080f; /* Even darker blue */
    --text-color: #e5e5e5; /* Slightly brighter grey */
    --accent-cyan: #00ffff;
    --accent-magenta: #ff00ff;
    --accent-green: #00ff00;
    --accent-amber: #ffc107; /* Slightly brighter amber */
    --glow-cyan-weak: rgba(0, 255, 255, 0.85);
    --glow-cyan-medium: rgba(0, 255, 255, 0.65);
    --glow-cyan-strong: rgba(0, 255, 255, 0.45);
    --glow-cyan-faint: rgba(77, 208, 225, 0.25);
    --font-display: 'Orbitron', sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    /* Removed grid color */
    --noise-opacity: 0.04; /* Slightly more noise */
    --particle-color: rgba(0, 255, 255, 0.3); /* Particle color */
}


/* --- Global Reset & Base --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-mono);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
    position: relative;
    /* NEW: Add perspective for 3D tilt */
    perspective: 1000px;
}

/* --- Background Effects --- */
body::before { /* Subtle gradient */
    content: '';
    position: fixed; /* Use fixed */
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, rgba(25, 40, 70, 0.25) 0%, rgba(5, 8, 15, 0) 70%);
    z-index: 1;
     pointer-events: none;
}

/* NEW: Particle Canvas */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Bottom layer */
    pointer-events: none;
}

.scanlines {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.30) 50% /* Slightly darker scanlines */
    ), linear-gradient(
        90deg, rgba(255, 0, 0, 0.05), /* Slightly more color */
        rgba(0, 255, 0, 0.03),
        rgba(0, 0, 255, 0.05)
    );
    background-size: 100% 3px, 5px 100%; /* Thinner lines, slightly wider color bands */
    z-index: 2; /* Above particles/gradient */
    pointer-events: none;
    animation: flicker 0.1s infinite alternate; /* Faster flicker */
}

.noise {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3; /* Above scanlines */
    pointer-events: none;
    opacity: var(--noise-opacity);
    animation: noiseAnim 0.15s infinite steps(1); /* Faster noise */
}

/* NEW: Screen Glitch Overlay */
.screen-glitch-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-color); /* Match background */
    z-index: 10; /* Above most content, below potential modals */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.screen-glitch-overlay.active {
    visibility: visible;
    opacity: 1;
    animation: screen-glitch-effect 0.3s steps(2, jump-none) forwards;
}

@keyframes screen-glitch-effect {
    0% { clip-path: inset(85% 0 5% 0); opacity: 0.7; }
    20% { clip-path: inset(10% 0 85% 0); }
    40% { clip-path: inset(55% 0 20% 0); opacity: 0.5; }
    60% { clip-path: inset(20% 0 60% 0); }
    80% { clip-path: inset(90% 0 3% 0); opacity: 0.8; }
    90% { clip-path: inset(40% 0 45% 0); }
    100% { clip-path: inset(0 0 0 0); opacity: 0; visibility: hidden; }
}


/* Keep original noiseAnim and flicker keyframes or adjust speeds further if desired */
@keyframes noiseAnim {
  0% { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNzUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjb G9pc2UpIi8+PC9zdmc+'); }
  100% { background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZmlsdGVyIGlkPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNzUiIG51bU9jdGF2ZXM9IjMiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHNlZWQ9IjE1Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIvPjwvc3ZnPg=='); }
}
@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.85; }
  100% { opacity: 1; }
}


/* --- Content Container --- */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 4; /* Above noise */
    /* NEW: Adjust transition for 3D tilt */
    transition: transform 0.1s ease-out;
    /* NEW: Apply transform-style for potential 3D children later */
    transform-style: preserve-3d;
}

/* --- Logo / Main Title --- */
.logo-glitch {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 11vw, 6.5rem); /* Slightly larger */
    font-weight: 700;
    color: var(--accent-cyan);
    text-shadow: /* Slightly intensified glow */
        0 0 6px var(--glow-cyan-weak),
        0 0 12px var(--glow-cyan-medium),
        0 0 24px var(--glow-cyan-strong),
        0 0 48px var(--glow-cyan-faint);
    margin-bottom: 1.5rem;
    position: relative;
    animation: text-flicker 2.5s linear infinite alternate; /* Faster flicker */
    cursor: pointer;
    transition: transform 0.2s ease-in-out, text-shadow 0.2s ease-in-out, filter 0.2s ease-in-out;
    /* NEW: Add a subtle filter for extra pop */
    filter: brightness(1.05);
}

.logo-glitch::before,
.logo-glitch::after { /* Keep glitch effect */
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color); overflow: hidden; color: var(--accent-cyan);
    animation-duration: 1.5s; /* Faster base glitch */
}
.logo-glitch::before {
    left: 3px; text-shadow: -2px 0 var(--accent-magenta);
    animation: glitch-anim-1 1.5s infinite linear alternate-reverse;
}
.logo-glitch::after {
    left: -3px; text-shadow: 2px 0 var(--accent-green);
    animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

/* Enhanced Hover Effect */
.logo-glitch:hover {
    transform: scale(1.03) translateZ(10px); /* Add slight Z push */
     text-shadow:
        0 0 10px var(--glow-cyan-weak),
        0 0 20px var(--glow-cyan-medium),
        0 0 35px var(--glow-cyan-strong),
        0 0 60px var(--glow-cyan-faint); /* Brighter hover glow */
     filter: brightness(1.15); /* Increase brightness on hover */
}
.logo-glitch:hover::before { animation-duration: 0.4s; text-shadow: -4px 0 var(--accent-magenta); }
.logo-glitch:hover::after { animation-duration: 0.6s; text-shadow: 4px 0 var(--accent-green); }

/* Keep glitch-anim-1, glitch-anim-2, text-flicker keyframes or adjust */
@keyframes glitch-anim-1 { 0% { clip-path: inset(15% 0 86% 0); } 20% { clip-path: inset(80% 0 1% 0); } 40% { clip-path: inset(45% 0 46% 0); } 60% { clip-path: inset(90% 0 5% 0); } 80% { clip-path: inset(25% 0 65% 0); } 100% { clip-path: inset(50% 0 51% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(78% 0 2% 0); } 20% { clip-path: inset(10% 0 85% 0); } 40% { clip-path: inset(55% 0 25% 0); } 60% { clip-path: inset(20% 0 75% 0); } 80% { clip-path: inset(95% 0 3% 0); } 100% { clip-path: inset(33% 0 60% 0); } }
@keyframes text-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 6px var(--glow-cyan-weak), 0 0 12px var(--glow-cyan-medium), 0 0 24px var(--glow-cyan-strong), 0 0 48px var(--glow-cyan-faint); opacity: 1; filter: brightness(1.05); } 20%, 24%, 55% { text-shadow: none; opacity: 0.85; filter: brightness(0.95); } }


/* --- Status & Message Text --- */
.status, .message {
    position: relative; /* Needed for pseudo-elements and cursor */
    min-height: 1.5em; /* Reserve space */
    /* NEW: Subtle jitter animation */
    animation: text-jitter 5s infinite alternate ease-in-out;
}

.status {
    font-size: 1.1rem;
    color: var(--accent-amber);
    text-transform: uppercase;
    letter-spacing: 2.5px; /* Slightly wider */
    margin-bottom: 1rem;
    animation-delay: -0.5s; /* Offset jitter start */
}

.message {
    font-size: 1rem;
    color: #d0d0d0; /* Slightly brighter */
    max-width: 500px; /* Wider */
    line-height: 1.7;
    margin-bottom: 3rem; /* More space before loader */
    min-height: 3.4em; /* Reserve space for longer text */
}

/* NEW: Text Jitter Animation */
@keyframes text-jitter {
    0% { transform: translate(0, 0); opacity: 1; }
    25% { transform: translate(1px, -0.5px); opacity: 0.98; }
    50% { transform: translate(-0.5px, 0.5px); opacity: 1; }
    75% { transform: translate(0.5px, 1px); opacity: 0.99; }
    100% { transform: translate(0, 0); opacity: 1; }
}


/* Typing Cursor (JS adds/removes .typing-cursor class) */
.typing-cursor::after {
    content: '▋'; /* Use a block cursor */
    display: inline-block;
    margin-left: 4px;
    font-weight: normal; /* No bold needed for block */
    color: var(--accent-amber); /* Default cursor color */
    animation: blink-cursor 0.7s step-end infinite;
    position: relative; /* Adjust position slightly if needed */
    top: -1px;
}
/* Specific cursor color for message line */
.message.typing-cursor::after {
     color: var(--text-color);
}

@keyframes blink-cursor {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}


/* --- Loading Animation --- */
.loader { display: flex; }
.loader .dot {
    width: 12px; height: 12px;
    background-color: var(--accent-cyan);
    border-radius: 50%; margin: 0 6px;
    animation: bounce 1.4s infinite ease-in-out both;
    box-shadow: 0 0 6px var(--accent-cyan), 0 0 10px rgba(0, 255, 255, 0.5); /* Enhance dot glow */
}
.loader .dot:nth-child(1) { animation-delay: -0.32s; }
.loader .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { /* Keep bounce or modify */
    0%, 80%, 100% { transform: scale(0); opacity: 0; }
    40% { transform: scale(1.0); opacity: 1; }
}

/* --- Responsiveness --- */
@media (max-width: 768px) { /* Adjusted breakpoint */
    .logo-glitch { font-size: clamp(2.8rem, 14vw, 5rem); }
    .status { font-size: 1rem; letter-spacing: 2px; }
    .message { font-size: 0.95rem; max-width: 90%; }
}
@media (max-width: 480px) { /* Smaller screens */
     .logo-glitch { font-size: clamp(2.5rem, 15vw, 4rem); }
     .status { font-size: 0.85rem; letter-spacing: 1.5px; }
     .message { font-size: 0.85rem; }
     .loader .dot { width: 10px; height: 10px; margin: 0 4px; }
}