/* Исправление прозрачности для лучшей читаемости */

/* Сайдбар виджеты */
.sidebar .sidebar-widget {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(101, 67, 33, 0.7) 100%) !important;
    border: 1px solid rgba(139, 69, 19, 0.9) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(139, 69, 19, 0.3) !important;
}

.sidebar .sidebar-widget h3 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Ссылки категорий и последних постов */
.sidebar .categories-list a {
    background: rgba(139, 69, 19, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(139, 69, 19, 0.8) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.sidebar .categories-list a:hover {
    background: rgba(139, 69, 19, 0.9) !important;
    color: #ffffff !important;
}

/* Поле поиска */
.sidebar .search-input {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #333 !important;
    border: 2px solid rgba(139, 69, 19, 0.7) !important;
}

.sidebar .search-input:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(139, 69, 19, 1) !important;
}

/* Виджет популярных постов */
.sidebar .widget {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(101, 67, 33, 0.7) 100%) !important;
    border: 1px solid rgba(139, 69, 19, 0.9) !important;
}

.sidebar .widget-header {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.9) 0%, rgba(101, 67, 33, 0.8) 100%) !important;
    border-bottom: 2px solid rgba(139, 69, 19, 1) !important;
}

.sidebar .widget-title {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

.sidebar .popular-post-link {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(139, 69, 19, 0.8) !important;
}

.sidebar .popular-post-title {
    color: #333 !important;
}

.sidebar .widget-footer {
    background: rgba(139, 69, 19, 0.8) !important;
    border-top: 1px solid rgba(139, 69, 19, 1) !important;
}

.sidebar .widget-link {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Облако тегов */
.sidebar .tag-cloud {
    background: rgba(139, 69, 19, 0.6) !important;
    border: 1px solid rgba(139, 69, 19, 0.8) !important;
}

.sidebar .tag-cloud-title {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Убираем белый фон у логотипа */
.logo-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.logo-panel::before {
    display: none !important;
}

/* Карточки постов на главной */
.post-card {
    background: linear-gradient(145deg, rgba(10, 10, 10, 0.9), rgba(22, 18, 15, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Hero секции */
.hero-left {
    background: rgba(5, 5, 5, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.hero-right {
    background: rgba(10, 8, 6, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.evidence-board {
    background: rgba(20, 15, 10, 0.95) !important;
}

.board-card {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ===== ДЕТЕКТИВНЫЕ АНИМАЦИИ ХЕДЕРА ===== */

/* Улучшенная видимость лиц детективов */
body::after, html::before {
    filter: brightness(1.15) contrast(1.1) !important;
    transition: all 0.3s ease !important;
}

/* Эффект при наведении на хедер */
.header:hover body::after,
.header:hover html::before {
    filter: brightness(1.25) contrast(1.2) !important;
}

/* Анимация фоновых изображений - ОТКЛЮЧЕНА чтобы избежать дрожания */
/* @keyframes detectiveReveal {
    0% { 
        opacity: 0.65; 
        filter: brightness(1.15) contrast(1.1); 
    }
    50% { 
        opacity: 0.75; 
        filter: brightness(1.25) contrast(1.15); 
    }
    100% { 
        opacity: 0.65; 
        filter: brightness(1.15) contrast(1.1); 
    }
}

body::after, html::before {
    animation: detectiveReveal 6s ease-in-out infinite !important;
} */

/* Улучшенные эффекты для hero секций */
.hero-left, .hero-right {
    transition: all 0.3s ease !important;
}

.hero-left:hover, .hero-right:hover {
    background: rgba(5, 5, 5, 0.7) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.3) !important;
}

/* Анимация для доски улик */
.evidence-board {
    transition: all 0.3s ease !important;
}

.evidence-board:hover {
    background: rgba(20, 15, 10, 0.98) !important;
    transform: scale(1.02) !important;
}

.board-card {
    transition: all 0.3s ease !important;
}

.board-card:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-3px) rotate(1deg) !important;
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.4) !important;
}

/* Эффект мерцания для кода */
@keyframes codeFlicker {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.code-line {
    animation: code-scan 8s linear infinite, codeFlicker 2s ease-in-out infinite !important;
}

/* Пульсация сетки */
@keyframes gridPulseEnhanced {
    0%, 100% { 
        opacity: 0.4; 
        transform: scale(1); 
        filter: brightness(1);
    }
    50% { 
        opacity: 0.8; 
        transform: scale(1.02); 
        filter: brightness(1.2);
    }
}

.code-grid {
    animation: gridPulseEnhanced 6s ease-in-out infinite !important;
}

/* Эффект сканирования для spotlight */
@keyframes spotlightSweep {
    0% { 
        transform: translate(-50%, 0) rotate(0deg); 
        opacity: 0.8; 
        filter: brightness(1);
    }
    25% { 
        transform: translate(-40%, 0) rotate(5deg); 
        opacity: 0.6; 
        filter: brightness(1.2);
    }
    50% { 
        transform: translate(-30%, 0) rotate(10deg); 
        opacity: 0.4; 
        filter: brightness(1.4);
    }
    75% { 
        transform: translate(-40%, 0) rotate(5deg); 
        opacity: 0.6; 
        filter: brightness(1.2);
    }
    100% { 
        transform: translate(-50%, 0) rotate(0deg); 
        opacity: 0.8; 
        filter: brightness(1);
    }
}

.spotlight {
    animation: spotlightSweep 8s linear infinite !important;
}

/* Улучшенная анимация лазерных линий */
@keyframes laserEnhanced {
    0%, 100% { 
        opacity: 0; 
        transform: scaleY(0.5);
        filter: brightness(1);
    }
    50% { 
        opacity: 0.9; 
        transform: scaleY(1);
        filter: brightness(1.5) drop-shadow(0 0 10px rgba(217, 0, 18, 0.8));
    }
}

.laser-line {
    animation: laserEnhanced 5s ease-in-out infinite !important;
}

/* Эффект дрожания для атмосферы - ОТКЛЮЧЕН чтобы избежать дрожания */
/* @keyframes detectiveShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.5px); }
    75% { transform: translateX(0.5px); }
}

.header-noise {
    animation: detectiveShake 0.1s ease-in-out infinite !important;
} */

/* Интерактивные эффекты для навигации */
.nav a {
    transition: all 0.3s ease !important;
    position: relative !important;
}

.nav a::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(45deg, transparent, rgba(139, 69, 19, 0.1), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.nav a:hover::before {
    opacity: 1 !important;
}

/* Эффект печатной машинки для заголовка */
.hero-title {
    position: relative !important;
}

.hero-title::after {
    content: '|' !important;
    animation: typingCursor 1s ease-in-out infinite !important;
    color: rgba(139, 69, 19, 0.8) !important;
}

@keyframes typingCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Эффект свечения для case-pill */
.case-pill {
    animation: casePillGlow 3s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
}

@keyframes casePillGlow {
    0%, 100% { 
        box-shadow: 0 15px 30px rgba(217, 0, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }
    50% { 
        box-shadow: 0 15px 40px rgba(217, 0, 18, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }
}

.case-pill:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 20px 50px rgba(217, 0, 18, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Анимация для hero-meta */
.hero-meta span {
    transition: all 0.3s ease !important;
    animation: metaFloat 4s ease-in-out infinite !important;
}

.hero-meta span:nth-child(1) { animation-delay: 0s !important; }
.hero-meta span:nth-child(2) { animation-delay: 1s !important; }
.hero-meta span:nth-child(3) { animation-delay: 2s !important; }

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

.hero-meta span:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(139, 69, 19, 0.6) !important;
    transform: translateY(-3px) scale(1.05) !important;
}

/* Эффект для кнопок действий */
.hero-actions .btn {
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero-actions .btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
    transition: left 0.5s ease !important;
}

.hero-actions .btn:hover::before {
    left: 100% !important;
}

.hero-actions .btn:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(139, 69, 19, 0.5) !important;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ ДЕТЕКТИВНЫЕ ЭФФЕКТЫ ===== */

/* Эффект мерцания для всего хедера - ОТКЛЮЧЕН чтобы избежать дрожания */
/* @keyframes detectiveFlicker {
    0%, 98%, 100% { opacity: 1; }
    99% { opacity: 0.95; }
}

.header {
    animation: detectiveFlicker 8s ease-in-out infinite !important;
} */

/* Эффект старой пленки */
@keyframes filmGrain {
    0%, 100% { 
        background-position: 0% 0%; 
        opacity: 0.03; 
    }
    50% { 
        background-position: 100% 100%; 
        opacity: 0.06; 
    }
}

.header::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        ) !important;
    animation: filmGrain 4s linear infinite !important;
    pointer-events: none !important;
    z-index: 20 !important;
}

/* Улучшенная анимация для глаз детективов */
@keyframes eyeGlow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 
    }
    50% { 
        box-shadow: 0 0 20px rgba(139, 69, 19, 0.8), 0 0 30px rgba(255, 255, 255, 0.3); 
    }
}

.detective-eye {
    animation: eyeGlow 3s ease-in-out infinite !important;
}

/* Эффект дыма для атмосферы */
@keyframes smokeFloat {
    0% { 
        transform: translateY(0) translateX(0) rotate(0deg); 
        opacity: 0; 
    }
    20% { 
        opacity: 0.3; 
    }
    80% { 
        opacity: 0.1; 
    }
    100% { 
        transform: translateY(-80px) translateX(20px) rotate(180deg); 
        opacity: 0; 
    }
}

/* Эффект тумана */
@keyframes mistEffect {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(-100px); 
    }
    50% { 
        opacity: 0.15; 
        transform: translateX(100px); 
    }
}

.header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 200% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(139, 69, 19, 0.1) 25%,
        rgba(139, 69, 19, 0.05) 50%,
        rgba(139, 69, 19, 0.1) 75%,
        transparent 100%
    ) !important;
    animation: mistEffect 12s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

/* Улучшенные эффекты для навигации */
.nav a {
    position: relative !important;
    overflow: hidden !important;
}

.nav a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.8), transparent) !important;
    transition: left 0.3s ease !important;
}

.nav a:hover::after {
    left: 100% !important;
}

/* Эффект печатной машинки для hero-title */
@keyframes typewriterBlink {
    0%, 50% { border-right-color: rgba(139, 69, 19, 1); }
    51%, 100% { border-right-color: transparent; }
}

.hero-title {
    border-right: 2px solid rgba(139, 69, 19, 1) !important;
    animation: typewriterBlink 1s step-end infinite !important;
}

/* Эффект старого монитора */
@keyframes screenFlicker {
    0%, 100% { 
        filter: brightness(1) contrast(1); 
    }
    98% { 
        filter: brightness(1.02) contrast(1.05); 
    }
    99% { 
        filter: brightness(0.98) contrast(0.95); 
    }
}

.evidence-board {
    animation: screenFlicker 6s ease-in-out infinite !important;
}

/* Эффект сканирования для board-card */
@keyframes cardScan {
    0%, 90%, 100% { 
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); 
    }
    95% { 
        box-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.5),
            inset 0 0 20px rgba(139, 69, 19, 0.3),
            0 0 30px rgba(139, 69, 19, 0.2); 
    }
}

