/* Matrix Rain Effect Modularized Styles */
.matrix-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.matrix-column {
    position: absolute;
    top: -100%;
    white-space: nowrap;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff00;
    animation: matrix-fall linear infinite;
    text-shadow: 0 0 5px #00ff00;
}

.matrix-char {
    transition: all 0.3s ease;
}

.matrix-char.highlighted {
    color: #ffff00;
    font-weight: bold;
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
    transform: scale(1.3);
    background: rgba(255, 255, 0, 0.2);
    border-radius: 2px;
}

.flying-char {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00;
    pointer-events: none;
}

.assembling-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    font-family: 'Courier New', monospace;
    transition: opacity 1s ease;
    text-align: center;
}

.message-line {
    margin: 10px 0;
    white-space: nowrap;
}

.message-line-1 {
    font-size: 18px;
    letter-spacing: 2px;
}

.message-line-2 {
    font-size: 22px;
    letter-spacing: 3px;
    margin-top: 15px;
}

.letter-placeholder {
    display: inline-block;
    font-size: inherit;
    font-weight: bold;
    color: transparent;
    border-bottom: 2px solid #ffff00;
    text-shadow: none;
    margin: 0 1px;
    min-width: 12px;
    text-align: center;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.letter-placeholder.placeholder-hidden {
    opacity: 0;
    border-bottom: none;
}

.letter-placeholder.placeholder-visible {
    opacity: 0.9;
    animation: placeholder-appear 0.5s ease-in-out;
}

@keyframes placeholder-appear {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 0.9;
        transform: scaleX(1);
    }
}

.letter-placeholder.filled {
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
    opacity: 1;
    transform: scale(1.1);
    border-bottom: none;
}

.line1.filled.letter-glow {
    color: #ffff00 !important;
    text-shadow: 0 0 8px #ffff00, 0 0 15px #ffff00 !important;
}

.line2.filled.letter-glow {
    color: #ffff00 !important;
    text-shadow: 0 0 8px #ffff00, 0 0 15px #ffff00 !important;
}

.letter-placeholder.letter-glow {
    animation: placeholder-glow 0.8s ease-in-out;
}

.space-placeholder {
    width: 12px;
    opacity: 1;
    border-bottom: none !important;
    background: transparent;
}

@keyframes placeholder-glow {
    0% {
        transform: scale(1.1);
        text-shadow: 0 0 8px #00ff00;
    }
    50% {
        transform: scale(1.3);
        text-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00;
        color: #00ffff;
    }
    100% {
        transform: scale(1.1);
        text-shadow: 0 0 8px #00ff00;
        color: #00ff00;
    }
}

@keyframes matrix-fall {
    0% {
        top: -100%;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Matrix Message Overlay */
.matrix-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}

.matrix-message.show {
    opacity: 1;
}


.message-line1,
.message-line2 {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    margin: 0.5rem 0;
    animation: glow-pulse 2s ease-in-out infinite alternate;
}


.message-line1 {
    font-size: 1.2rem;
    letter-spacing: 2px;
}


.message-line2 {
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
}


@keyframes glow-pulse {
    0% {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    }
    100% {
        text-shadow: 0 0 15px currentColor, 0 0 25px currentColor, 0 0 35px currentColor, 0 0 45px currentColor;
    }
}