/* ===== EMOJI-SYSTEM.CSS =====
 * НАЗНАЧЕНИЕ: Универсальная система отображения эмодзи
 * СВЯЗИ: Подключается ко всем компонентам системы
 * ФУНКЦИИ: Кроссбраузерная поддержка, анимации, размеры
 * РАЗМЕР: ~320 строк, ~8,000 символов
 * ОБНОВЛЕНО: 2025-01-02
 */

/* ===== UNIVERSAL EMOJI SUPPORT ===== */

/* 🎯 Base Emoji Styles - КРИТИЧЕСКИ ВАЖНО ДЛЯ ОТОБРАЖЕНИЯ */
.emoji,
.logo-emoji,
[class*="emoji"],
[class*="-emoji"],
[class*="-icon"],
span.emoji,
.card-icon,
.stat-icon,
.feature-icon,
.realtime-icon {
    font-family: 
        'Apple Color Emoji',      /* macOS, iOS */
        'Segoe UI Emoji',         /* Windows 10+ */
        'Segoe UI Symbol',        /* Windows 8.1 */
        'Noto Color Emoji',       /* Android, Chrome OS */
        'Twemoji Mozilla',        /* Firefox */
        'EmojiOne Color',         /* EmojiOne */
        'EmojiOne Mozilla',       /* Firefox alt */
        'Android Emoji',          /* Legacy Android */
        'Noto Sans Emoji',        /* Google fonts */
        'Twitter Color Emoji',    /* Twitter */
        sans-serif !important;
    
    font-feature-settings: 'liga' 1, 'kern' 1 !important;
    font-variant-emoji: emoji !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* Prevent emoji from being affected by font-weight/style */
    font-weight: normal !important;
    font-style: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    
    /* Ensure proper display */
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Специальная поддержка для Chrome/Chromium */
@supports (font-variant-emoji: emoji) {
    .emoji,
    .logo-emoji,
    [class*="emoji"] {
        font-family: system-ui, 
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol',
            'Noto Color Emoji',
            sans-serif !important;
    }
}

/* 🚀 LOGO EMOJI FIX - ГЛАВНАЯ ПРОБЛЕМА */
.logo-emoji,
.logo .emoji {
    font-size: 1.8rem !important;
    margin-right: 0.5rem !important;
    display: inline-block !important;
    vertical-align: middle !important;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
    animation: logoGlow 3s ease-in-out infinite alternate;
    
    /* Дополнительный фикс для Safari */
    -webkit-text-fill-color: initial !important;
    color: initial !important;
}

@keyframes logoGlow {
    from { filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5)); }
    to { filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.7)); }
}

/* 📱 Emoji Size System */
.emoji-xs { font-size: 0.875rem !important; } /* 14px */
.emoji-sm { font-size: 1rem !important; }     /* 16px */
.emoji-md { font-size: 1.25rem !important; }  /* 20px */
.emoji-lg { font-size: 1.5rem !important; }   /* 24px */
.emoji-xl { font-size: 2rem !important; }     /* 32px */
.emoji-2xl { font-size: 2.5rem !important; }  /* 40px */
.emoji-3xl { font-size: 3rem !important; }    /* 48px */
.emoji-4xl { font-size: 4rem !important; }    /* 64px */

/* ===== COMPONENT-SPECIFIC EMOJI STYLES ===== */

/* 🧭 Navigation Emoji */
.nav-emoji,
.nav-link .emoji {
    font-size: 1.125rem !important;
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
    transition: filter 0.3s ease;
}

.nav-link:hover .nav-emoji,
.nav-link:hover .emoji {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6));
}

/* 🎯 CTA Button Emoji */
.cta-emoji,
.btn-emoji,
.btn .emoji {
    font-size: 1.125rem !important;
    margin-right: 0.25rem !important;
    display: inline-block !important;
}

/* 🏷️ Badge Emoji */
.badge-emoji,
.hero-badge .emoji {
    font-size: 1.25rem !important;
    margin-right: 0.25rem !important;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}

/* 📊 Section Title Emoji */
.title-emoji,
.section-title .emoji {
    font-size: 1.75rem !important;
    margin-right: 0.5rem !important;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}

/* 💡 Feature Icon Emoji */
.feature-icon,
.option-emoji,
.stat-emoji,
.stat-icon,
.realtime-icon {
    font-size: 2.5rem !important;
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
    transition: filter 0.3s ease;
    display: block !important;
    margin: 0 auto 1rem !important;
}

