/* Terminal-inspired animations and effects for cybersecurity theme */

/* Terminal text effect */
.terminal-text {
    font-family: 'Roboto Mono', monospace;
    color: var(--primary-color);
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
    display: inline-block;
}

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

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-color) }
}

/* Matrix rain effect for sections */
.matrix-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    opacity: 0.07;
    pointer-events: none;
}

/* Terminal window effect */
.terminal-window {
    background-color: rgba(18, 24, 30, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.terminal-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.terminal-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
}

.terminal-button.close { background-color: #FF5F57; }
.terminal-button.minimize { background-color: #FFBD2E; }
.terminal-button.maximize { background-color: #28CA42; }

.terminal-body {
    margin-top: 40px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--primary-color);
}

.terminal-prompt::before {
    content: '> ';
    color: var(--primary-color);
}

.terminal-cursor {
    display: inline-block;
    width: 10px;
    height: 18px;
    background-color: var(--primary-color);
    animation: blink 1s infinite;
}

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

/* Glitch effect for text */
.glitch {
    position: relative;
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 1s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(15px, 9999px, 89px, 0);
        transform: skew(0.15deg);
    }
    5% {
        clip: rect(100px, 9999px, 23px, 0);
        transform: skew(0.92deg);
    }
    10% {
        clip: rect(26px, 9999px, 75px, 0);
        transform: skew(0.14deg);
    }
    15% {
        clip: rect(89px, 9999px, 33px, 0);
        transform: skew(0.6deg);
    }
    20% {
        clip: rect(44px, 9999px, 50px, 0);
        transform: skew(0.45deg);
    }
    25% {
        clip: rect(29px, 9999px, 48px, 0);
        transform: skew(0.02deg);
    }
    30% {
        clip: rect(54px, 9999px, 96px, 0);
        transform: skew(0.86deg);
    }
    35% {
        clip: rect(44px, 9999px, 44px, 0);
        transform: skew(0.55deg);
    }
    40% {
        clip: rect(67px, 9999px, 79px, 0);
        transform: skew(0.24deg);
    }
    45% {
        clip: rect(41px, 9999px, 2px, 0);
        transform: skew(0.01deg);
    }
    50% {
        clip: rect(81px, 9999px, 5px, 0);
        transform: skew(0.45deg);
    }
    55% {
        clip: rect(45px, 9999px, 39px, 0);
        transform: skew(0.23deg);
    }
    60% {
        clip: rect(53px, 9999px, 32px, 0);
        transform: skew(0.86deg);
    }
    65% {
        clip: rect(92px, 9999px, 15px, 0);
        transform: skew(0.16deg);
    }
    70% {
        clip: rect(46px, 9999px, 90px, 0);
        transform: skew(0.95deg);
    }
    75% {
        clip: rect(99px, 9999px, 40px, 0);
        transform: skew(0.56deg);
    }
    80% {
        clip: rect(13px, 9999px, 89px, 0);
        transform: skew(0.33deg);
    }
    85% {
        clip: rect(47px, 9999px, 10px, 0);
        transform: skew(0.62deg);
    }
    90% {
        clip: rect(70px, 9999px, 33px, 0);
        transform: skew(0.12deg);
    }
    95% {
        clip: rect(36px, 9999px, 26px, 0);
        transform: skew(0.68deg);
    }
    100% {
        clip: rect(87px, 9999px, 16px, 0);
        transform: skew(0.71deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(65px, 9999px, 66px, 0);
        transform: skew(0.39deg);
    }
    5% {
        clip: rect(95px, 9999px, 10px, 0);
        transform: skew(0.5deg);
    }
    10% {
        clip: rect(31px, 9999px, 47px, 0);
        transform: skew(0.06deg);
    }
    15% {
        clip: rect(47px, 9999px, 18px, 0);
        transform: skew(0.48deg);
    }
    20% {
        clip: rect(85px, 9999px, 8px, 0);
        transform: skew(0.42deg);
    }
    25% {
        clip: rect(50px, 9999px, 14px, 0);
        transform: skew(0.29deg);
    }
    30% {
        clip: rect(37px, 9999px, 2px, 0);
        transform: skew(0.17deg);
    }
    35% {
        clip: rect(79px, 9999px, 59px, 0);
        transform: skew(0.4deg);
    }
    40% {
        clip: rect(6px, 9999px, 51px, 0);
        transform: skew(0.15deg);
    }
    45% {
        clip: rect(20px, 9999px, 12px, 0);
        transform: skew(0.33deg);
    }
    50% {
        clip: rect(76px, 9999px, 16px, 0);
        transform: skew(0.06deg);
    }
    55% {
        clip: rect(74px, 9999px, 40px, 0);
        transform: skew(0.56deg);
    }
    60% {
        clip: rect(84px, 9999px, 60px, 0);
        transform: skew(0.17deg);
    }
    65% {
        clip: rect(24px, 9999px, 42px, 0);
        transform: skew(0.01deg);
    }
    70% {
        clip: rect(61px, 9999px, 23px, 0);
        transform: skew(0.02deg);
    }
    75% {
        clip: rect(14px, 9999px, 49px, 0);
        transform: skew(0.18deg);
    }
    80% {
        clip: rect(1px, 9999px, 18px, 0);
        transform: skew(0.71deg);
    }
    85% {
        clip: rect(57px, 9999px, 68px, 0);
        transform: skew(0.85deg);
    }
    90% {
        clip: rect(80px, 9999px, 70px, 0);
        transform: skew(0.98deg);
    }
    95% {
        clip: rect(42px, 9999px, 28px, 0);
        transform: skew(0.38deg);
    }
    100% {
        clip: rect(70px, 9999px, 75px, 0);
        transform: skew(0.72deg);
    }
}

@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }
    10% {
        transform: skew(0deg);
    }
    20% {
        transform: skew(0deg);
    }
    30% {
        transform: skew(-0.5deg);
    }
    40% {
        transform: skew(-0.5deg);
    }
    50% {
        transform: skew(0.5deg);
    }
    60% {
        transform: skew(0.5deg);
    }
    70% {
        transform: skew(0deg);
    }
    80% {
        transform: skew(0deg);
    }
    90% {
        transform: skew(0.5deg);
    }
    100% {
        transform: skew(0deg);
    }
}

/* Scan line effect */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 255, 170, 0.1);
    opacity: 0.75;
    animation: scan 2s linear infinite;
}

@keyframes scan {
    0% {
        top: 0%;
    }
    100% {
        top: 100%;
    }
}

/* Binary background effect */
.binary-bg {
    position: relative;
    overflow: hidden;
}

.binary-bg::before {
    content: "01001001";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: rgba(0, 255, 170, 0.03);
    line-height: 1;
    pointer-events: none;
    z-index: -1;
    white-space: pre;
    letter-spacing: 1px;
}

/* Progress bar with hacker aesthetic */
.cyber-progress {
    width: 100%;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin: 20px 0;
}

.cyber-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #0ef);
    border-radius: 4px;
    position: relative;
    animation: progress-glow 2s ease-in-out infinite;
}

@keyframes progress-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 170, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 170, 0.8);
    }
}

/* Loading spinner with cyber aesthetic */
.cyber-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    margin: 20px auto;
}

.cyber-spinner::before,
.cyber-spinner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.cyber-spinner::before {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(0, 255, 170, 0.1);
}

.cyber-spinner::after {
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    border-right-color: var(--primary-color);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}