/* Estilos Premium para o Layout Principal - Menu de Navegação */

/* Importar fontes do Google */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap');

/* Keyframes para animações dos botões */
@keyframes glow-pulse {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(74, 144, 226, 0.5), 0 0 40px rgba(74, 144, 226, 0.3);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(74, 144, 226, 0.8), 0 0 60px rgba(74, 144, 226, 0.5);
        transform: scale(1.02);
    }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes slideInDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes neon-glow {
    0%, 100% {
        text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
    }
    50% {
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor, 0 0 50px currentColor;
    }
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Navbar Premium */
.navbar {
    background: linear-gradient(135deg, 
        rgba(10, 10, 30, 0.98) 0%, 
        rgba(20, 20, 50, 0.95) 50%,
        rgba(10, 10, 30, 0.98) 100%) !important;
    backdrop-filter: blur(20px) saturate(180%);
    border: none !important;
    border-bottom: 2px solid rgba(74, 144, 226, 0.3) !important;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        0 0 50px rgba(74, 144, 226, 0.2) !important;
    padding: 15px 0;
    position: relative;
    overflow: hidden;
    animation: slideInDown 1s ease-out;
}

.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 0%, 
        rgba(74, 144, 226, 0.1) 25%, 
        rgba(138, 43, 226, 0.1) 50%, 
        rgba(0, 255, 255, 0.1) 75%, 
        transparent 100%);
    background-size: 400% 400%;
    animation: gradient-shift 8s ease infinite;
    pointer-events: none;
}

/* Container da navbar */
.container-fluid {
    position: relative;
    z-index: 2;
}

/* Botão Principal "Bem Vindos!" */
.navbar-brand {
    font-family: 'Orbitron', monospace !important;
    font-weight: 900 !important;
    font-size: 24px !important;
    background: linear-gradient(45deg, #4a90e2, #8a2be2, #00ffff) !important;
    background-size: 400% 400% !important;
    color: #ffffff !important;
    padding: 18px 30px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation: gradient-shift 3s ease infinite, glow-pulse 3s ease-in-out infinite !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-shadow: 
        0 8px 25px rgba(74, 144, 226, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

.navbar-brand::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.navbar-brand:hover {
    transform: translateY(-3px) scale(1.05) !important;
    color: #ffffff !important;
    box-shadow: 
        0 15px 40px rgba(74, 144, 226, 0.6),
        0 0 80px rgba(138, 43, 226, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.2) !important;
    animation: gradient-shift 1.5s ease infinite, neon-glow 2s ease-in-out infinite !important;
}

.navbar-brand:active::before {
    animation: ripple 0.6s ease-out;
}

/* Botão "Meios de Contato" */
.contato-link {
    font-family: 'Orbitron', monospace !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    background: linear-gradient(45deg, #00ffff, #4a90e2, #8a2be2) !important;
    background-size: 400% 400% !important;
    color: #ffffff !important;
    padding: 16px 25px !important;
    border-radius: 18px !important;
    text-decoration: none !important;
    border: 2px solid rgba(0, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    animation: gradient-shift 3s ease infinite !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    box-shadow: 
        0 6px 20px rgba(0, 255, 255, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.1) !important;
    margin-left: 20px !important;
}

.contato-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.contato-link:hover {
    transform: translateY(-3px) scale(1.05) !important;
    color: #ffffff !important;
    border-color: rgba(0, 255, 255, 0.6) !important;
    box-shadow: 
        0 12px 35px rgba(0, 255, 255, 0.6),
        0 0 60px rgba(74, 144, 226, 0.4),
        inset 0 0 25px rgba(255, 255, 255, 0.2) !important;
    animation: gradient-shift 1.5s ease infinite, neon-glow 2s ease-in-out infinite !important;
}

.contato-link:active::before {
    animation: ripple 0.6s ease-out;
}

/* Ícone antes do texto dos botões */
.navbar-brand::after {
    content: '🏠';
    margin-left: 10px;
    font-size: 20px;
    animation: neon-glow 3s ease-in-out infinite;
}

.contato-link::after {
    content: '📞';
    margin-left: 8px;
    font-size: 16px;
    animation: neon-glow 3s ease-in-out infinite;
}

/* Botão do menu mobile */
.navbar-toggler {
    border: 2px solid rgba(74, 144, 226, 0.5) !important;
    border-radius: 15px !important;
    padding: 8px 12px !important;
    background: linear-gradient(45deg, rgba(74, 144, 226, 0.2), rgba(138, 43, 226, 0.2)) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

.navbar-toggler:hover {
    border-color: rgba(0, 255, 255, 0.8) !important;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.3), rgba(74, 144, 226, 0.3)) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2874, 144, 226, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Lista de navegação */
.navbar-nav {
    align-items: center;
}

.nav-item {
    margin: 0 10px;
}

/* Responsividade */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 20px !important;
        padding: 15px 20px !important;
        margin-bottom: 15px !important;
    }
    
    .contato-link {
        font-size: 16px !important;
        padding: 14px 20px !important;
        margin: 10px 0 !important;
        display: block !important;
        text-align: center !important;
    }
    
    .navbar-nav {
        align-items: stretch;
        margin-top: 15px;
    }
    
    .navbar-collapse {
        background: rgba(10, 10, 30, 0.95);
        border-radius: 15px;
        padding: 20px;
        margin-top: 15px;
        border: 1px solid rgba(74, 144, 226, 0.3);
        backdrop-filter: blur(15px);
    }
}

/* Efeitos especiais para o container */
.container {
    position: relative;
    z-index: 1;
}