/* Matrix-style animations and effects */

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes matrix-glow {
    0%, 100% { 
        text-shadow: 0 0 5px #0F4, 0 0 10px #0F4, 0 0 15px #0F4;
    }
    50% { 
        text-shadow: 0 0 10px #0F4, 0 0 20px #0F4, 0 0 30px #0F4;
    }
}

@keyframes cursor-blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Matrix rain background */
#matrix-rain {
    background: linear-gradient(45deg, #000 0%, #001100 50%, #000 100%);
}

/* Password input styling */
#password-input {
    background: transparent;
    border: none;
    outline: none;
    color: #0F4;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px #0F4;
    animation: matrix-glow 2s ease-in-out infinite;
}

#password-input::placeholder {
    color: #0F4;
    opacity: 0.7;
    text-shadow: 0 0 5px #0F4;
}

/* Cursor animation */
#cursor {
    animation: cursor-blink 1s infinite;
    box-shadow: 0 0 10px #0F4;
}

/* Secret message styling */
#secret-message {
    text-shadow: 0 0 20px #0F4;
    animation: matrix-glow 3s ease-in-out infinite;
}

/* Curtain animation */
#curtain {
    background: linear-gradient(180deg, #000 0%, #001100 50%, #000 100%);
    box-shadow: inset 0 0 100px rgba(0, 255, 0, 0.1);
}

/* Matrix-style blocks */
.matrix-block {
    display: inline-block;
    background: #0F4;
    margin: 2px;
    box-shadow: 0 0 10px #0F4;
    animation: matrix-glow 1.5s ease-in-out infinite;
}

/* Glitch effect for wrong password */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.glitch {
    animation: glitch 0.3s ease-in-out;
}

/* Terminal-style scroll effect */
body {
    font-family: 'Courier New', monospace;
    background: #000;
    color: #0F4;
}

/* Enhanced matrix rain effect */
#matrix-rain canvas {
    opacity: 0.3;
}