/* header.css */

/* 1) Подключаем шрифт (Semibold, 600). */
@font-face {
  font-family: 'SourceSans3'; /* Имя шрифта */
  src: url('../assets/fonts/SourceSans3-Semibold.woff2') format('woff2'),
       url('../assets/fonts/SourceSans3-Semibold.woff') format('woff'); /* Файлы шрифта */
  font-weight: 600; /* Semibold */
  font-style: normal; /* Обычный стиль */
  font-display: swap; /* Оптимальная загрузка */
}

/* НОВЫЙ БЛОК: Общий контейнер для Header, Connect Wallet и сферы */
.header-container {
  position: fixed; /* Фиксированное положение */
  top: 0; /* Сверху экрана */
  left: 0; /* Слева */
  width: 100vw; /* Полная ширина */
  z-index: 900; /* Поверх других элементов */
  display: flex; /* Flex для размещения шапки, кнопки и сферы */
  flex-direction: column; /* Вертикальное расположение */
  align-items: center; /* Центрирование по горизонтали */
  visibility: hidden; /* НОВЫЙ КОММЕНТАРИЙ: Изначально скрыт */
  opacity: 0; /* НОВЫЙ КОММЕНТАРИЙ: Изначально прозрачен для анимации */
  transition: opacity 0.2s ease-in-out; /* НОВЫЙ КОММЕНТАРИЙ: Установлено 0.2s для синхронизации с .page */
}

/* 2) .header – аналог claim-button (во всю ширину). */
.header {
  width: 100vw;  /* На всю ширину экрана */
  max-width: 100%; /* Страховка от прокрутки */
  height: 60px;  /* Фиксированная высота */
  position: relative; /* НОВЫЙ КОММЕНТАРИЙ: Изменено с fixed на relative, так как теперь позиционируется внутри .header-container */
  top: 0.5%; /* Слегка отступ сверху */
  left: 0; /* НОВЫЙ КОММЕНТАРИЙ: Убрано центрирование, так как оно на уровне .header-container */
  transform: none; /* НОВЫЙ КОММЕНТАРИЙ: Убран translateX, так как центрирование через flex */
  z-index: 10; /* НОВЫЙ КОММЕНТАРИЙ: Выше сферы (z-index: 2) */
  display: flex; /* Расположение кнопки + info справа */
  align-items: center; /* Выравнивание по вертикали */
  justify-content: flex-start; /* Кнопка слева, info справа */
  box-sizing: border-box; /* Учитываем padding в расчётах */
  border: 1px solid #464646; /* Тонкая рамка */
  background: transparent; /* Прозрачный фон */
  padding: 0 2%; /* Гориз. отступы */
  overflow: hidden; /* Скрываем всё лишнее */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.979), 0 0 30px rgb(19, 18, 18); /* Тень */
  transition: background 1s ease-in-out; /* Плавное изменение фона */
}

/* При нажатии в .header => .active (см. JS). */
.header.active {
  background: #050505fd; /* Затемнённый фон */
}

/* Стили для анимации рамки */
.header svg {
  position: absolute; /* Абсолютное позиционирование */
  left: 0; /* Слева */
  top: 0; /* Сверху */
  width: 100%; /* На всю ширину */
  height: 100%; /* На всю высоту */
  fill: none; /* Без заливки */
}

/* Линия рамки */
.header .hl-line {
  stroke: #fff; /* Белая линия */
  stroke-width: 0.5; /* Толщина */
  stroke-dasharray: 150 480; /* Пунктир */
  stroke-dashoffset: 150; /* Начальное смещение */
  transition: stroke-dashoffset 1s ease-in-out; /* Плавный пунктир */
}

/* .header.active => «бегущий» пунктир. */
.header.active .hl-line {
  stroke-dashoffset: -480; /* Двигаем пунктир */
}

/* 5) Блок справа (.header-info-container) со звёздочкой и «42» (золотой). */
.header-info-container {
  display: flex; /* Гориз. расположение */
  align-items: center; /* Выравнивание */
  margin-left: auto; /* Двигаем блок вправо */
  margin-right: 8px; /* Отступ 10px от правого края шапки */
  visibility: visible; /* Показываем сразу */
}

/* Иконка звезды */
.header-info-container .header-icon {
  width: 20px; /* Ширина звезды */
  height: 20px; /* Высота звезды */
  margin-right: 6px; /* Отступ перед текстом */
}

/* Число «42» (можно менять font-size). */
.header-info-container .header-hours-text {
  font-family: 'SourceSans3', sans-serif; /* Шрифт */
  font-weight: 600; /* Semibold */
  font-size: 26px; /* Размер, меняйте при необходимости */
  user-select: none; /* Запрещаем выделение */
  text-align: left; /* По левому краю */
  background: linear-gradient(to top, #ffc74e 0%, #fff 100%); /* Золотой градиент */
  -webkit-background-clip: text; /* Градиент в тексте (Safari) */
  background-clip: text; /* Остальные */
  -webkit-text-fill-color: transparent; /* Прозрачный текст */
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.2); /* Подсветка */
  /* НОВЫЙ КОММЕНТАРИЙ: Убрано min-width, чтобы текст адаптировался к своей ширине */
}