/* --- Matrix Background --- */
.matrix-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: -1;
    pointer-events: none;
}

.rain-side {
    width: 20%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
}

.center-void {
    width: 60%;
    background: #000;
}

.matrix-column {
    position: relative;
    top: -100%;
    animation: fall linear infinite;
}

.matrix-column::before {
    content: "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    writing-mode: vertical-lr;
    background: linear-gradient(to bottom, #fff 0%, var(--text-main) 50%, transparent 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 16px;
}

@keyframes fall {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(120vh); opacity: 0; }
}

.matrix-column:nth-child(odd) { animation-duration: 4s; }
.matrix-column:nth-child(even) { animation-duration: 6.5s; }

/* --- Fixed Header Glitch Effect --- */
header h1 {
    position: relative;
    display: inline-block;
    color: var(--text-main);
}

header h1::before,
header h1::after {
    content: attr(data-text); 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--nav-bg);
}

header h1::before {
    left: 2px;
    text-shadow: -2px 0 #0044ff; /* Deep Sapphire Blue */
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

header h1::after {
    left: -2px;
    text-shadow: -2px 0 #00ccff, 2px 2px #0044ff; /* Neon Blue Glitch */
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(31px, 9999px, 94px, 0); transform: skew(0.85deg); }
    5% { clip: rect(70px, 9999px, 71px, 0); transform: skew(0.85deg); }
    10% { clip: rect(29px, 9999px, 83px, 0); transform: skew(0.85deg); }
    15% { clip: rect(16px, 9999px, 91px, 0); transform: skew(0.85deg); }
    20% { clip: rect(2px, 9999px, 23px, 0); transform: skew(0.85deg); }
    25% { clip: rect(45px, 9999px, 40px, 0); transform: skew(0.85deg); }
    30% { clip: rect(30px, 9999px, 42px, 0); transform: skew(0.85deg); }
    100% { clip: rect(67px, 9999px, 62px, 0); transform: skew(0.85deg); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.15deg); }
    5% { clip: rect(52px, 9999px, 74px, 0); transform: skew(0.15deg); }
    10% { clip: rect(79px, 9999px, 85px, 0); transform: skew(0.15deg); }
    15% { clip: rect(75px, 9999px, 5px, 0); transform: skew(0.15deg); }
    20% { clip: rect(67px, 9999px, 61px, 0); transform: skew(0.15deg); }
    100% { clip: rect(3px, 9999px, 18px, 0); transform: skew(0.15deg); }
}

/* --- Cursors & Typing Effects --- */
.cursor { animation: cursor-blink 1s step-end infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }

.log-line {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--text-main);
    width: 0;
    animation: typing 1.5s steps(30, end) forwards;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}