/* --- High-End Tech Animations --- */

/* 1. Subtle Breathing Border (Premium RGB) */
@keyframes tech-breathe-red {
    0% {
        border-color: rgba(255, 0, 85, 0.4);
        box-shadow: 0 0 10px rgba(255, 0, 85, 0.1);
    }

    50% {
        border-color: rgba(255, 0, 85, 1);
        box-shadow: 0 0 25px rgba(255, 0, 85, 0.3);
    }

    100% {
        border-color: rgba(255, 0, 85, 0.4);
        box-shadow: 0 0 10px rgba(255, 0, 85, 0.1);
    }
}

@keyframes tech-breathe-cyan {
    0% {
        border-color: rgba(0, 255, 170, 0.4);
        box-shadow: 0 0 10px rgba(0, 255, 170, 0.1);
    }

    50% {
        border-color: rgba(0, 255, 170, 1);
        box-shadow: 0 0 25px rgba(0, 255, 170, 0.3);
    }

    100% {
        border-color: rgba(0, 255, 170, 0.4);
        box-shadow: 0 0 10px rgba(0, 255, 170, 0.1);
    }
}

@keyframes tech-breathe-purple {
    0% {
        border-color: rgba(85, 0, 255, 0.4);
        box-shadow: 0 0 10px rgba(85, 0, 255, 0.1);
    }

    50% {
        border-color: rgba(85, 0, 255, 1);
        box-shadow: 0 0 25px rgba(85, 0, 255, 0.3);
    }

    100% {
        border-color: rgba(85, 0, 255, 0.4);
        box-shadow: 0 0 10px rgba(85, 0, 255, 0.1);
    }
}

.tech-card-hover {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tech-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* 2. Scanning Line Effect for Images */
.tech-scan-container {
    position: relative;
    overflow: hidden;
}

.tech-scan-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    transform: translateY(-100%);
    animation: scan-line 4s linear infinite;
    pointer-events: none;
}

@keyframes scan-line {
    0% {
        transform: translateY(-100%);
    }

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

/* 3. Performance Bar Charts Animation */
@keyframes bar-fill {
    0% {
        width: 0;
    }

    100% {
        width: var(--target-width);
    }
}

.perf-bar {
    height: 100%;
    border-radius: 4px;
    position: relative;
    width: 0;
    /* Animation will be triggered by JS or simple delay */
    animation: bar-fill 1.5s ease-out forwards;
    animation-delay: 0.5s;
}

.perf-row:hover .perf-bar {
    filter: brightness(1.2);
}