/**
 * Lowforehead Forum - NEON MODE
 * Effets visuels extraits de lowforehead.tech
 * À inclure APRÈS style-v2.css
 */

/* ============================
   IMPORT POLICE ORBITRON
============================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

/* ============================
   VARIABLES NÉON
============================ */

:root {
    /* Couleurs néon primaires */
    --neon-primary: #00ff88;
    --neon-secondary: #00d4ff;
    --neon-accent: #ff00ff;

    /* Glassmorphism néon */
    --neon-glass-bg: rgba(255, 255, 255, 0.09);
    --neon-glass-border: rgba(255, 255, 255, 0.18);
    --neon-glass-blur: blur(30px);
    --neon-glass-saturate: saturate(200%);
}

/* ============================
   ANIMATIONS NÉON
============================ */

@keyframes neon-pulse {
    0%, 100% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.4),
            0 0 10px rgba(255, 255, 255, 0.3),
            0 0 15px rgba(255, 255, 255, 0.2);
    }
    50% {
        text-shadow:
            0 0 8px rgba(255, 255, 255, 0.6),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.3);
    }
}

@keyframes neon-glow {
    0%, 100% {
        box-shadow:
            0 0 5px rgba(0, 255, 136, 0.15),
            0 0 10px rgba(0, 255, 136, 0.1),
            inset 0 0 15px rgba(0, 255, 136, 0.03);
    }
    50% {
        box-shadow:
            0 0 8px rgba(0, 255, 136, 0.25),
            0 0 15px rgba(0, 255, 136, 0.15),
            inset 0 0 20px rgba(0, 255, 136, 0.05);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================
   MODE NÉON ACTIVÉ
============================ */

body.neon-mode {
    /* Background layers animés */
    position: relative;
}

body.neon-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(0, 255, 136, 0.08) 0%,
        rgba(0, 212, 255, 0.05) 30%,
        transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: flow-down 20s ease-in-out infinite;
}

@keyframes flow-down {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(30px); opacity: 0.5; }
}

/* Titre principal du forum (logo) */
body.neon-mode .logo a {
    font-family: 'Orbitron', 'Blinker', sans-serif !important;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.4),
        0 0 10px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(255, 255, 255, 0.2);
    animation: neon-pulse 3s ease-in-out infinite;
}

/* Titres de sections */
body.neon-mode h1,
body.neon-mode h2 {
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.2),
        0 0 15px rgba(255, 255, 255, 0.1);
    animation: neon-pulse 3s ease-in-out infinite;
}

/* Titres de topics */
body.neon-mode .topic-title h2,
body.neon-mode .topic-header h1 {
    font-family: 'Orbitron', 'Blinker', sans-serif !important;
    font-weight: 700 !important;
}

/* Cards et conteneurs glassmorphism */
body.neon-mode .category-card,
body.neon-mode .topic-item,
body.neon-mode .post-item,
body.neon-mode .admin-panel,
body.neon-mode .topic-view {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) var(--neon-glass-saturate) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) var(--neon-glass-saturate) !important;
    border: 1.5px solid var(--neon-glass-border) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Hover effects néon */
