/* 
 * Enhanced Navbar - Futuristic Styling
 * This file adds futuristic styling to the existing navbar
 * while preserving the neon border effect
 */

/* Header Enhancements */
header {
    background-color: rgba(0, 7, 15, 0.85) !important; /* Darker, more tech-like background */
    backdrop-filter: blur(12px) !important; /* Enhanced blur for depth */
    box-shadow: 
        0 4px 20px rgba(56, 182, 255, 0.5), /* Preserve neon glow */
        inset 0 0 20px rgba(56, 182, 255, 0.1) !important; /* Add inner glow for depth */
    /* Tech-style background grid */
    background-image: 
        linear-gradient(90deg, rgba(56, 182, 255, 0.03) 1px, transparent 1px),
        linear-gradient(rgba(56, 182, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    transition: all 0.4s ease !important; /* Smoother transition */
}

/* Enhanced hover effect */
header:hover {
    box-shadow: 
        0 4px 30px rgba(56, 182, 255, 0.8), /* Enhanced outer glow */
        inset 0 0 25px rgba(56, 182, 255, 0.15) !important; /* Enhanced inner glow */
}

/* Logo glow effect */
header .logo img {
    transition: filter 0.5s ease, transform 0.5s ease !important;
}

header:hover .logo img {
    filter: drop-shadow(0 0 15px rgba(0, 153, 241, 1)) !important; /* Enhanced logo glow */
    transform: scale(1.03) !important; /* Subtle scale on hover */
}

/* Animated scan line for nav */
nav {
    position: relative !important;
}

/* Scan line effect */
nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(56, 182, 255, 0.2) 50%, 
        transparent 100%);
    opacity: 0;
    animation: nav-scan 4s infinite;
    pointer-events: none;
    z-index: 1001;
}

@keyframes nav-scan {
    0%, 100% { 
        opacity: 0;
        top: 0; 
    }
    50% { 
        opacity: 1;
        top: 100%; 
    }
}

/* Enhanced nav links */
.nav-links li a {
    letter-spacing: 0.5px !important; /* Improved letter spacing */
    text-transform: uppercase !important; /* Tech style */
    font-size: 0.95em !important; /* Slightly smaller, bolder look */
    padding: 8px 0 !important; /* Better hover area */
    position: relative !important;
    overflow: hidden !important;
}

/* Top line indicator */
.nav-links li a::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: #38b6ff;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.3s ease;
    opacity: 0;
}

/* Enhanced underline gradient */
.nav-links li a::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        #38b6ff 50%, 
        transparent 100%) !important; /* Gradient effect */
}

/* Enhanced hover effects */
.nav-links li a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(56, 182, 255, 0.7) !important;
}

.nav-links li a:hover::before {
    transform: translateX(-50%) scaleX(1) !important;
    opacity: 1 !important;
}

/* Active navigation item */
.nav-links li a.active {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(56, 182, 255, 0.7) !important;
}

.nav-links li a.active::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

/* Get Started Button Enhancement */
.btn-get-started {
    background: linear-gradient(135deg, rgba(0, 98, 163, 0.8), rgba(56, 182, 255, 0.9)) !important; /* Gradient background */
    font-size: 0.95em !important; /* Font size */
    padding: 10px 22px !important; /* Padding adjustment */
    border: 1px solid #38b6ff !important; /* Thinner border */
    box-shadow: 
        0 0 15px rgba(56, 182, 255, 0.7), /* Preserve neon glow */
        inset 0 0 10px rgba(255, 255, 255, 0.1) !important; /* Inner glow */
    text-transform: uppercase !important; /* Match navbar style */
    letter-spacing: 0.5px !important; /* Improved letter spacing */
    position: relative !important;
    overflow: hidden !important; /* For shine effect */
}

/* Top border animation */
.btn-get-started::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #38b6ff, transparent);
    animation: btn-borderline 3s linear infinite;
    opacity: 0.7;
    z-index: 1;
}

/* Shine effect */
.btn-get-started::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: skewX(-25deg);
    animation: btn-shine 4s ease-in-out infinite;
    z-index: 1;
}

@keyframes btn-borderline {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes btn-shine {
    0%, 100% { left: -50%; opacity: 0; }
    10% { opacity: 0; }
    50% { left: 125%; opacity: 1; }
    60% { opacity: 0; }
}

/* Enhanced hover effect */
.btn-get-started:hover,
.btn-get-started:focus {
    background: linear-gradient(135deg, rgba(56, 182, 255, 0.9), rgba(0, 98, 163, 0.8)) !important; /* Reverse gradient */
    color: #ffffff !important;
    box-shadow: 
        0 0 25px rgba(56, 182, 255, 1), /* Enhanced glow */
        inset 0 0 15px rgba(255, 255, 255, 0.2) !important; /* Enhanced inner glow */
    transform: translateY(-3px) !important; /* Slight lift */
    border-color: #89d4ff !important; /* Lighter border */
}

/* Button active state */
.btn-get-started:active {
    transform: translateY(0) !important; /* Reset lift */
    box-shadow: 
        0 0 15px rgba(56, 182, 255, 0.7),
        inset 0 0 5px rgba(255, 255, 255, 0.1) !important;
}

/* Enhanced icon styling */
.btn-get-started i {
    margin-right: 8px;
    font-size: 0.9em;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 2;
}

/* Icon hover animation */
.btn-get-started:hover i {
    transform: translateX(3px) scale(1.1);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: icon-pulse 1.5s infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }
    50% {
        text-shadow: 0 0 15px rgba(56, 182, 255, 1);
    }
}

/* Hamburger menu enhancements */
.hamburger .bar {
    transition: all 0.4s ease-in-out !important;
    background-color: #38b6ff !important; /* Match the navbar color theme */
    box-shadow: 0 0 5px rgba(56, 182, 255, 0.5) !important; /* Add glow to bars */
}

/* Hamburger hover effect */
.hamburger:hover .bar {
    box-shadow: 0 0 8px rgba(56, 182, 255, 0.8) !important; /* Enhanced glow on hover */
}

/* Mobile nav links - ensure consistency */
@media screen and (max-width: 768px) {
    .nav-links.active {
        background-color: rgba(0, 7, 15, 0.95) !important; /* Match header background */
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(56, 182, 255, 0.3) !important;
        box-shadow: 
            0 4px 20px rgba(0, 0, 0, 0.5),
            inset 0 0 10px rgba(56, 182, 255, 0.1) !important;
        background-image: 
            linear-gradient(90deg, rgba(56, 182, 255, 0.03) 1px, transparent 1px),
            linear-gradient(rgba(56, 182, 255, 0.03) 1px, transparent 1px) !important;
        background-size: 20px 20px !important;
    }
}