.board-card {
    animation: cardScan 8s ease-in-out infinite !important;
}

.board-card:nth-child(1) { animation-delay: 0s !important; }
.board-card:nth-child(2) { animation-delay: 2s !important; }
.board-card:nth-child(3) { animation-delay: 4s !important; }

/* Эффект радара для spotlight */
@keyframes radarSweep {
    0% { 
        transform: translate(-50%, 0) rotate(0deg) scale(1); 
        opacity: 0.8; 
    }
    25% { 
        transform: translate(-50%, 0) rotate(90deg) scale(1.1); 
        opacity: 0.6; 
    }
    50% { 
        transform: translate(-50%, 0) rotate(180deg) scale(1.2); 
        opacity: 0.4; 
    }
    75% { 
        transform: translate(-50%, 0) rotate(270deg) scale(1.1); 
        opacity: 0.6; 
    }
    100% { 
        transform: translate(-50%, 0) rotate(360deg) scale(1); 
        opacity: 0.8; 
    }
}

.spotlight {
    animation: radarSweep 10s linear infinite !important;
}

/* Эффект электрических помех */
@keyframes electricNoise {
    0%, 100% { 
        filter: hue-rotate(0deg) saturate(1); 
    }
    25% { 
        filter: hue-rotate(5deg) saturate(1.1); 
    }
    50% { 
        filter: hue-rotate(-5deg) saturate(0.9); 
    }
    75% { 
        filter: hue-rotate(3deg) saturate(1.05); 
    }
}

