/* Animated Background Grid */
.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridFlow 20s linear infinite;
    opacity: 0.3;
}

@keyframes gridFlow {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(50px, 50px);
    }
}


/* Hover Effects - Smooth transitions both ways */
.banner_contentDetail:hover,
.banner_contentTitle:hover,
.banner_contentsubTitle:hover {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 10px 20px rgba(0, 255, 255, 0.4));
}

/* Content Images with Glow Effect - Smooth outline glow */
.banner_contentDetail img,
.banner_contentTitle img,
.banner_contentsubTitle img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    transition: all 0.3s ease;
}

.banner_contentTitle:hover img,
.banner_contentsubTitle:hover img {
    filter:
        drop-shadow(0 0 30px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(0, 255, 255, 0.6)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.banner_contentMainLayout img {
    animation: flickerSmooth 8s infinite ease-in-out;
}

@keyframes flickerSmooth {
    0% {
        opacity: 1;
        filter: none;
    }

    10% {
        opacity: 0.85;
        filter: contrast(120%) hue-rotate(10deg);
    }

    20% {
        opacity: 0.95;
        filter: contrast(130%) hue-rotate(5deg);
    }

    30% {
        opacity: 0.8;
        filter: contrast(150%) hue-rotate(20deg);
    }

    40% {
        opacity: 1;
        filter: none;
    }

    55% {
        opacity: 0.9;
        filter: contrast(120%) hue-rotate(-10deg);
    }

    70% {
        opacity: 0.85;
        filter: contrast(140%) hue-rotate(10deg);
    }

    85% {
        opacity: 1;
        filter: none;
    }

    100% {
        opacity: 1;
        filter: none;
    }
}


/* แอนิเมชันเรืองแสง */
@keyframes neon-glow {

    0%,
    100% {
        text-shadow: 0 0 5px #00faff, 0 0 10px #00faff, 0 0 20px #00faff;
        filter: brightness(1);
    }

    50% {
        text-shadow: 0 0 10px #00faff, 0 0 20px #00faff, 0 0 30px #00faff;
        filter: brightness(1.4);
    }
}

/* แอนิเมชันลอยขึ้นเล็กน้อย */
@keyframes float-up {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* แอนิเมชันจุดแสงไหล */
@keyframes sparkle {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(200px, -200px) scale(0.5);
        opacity: 0;
    }
}

.banner_contentTitle img,
.banner_contentsubTitle img {
    animation: neon-glow 7s infinite ease-in-out;
}

.banner_character {
    animation: float-up 4s infinite ease-in-out;
}

/* จุดแสง */
.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00faff;
    opacity: 0;
    animation: sparkle 5s linear infinite;
    pointer-events: none;
    z-index: 0;
}