body.neon-mode .category-card:hover,
body.neon-mode .topic-item:hover,
body.neon-mode .post-item:hover {
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow:
        0 4px 15px rgba(0, 255, 136, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
}

/* Boutons néon - Dégradé gris métallique sobre */
body.neon-mode .btn,
body.neon-mode .btn-primary {
    background: linear-gradient(135deg, #505050, #757575, #8a8a8a) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.neon-mode .btn:hover,
body.neon-mode .btn-primary:hover {
    background: linear-gradient(135deg, #6a6a6a, #8a8a8a, #a0a0a0) !important;
    color: #000000 !important;
    transform: scale(1.05) !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Badges rôles - Conserver couleurs originales en mode néon */
/* Pas de modifications de couleur pour préserver l'identité visuelle des rôles */

/* Halos verts autour logos et icônes header */
body.neon-mode .logo img {
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.2))
            drop-shadow(0 0 15px rgba(0, 255, 136, 0.1));
    transition: filter 0.3s ease;
}

body.neon-mode .logo img:hover {
    filter: drop-shadow(0 0 12px rgba(0, 255, 136, 0.3))
            drop-shadow(0 0 20px rgba(0, 255, 136, 0.15));
}

body.neon-mode .btn-search,
body.neon-mode .search-mobile-btn,
body.neon-mode .notif-bell {
    text-shadow:
        0 0 8px rgba(0, 255, 136, 0.4),
        0 0 15px rgba(0, 255, 136, 0.2);
    transition: text-shadow 0.3s ease;
}

body.neon-mode .btn-search:hover,
body.neon-mode .search-mobile-btn:hover,
body.neon-mode .notif-bell:hover {
    text-shadow:
        0 0 12px rgba(0, 255, 136, 0.6),
        0 0 20px rgba(0, 255, 136, 0.3);
}

/* Inputs et textarea glassmorphism */
body.neon-mode input[type="text"],
body.neon-mode input[type="email"],
body.neon-mode input[type="password"],
body.neon-mode textarea,
body.neon-mode select {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) !important;
    border: 1.5px solid var(--neon-glass-border) !important;
}

body.neon-mode input:focus,
body.neon-mode textarea:focus,
body.neon-mode select:focus {
    border-color: var(--neon-primary) !important;
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.3) !important;
}

/* Flash messages néon */
body.neon-mode .flash-message {
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary)) !important;
    box-shadow:
        0 2px 10px rgba(0, 255, 136, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    animation: neon-glow 2s ease-in-out infinite;
}

/* Topic épinglé */
body.neon-mode .topic-item.pinned {
    border-color: var(--neon-accent) !important;
    box-shadow:
        0 2px 10px rgba(255, 0, 255, 0.15),
        inset 0 1px 0 rgba(255, 0, 255, 0.05) !important;
}

/* Topic verrouillé */
body.neon-mode .topic-item.locked {
    border-color: var(--neon-secondary) !important;
    opacity: 0.8;
}

/* Pagination néon */
body.neon-mode .page-link {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) !important;
    border: 1px solid var(--neon-glass-border) !important;
}

body.neon-mode .page-link:hover,
body.neon-mode .page-link.active {
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary)) !important;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.25) !important;
}

/* Stats forum */
body.neon-mode .forum-stats {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) var(--neon-glass-saturate) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) var(--neon-glass-saturate) !important;
    border: 1.5px solid var(--neon-glass-border) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    animation: neon-glow 3s ease-in-out infinite;
}

/* Likes avec effet néon */
body.neon-mode .btn-like.liked {
    background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary)) !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3) !important;
    animation: float 3s ease-in-out infinite;
}

/* Notifications badge */
body.neon-mode .notif-badge {
    background: linear-gradient(135deg, var(--neon-accent), #cc00cc) !important;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.4) !important;
    animation: neon-pulse 2s ease-in-out infinite;
}

/* Dropdown notifications */
body.neon-mode .notif-dropdown {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) var(--neon-glass-saturate) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) var(--neon-glass-saturate) !important;
    border: 1.5px solid var(--neon-glass-border) !important;
    box-shadow: 0 4px 20px rgba(0, 255, 136, 0.2) !important;
}

/* Code blocks avec effet néon */
body.neon-mode .code {
    background: rgba(0, 255, 136, 0.03) !important;
    border-left: 3px solid var(--neon-primary) !important;
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.05) !important;
}

/* Quotes avec glassmorphism */
body.neon-mode .quote {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) !important;
    border-left: 3px solid var(--neon-secondary) !important;
}

/* Tables (admin panel) */
body.neon-mode table {
    background: var(--neon-glass-bg) !important;
    backdrop-filter: var(--neon-glass-blur) !important;
    -webkit-backdrop-filter: var(--neon-glass-blur) !important;
}

body.neon-mode th {
    background: rgba(0, 255, 136, 0.1) !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

body.neon-mode tr:hover {
    background: rgba(0, 255, 136, 0.05) !important;
}

/* ============================
   RESPONSIVE NÉON
============================ */

@media (max-width: 768px) {
    body.neon-mode::before {
        animation: flow-down 15s ease-in-out infinite;
    }

    body.neon-mode h1,
    body.neon-mode h2 {
        animation: neon-pulse 2s ease-in-out infinite;
    }
}