.feature-item:hover .feature-icon,
.pricing-option:hover .option-emoji,
.stat-card:hover .stat-icon {
    filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.5));
}

/* Dashboard specific emoji fixes */
.dashboard-card .card-icon,
.action-button .action-icon {
    font-size: 48px !important;
    margin-bottom: 20px !important;
    display: block !important;
}

/* 🎨 Animated Emoji Effects */
.emoji-pulse {
    animation: emojiPulse 2s ease-in-out infinite;
}

@keyframes emojiPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.emoji-bounce {
    animation: emojiBounce 1s ease-in-out infinite;
}

@keyframes emojiBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-5px); }
    60% { transform: translateY(-3px); }
}

.emoji-spin {
    animation: emojiSpin 3s linear infinite;
}

@keyframes emojiSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.emoji-heartbeat {
    animation: emojiHeartbeat 1.5s ease-in-out infinite;
}

@keyframes emojiHeartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.05); }
}

/* ===== RESPONSIVE EMOJI SCALING ===== */
@media (max-width: 768px) {
    .logo-emoji { font-size: 1.75rem !important; }
    .title-emoji { font-size: 1.5rem !important; }
    .badge-emoji { font-size: 1.125rem !important; }
    .nav-emoji { font-size: 1rem !important; }
    .stat-icon { font-size: 2rem !important; }
}

@media (max-width: 480px) {
    .logo-emoji { font-size: 1.5rem !important; }
    .title-emoji { font-size: 1.25rem !important; }
    .badge-emoji { font-size: 1rem !important; }
    .nav-emoji { font-size: 0.875rem !important; }
    .stat-icon { font-size: 1.75rem !important; }
}

/* ===== FALLBACK FOR UNSUPPORTED DEVICES ===== */
@supports not (font-variant-emoji: emoji) {
    .emoji,
    .logo-emoji,
    [class*="emoji"],
    [class*="-emoji"] {
        font-family: 
            'Segoe UI Emoji',
            'Apple Color Emoji',
            'Noto Color Emoji',
            sans-serif !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */
@media (prefers-contrast: high) {
    .emoji,
    .logo-emoji,
    [class*="emoji"],
    [class*="-emoji"] {
        filter: none !important;
        text-shadow: none !important;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    .emoji-pulse,
    .emoji-bounce,
    .emoji-spin,
    .emoji-heartbeat,
    .logo-emoji {
        animation: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .emoji,
    .logo-emoji,
    [class*="emoji"],
    [class*="-emoji"] {
        color-adjust: exact;
        -webkit-print-color-adjust: exact;
        filter: none !important;
    }
}

/* ===== EMOJI HOVER EFFECTS ===== */
.emoji-hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.emoji-glow:hover {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.7));
    transition: filter 0.3s ease;
}

/* ===== SPECIFIC SECTION EMOJI STYLES ===== */

/* Hero Section */
#hero .emoji {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
}

/* Problems Section */
#problems .emoji {
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.4));
}

/* Solutions Section */
#solutions .emoji {
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));
}

/* How It Works Section */
#how-it-works .emoji {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
}

/* Pricing Section */
#pricing .emoji {
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.4));
}

/* Realtime Stats Section */
.realtime-icon.emoji {
    opacity: 0.3;
    font-size: 2.5rem !important;
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
.emoji[aria-label]::after {
    content: " (" attr(aria-label) ")";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Screen reader only emoji descriptions */
.sr-only-emoji {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===== DARK MODE OPTIMIZATIONS ===== */
@media (prefers-color-scheme: dark) {
    .emoji,
    .logo-emoji,
    [class*="emoji"],
    [class*="-emoji"] {
        /* Emoji already optimized for dark backgrounds */
        filter: brightness(1.1) saturate(1.1);
    }
}

/* ===== EMOJI UTILITY CLASSES ===== */
.emoji-inline { display: inline !important; }
.emoji-block { display: block !important; }
.emoji-center { text-align: center !important; }
.emoji-left { text-align: left !important; }
.emoji-right { text-align: right !important; }

.emoji-spacing-sm { margin: 0 0.25rem !important; }
.emoji-spacing-md { margin: 0 0.5rem !important; }
.emoji-spacing-lg { margin: 0 0.75rem !important; }

/* ===== EMOJI COMBINATIONS ===== */
.emoji-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.emoji-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.emoji,
.logo-emoji {
    will-change: transform, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}