/* Неоновая анимация для заголовка VIDEOMANIA */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap');

/* Ключевые кадры для неоновой анимации */
@keyframes lights {
  0% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
  
  30% { 
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  40% { 
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
      0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
  }
  
  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.5),
      0 0 0.125em hsla(320, 100%, 60%, 0.5),
      0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
      -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
  }
  
  100% {
    color: hsl(230, 40%, 80%);
    text-shadow:
      0 0 1em hsla(320, 100%, 50%, 0.2),
      0 0 0.125em hsla(320, 100%, 60%, 0.3),
      1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
      -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
  }
}

/* Класс для неонового заголовка */
.videomania-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  animation: lights 5s 750ms linear infinite;
  color: hsl(230, 100%, 95%);
  /* Отключаем стандартный градиент */
  background: none;
  -webkit-text-fill-color: initial;
  /* Увеличиваем размер текста в 2 раза через transform для сохранения пропорций */
  transform: scale(2);
  transform-origin: left center;
  display: inline-block;
}

/* Переопределяем стили градиента для элемента с обоими классами */
.gradient-text.videomania-title {
  background: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: initial;
  animation: lights 5s 750ms linear infinite;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
  .videomania-title {
    transform: scale(1.8);
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .videomania-title {
    transform: scale(1.6);
  }
}

/* Адаптивность для очень маленьких экранов */
@media (max-width: 480px) {
  .videomania-title {
    transform: scale(1.4);
  }
}

/* Поддержка reduced motion */
@media (prefers-reduced-motion: reduce) {
  .videomania-title {
    animation: none;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}