/* Terminal and Linux-themed animations */

/* Blink cursor animation */
.cursor-blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Text appear animation (typewriter style) */
.typewriter-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    letter-spacing: 0.15em;
    border-right: 0.15em solid var(--accent-color);
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

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

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

/* Command execution animation */
.command-execution {
    position: relative;
    overflow: hidden;
}

.command-execution::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background-color: var(--accent-color);
    animation: execute 1s ease-in-out forwards;
}

@keyframes execute {
    0% {
        width: 0;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0.2;
    }
}

/* Terminal loading animation */
.terminal-loading {
    display: inline-flex;
    align-items: center;
}

.terminal-loading::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: var(--accent-color);
    animation: loading-pulse 1s infinite;
}

@keyframes loading-pulse {
    0% { transform: scale(0.5); opacity: 0.5; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.5); opacity: 0.5; }
}

/* Progress bar animation */
.progress-bar {
    height: 6px;
    background-color: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin: 10px 0;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--accent-color);
    width: 0;
    animation: progress-fill 2s ease-in-out forwards;
}

@keyframes progress-fill {
    from { width: 0; }
    to { width: var(--progress-width, 100%); }
}

/* Scale item reveal animation */
.scale-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: scale-appear 0.5s forwards;
}

@keyframes scale-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Achievement unlock animation */
.achievement-unlock {
    animation: achievement-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes achievement-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Badge shine effect */
.badge-shine {
    position: relative;
    overflow: hidden;
}

.badge-shine::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

/* Rating pulse on change */
.rating-pulse {
    animation: rating-pulse 0.5s;
}

@keyframes rating-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Terminal glitch effect for easter eggs */
.terminal-glitch {
    position: relative;
    animation: glitch 0.5s infinite;
}

@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);
    }
}

/* Matrix code rain effect */
.matrix-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.matrix-code {
    position: absolute;
    color: var(--success-color);
    font-family: monospace;
    font-size: 16px;
    text-shadow: 0 0 5px var(--success-color);
    animation: matrix-fall linear infinite;
}

@keyframes matrix-fall {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(1000px);
    }
}

/* Bouncing terminal prompt */
.terminal-bounce {
    display: inline-block;
    animation: terminal-bounce 1s infinite;
}

@keyframes terminal-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Success checkmark animation */
.success-checkmark {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
}

.success-checkmark::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--success-color);
    opacity: 0;
    transform: scale(0);
    animation: checkmark-circle 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.success-checkmark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 23%;
    width: 10px;
    height: 5px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg) scale(0);
    animation: checkmark-check 0.5s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes checkmark-circle {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes checkmark-check {
    0% { transform: rotate(-45deg) scale(0); }
    100% { transform: rotate(-45deg) scale(1); }
}

/* Scale level up animation */
.level-up {
    animation: level-up 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes level-up {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Streak counter increment animation */
.streak-increment {
    animation: streak-count 0.5s;
}

@keyframes streak-count {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: var(--secondary-accent); }
    100% { transform: scale(1); }
}

/* Terminal command input animation */
.command-input {
    animation: command-blink 1s infinite;
}

@keyframes command-blink {
    0%, 100% { border-right-color: transparent; }
    50% { border-right-color: var(--text-color); }
}

/* Particle burst for achievements */
.particle-burst {
    position: relative;
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
}

.burst-animation {
    animation: burst 0.8s ease-out forwards;
}

@keyframes burst {
    0% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--translate-x, 0), var(--translate-y, 0));
        opacity: 0;
    }
}

/* Fade in animation for UI elements */
.fade-in {
    opacity: 0;
    animation: fade-in 0.5s forwards;
}

@keyframes fade-in {
    to { opacity: 1; }
}

/* View transition animation */
.view-transition {
    opacity: 0;
    transform: translateX(20px);
    animation: view-in 0.3s forwards;
}

@keyframes view-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Konami code success animation */
.konami-success {
    animation: konami 1s;
}

@keyframes konami {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Easter egg reveal animation */
.easter-egg-reveal {
    height: 0;
    overflow: hidden;
    animation: reveal 1s forwards;
}

@keyframes reveal {
    to { height: var(--reveal-height, auto); }
}