/***********************************************
 * File: extras.css
 * Дополнительные эффекты поверх основной стилистики
 ***********************************************/

/* 1) "Стеклянный" фон (Glassmorphism) 
   для твоего background-overlay */
.background-overlay {
  /* Предполагается, что в main.css уже есть 
	 position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
	 и т.д. – тут мы только "добавляем" блюр */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* для Safari */
  /* Можешь настроить прозрачность, цвет, etc. */
}

/* 2) Анимированное подчеркивание при наведении на ссылки меню */
.main-menu li a {
  position: relative; /* нужно для псевдоэлемента */
}

.main-menu li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #f71313; /* цвет подчеркнутой линии */
  transition: width 0.3s ease;
}

.main-menu li a:hover::after {
  width: 100%;
}

/* 3) Подсветка при фокусе на инпутах/текстовых полях */
input:focus, 
textarea:focus, 
select:focus {
  outline: none; 
  box-shadow: 0 0 5px rgba(47,179,154, 0.5); /* бирюзовый полусвет */
}

/* 4) Ключевые кадры анимации (fadeInUp) */
@keyframes fadeInUp {
  0% {
	opacity: 0;
	transform: translateY(30px);
  }
  100% {
	opacity: 1;
	transform: translateY(0);
  }
}

/* 5) Класс запуска анимации (если хотим сразу при загрузке) */
.fade-in-up {
  animation: fadeInUp 0.8s ease forwards; 
  /* 0.8s – длительность, ease – плавность, forwards – чтобы остаться в конечном состоянии */
}

/* 6) Стартовое состояние (прозрачно и смещено), 
   чтобы использовать через IntersectionObserver */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(30px);
}