/* =========================================
   MATRIX & DIGITAL RAIN FX LIBRARY
   Generated by StarlightDaemon Project
   ========================================= */

:root {
    --matrix-color: #00cc00;
    --matrix-bg: #000;
}

body {
    background: var(--matrix-bg);
    color: var(--matrix-color);
    font-family: 'Courier New', monospace;
}

/* --- 1. CLASSIC DIGITAL RAIN --- */
.matrix-rain {
    display: flex;
    gap: 15px;
    overflow: hidden;
    height: 100%;
}

.m-col {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 14px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    opacity: 0.8;
    text-shadow: 0 0 5px var(--matrix-color);
    animation: fall linear infinite;
}

/* Rain Animation */
@keyframes fall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Varying speeds for columns */
.fast {
    animation-duration: 2s;
}

.med {
    animation-duration: 3s;
}

.slow {
    animation-duration: 4.5s;
}

/* --- 2. DENSE / HEAVY MATRIX --- */
.dense-matrix {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 10px;
    line-height: 10px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
}

.dense-col {
    animation: fall 1.5s infinite;
}

/* --- 3. BINARY COUNTER --- */
.binary-count {
    font-size: 24px;
    font-weight: bold;
    color: var(--matrix-color);
}

.binary-count::after {
    content: '10110';
    animation: count 0.5s steps(4) infinite;
}

@keyframes count {
    0% {
        content: '00000';
    }

    25% {
        content: '01010';
    }

    50% {
        content: '10101';
    }

    75% {
        content: '11111';
    }
}

/* --- 4. GLITCH TEXT --- */
.glitch-text {
    font-weight: bold;
    font-size: 24px;
    position: relative;
    color: var(--matrix-color);
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    /* Uses data attribute */
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.8;
}

.glitch-text::before {
    color: #44ff44;
    transform: translate(-2px, 0);
    animation: glitch-anim-1 2s infinite;
    clip-path: inset(20% 0 80% 0);
}

.glitch-text::after {
    color: #ccffcc;
    transform: translate(2px, 0);
    animation: glitch-anim-2 1.5s infinite;
    clip-path: inset(10% 0 60% 0);
}

@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
    }

    20% {
        clip-path: inset(60% 0 10% 0);
    }

    40% {
        clip-path: inset(40% 0 50% 0);
    }

    60% {
        clip-path: inset(80% 0 5% 0);
    }

    80% {
        clip-path: inset(10% 0 70% 0);
    }

    100% {
        clip-path: inset(30% 0 20% 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(10% 0 60% 0);
    }

    20% {
        clip-path: inset(30% 0 10% 0);
    }

    40% {
        clip-path: inset(70% 0 20% 0);
    }

    60% {
        clip-path: inset(20% 0 40% 0);
    }

    80% {
        clip-path: inset(50% 0 30% 0);
    }

    100% {
        clip-path: inset(0% 0 80% 0);
    }
}

/* --- 5. UTILS --- */
.terminal-box {
    border: 1px solid var(--matrix-color);
    background: rgba(0, 20, 0, 0.3);
    padding: 20px;
    margin: 10px;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);
}