/* Контейнер для футера с canvas анимацией */
.footer-section {
    position: relative;
    width: 100%;
    min-height: 150px; 
    overflow: hidden;
    
    /* Включаем Flex-режим и центрируем содержимое */
    display: flex;
    justify-content: center;  /* Горизонтальное центрирование */
    align-items: center;      /* Вертикальное центрирование */
}

.footer-section canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 
 /* Основной текст "GENERO" в футере */
 .genero-text {
    position: relative;
    color: #ffffff;
    letter-spacing: 0.3em;
    font-size: 2.5rem;
    font-family: var(--font-haval);
    font-weight: 400;
    animation: neonFlicker 4s ease-in-out infinite;
 }
 
 /* Неоновое свечение для текста "GENERO" */
 .genero-text::before {
    content: 'G E N E R O';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--secondary-blue);
    filter: blur(15px);
    animation: neonPulse 4s ease-in-out infinite;
 }
 
/* Большие телефоны и планшеты */
@media (max-width: 768px) {
    .genero-text {
        position: relative;
        color: #ffffff;
        letter-spacing: 0.3em;
        font-size: 2.2rem;
        font-family: var(--font-haval);
        font-weight: 400;
        animation: neonFlicker 4s ease-in-out infinite;
     }
  }
  
  /* обычные телефоны */
  @media (max-width: 576px) {
    .genero-text {
        position: relative;
        color: #ffffff;
        letter-spacing: 0.3em;
        font-size: 2.0rem;
        font-family: var(--font-haval);
        font-weight: 400;
        animation: neonFlicker 4s ease-in-out infinite;
     }
  }
  
  /* очень маленькие телефоны */
  @media (max-width: 376px) {
    .genero-text {
        position: relative;
        color: #ffffff;
        letter-spacing: 0.3em;
        font-size: 1.8rem;
        font-family: var(--font-haval);
        font-weight: 400;
        animation: neonFlicker 4s ease-in-out infinite;
     }
  }

 /* Анимация мерцания текста */
 @keyframes neonFlicker {
    0%, 100% { 
        opacity: 1; 
    }
    5%, 95% { 
        opacity: 0.85; 
    }
    10%, 90% { 
        opacity: 0.95; 
    }
    15%, 85% { 
        opacity: 0.9; 
    }
    20%, 80% { 
        opacity: 1; 
    }
 }
 
 /* Анимация пульсации неонового свечения */
 @keyframes neonPulse {
    0%, 100% { 
        opacity: 0.5; 
        filter: blur(15px); 
    }
    50% { 
        opacity: 0.8; 
        filter: blur(20px); 
    }
 }