/* --- Tech Overlay & Decorations --- */
.tech-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 1. Subtle Moving Grid Background */
.tech-grid {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image:
        linear-gradient(rgba(100, 255, 218, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100, 255, 218, 0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    transform: perspective(500px) rotateX(60deg);
    animation: gridMove 20s linear infinite;
    opacity: 0.4;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(100px);
    }
}

/* 2. Side Lines & Markers */
.tech-line-left,
.tech-line-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(100, 255, 218, 0.1);
}

.tech-line-left {
    left: 40px;
}

.tech-line-right {
    right: 40px;
}

/* Animated blips running down the lines */
.tech-line-left::after,
.tech-line-right::after {
    content: '';
    position: absolute;
    top: -100px;
    left: 0;
    width: 1px;
    height: 100px;
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    animation: lineScan 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.tech-line-right::after {
    animation-delay: 4s;
}

@keyframes lineScan {
    0% {
        top: -100px;
    }

    100% {
        top: 100%;
    }
}

/* Add small "crosshairs" or markers on the lines */
.tech-line-left::before {
    content: '+  +  +  +  +';
    position: absolute;
    top: 20%;
    left: -6px;
    width: 14px;
    color: rgba(100, 255, 218, 0.2);
    font-family: monospace;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 150px;
    /* Space vertical markers */
    line-height: 1;
}

/* 3. Floating Geometric Shapes */
.floating-shape {
    position: absolute;
    border: 1px solid rgba(100, 255, 218, 0.05);
    z-index: -1;
}

.shape-1 {
    width: 300px;
    height: 300px;
    top: 20%;
    right: -100px;
    border-radius: 40px;
    animation: floatRotate 25s infinite linear;
}

.shape-2 {
    width: 500px;
    height: 500px;
    bottom: 10%;
    left: -200px;
    border-radius: 50%;
    /* Circle */
    border: 1px dashed rgba(87, 203, 255, 0.08);
    animation: floatRotateCounter 40s infinite linear;
}

@keyframes floatRotate {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    50% {
        transform: rotate(180deg) translate(20px, -20px);
    }

    100% {
        transform: rotate(360deg) translate(0, 0);
    }
}

@keyframes floatRotateCounter {
    0% {
        transform: rotate(360deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* Adjust main content z-index to stay above background decorations */
main {
    position: relative;
    z-index: 1;
}

/* Enhancements for Section Headers (flashing underline) */
.title-line {
    position: relative;
    overflow: hidden;
}

.title-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    animation: titleShine 4s ease-in-out infinite;
}

@keyframes titleShine {

    0%,
    80% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* Hide side lines on mobile */
@media (max-width: 1024px) {

    .tech-line-left,
    .tech-line-right {
        display: none;
    }
}