.laser-line {
    animation: laserEnhanced 5s ease-in-out infinite, electricNoise 2s ease-in-out infinite !important;
}

/* Эффект дрожания камеры - ОТКЛЮЧЕН чтобы избежать дрожания */
/* @keyframes cameraShake {
    0%, 100% { transform: translateX(0) translateY(0); }
    10% { transform: translateX(-1px) translateY(0); }
    20% { transform: translateX(1px) translateY(-1px); }
    30% { transform: translateX(0) translateY(1px); }
    40% { transform: translateX(1px) translateY(0); }
    50% { transform: translateX(-1px) translateY(-1px); }
    60% { transform: translateX(0) translateY(1px); }
    70% { transform: translateX(1px) translateY(0); }
    80% { transform: translateX(-1px) translateY(0); }
    90% { transform: translateX(0) translateY(-1px); }
}

.header-container {
    animation: cameraShake 0.5s ease-in-out infinite !important;
    animation-play-state: paused !important;
}

.header:hover .header-container {
    animation-play-state: running !important;
} */

/* Эффект свечения для case-pill при активности */
@keyframes activeCaseGlow {
    0%, 100% { 
        background: linear-gradient(135deg, rgba(217, 0, 18, 0.9), rgba(139, 69, 19, 0.8)); 
        box-shadow: 0 15px 30px rgba(217, 0, 18, 0.45); 
    }
    50% { 
        background: linear-gradient(135deg, rgba(217, 0, 18, 1), rgba(139, 69, 19, 0.9)); 
        box-shadow: 0 15px 40px rgba(217, 0, 18, 0.6), 0 0 20px rgba(217, 0, 18, 0.4); 
    }
}

.case-pill:active {
    animation: activeCaseGlow 0.3s ease-in-out !important;
}

/* Эффект матрицы для кода */
@keyframes matrixRain {
    0% { 
        transform: translateY(-100%); 
        opacity: 0; 
    }
    10% { 
        opacity: 1; 
    }
    90% { 
        opacity: 1; 
    }
    100% { 
        transform: translateY(100vh); 
        opacity: 0; 
    }
}

.code-line::after {
    content: '01010011 01000101 01000011 01010010 01000101 01010100 01001011 01000001' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    color: rgba(139, 69, 19, 0.3) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 8px !important;
    animation: matrixRain 15s linear infinite !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.code-line-a::after { animation-delay: 0s !important; }
.code-line-b::after { animation-delay: 5s !important; }
.code-line-c::after { animation-delay: 10s !important; }