/* ============================================
   ЛОГОТИП ОЖИВЛЯЙ - Квадратная иконка
   ============================================ */

/* Полная версия (иконка + текст) */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-wrapper:hover .logo-icon-box {
    transform: scale(1.05);
}

.logo-wrapper:hover .logo-svg {
    filter: drop-shadow(0 4px 12px rgba(0, 99, 65, 0.4));
}

/* Контейнер иконки */
.logo-icon-box {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* SVG иконка */
.logo-svg {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 10px;
    transition: filter 0.3s ease;
}

/* Только иконка */
.logo-icon-only {
    display: block;
    text-decoration: none;
}

.logo-icon-only .logo-svg {
    width: 48px;
    height: 48px;
}

.logo-icon-only:hover .logo-svg {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(0, 99, 65, 0.4));
}

/* Текст логотипа */
.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
    background: linear-gradient(90deg, #1a1a1a, #333, #1a1a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-wrapper.dark .logo-title {
    background: linear-gradient(90deg, #fff, #e5e5e5, #fff);
    -webkit-background-clip: text;
    background-clip: text;
}

.logo-subtitle-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.logo-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: logo-dot-pulse 2s ease-in-out infinite;
}

.logo-dot-green {
    background: #006341;
}

.logo-dot-red {
    background: #a30834;
    animation-delay: 1s;
}

.logo-subtitle {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #006341, #00875a, #00a86b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   АНИМАЦИИ SVG
   ============================================ */

/* Свечение вокруг Play */
.logo-play-glow-anim {
    animation: logo-glow-pulse 2s ease-in-out infinite;
    transform-origin: center;
}

/* Кнопка Play */
.logo-play-btn {
    animation: logo-play-pulse 2s ease-in-out infinite;
}

/* Искорка */
.logo-sparkle-main {
    animation: logo-sparkle 2s ease-in-out infinite;
}

@keyframes logo-glow-pulse {
    0%, 100% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 0.3;
        transform: scale(1.15);
    }
}

@keyframes logo-play-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

@keyframes logo-sparkle {
    0%, 100% { 
        opacity: 0.9;
        transform: scale(1);
    }
    50% { 
        opacity: 0.5;
        transform: scale(1.3);
    }
}

@keyframes logo-dot-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.3);
        opacity: 0.7;
    }
}

/* ============================================
   СТИЛИ ДЛЯ HEADER
   ============================================ */

header .logo {
    display: flex;
    align-items: center;
}

/* Мобильное меню */
.mobile-menu-header .logo {
    display: flex;
    align-items: center;
}

.mobile-menu-header .logo-svg {
    width: 40px;
    height: 40px;
}

.mobile-menu-header .logo-title {
    font-size: 18px;
}

.mobile-menu-header .logo-subtitle {
    font-size: 8px;
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

@media (max-width: 768px) {
    .logo-svg {
        width: 40px;
        height: 40px;
    }
    
    .logo-title {
        font-size: 18px;
    }
    
    .logo-subtitle {
        font-size: 9px;
    }
    
    .logo-wrapper {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .logo-svg {
        width: 36px;
        height: 36px;
    }
    
    .logo-title {
        font-size: 16px;
    }
    
    .logo-subtitle {
        font-size: 8px;
    }
}

/* ============================================
   ФУТЕР
   ============================================ */

.footer-logo {
    display: flex;
    align-items: center;
}

.footer-logo .logo-wrapper {
    text-decoration: none;
}

.footer-logo .logo-svg {
    width: 44px;
    height: 44px;
}

.footer-logo .logo-title {
    font-size: 20px;
}

.footer-logo .logo-subtitle {
    font-size: 9px;
}