/* Сброс отступов и растягивание на весь экран */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Lato', sans-serif; /* <-- добавлено */
 
}

/* Видео на фоне */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
    background-color: black; /* <-- добавлено */

}



.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background: url('/images/h.jpg') no-repeat center center;
  background-size: cover;
}

/* ------------------ NULLMISTRESS ------------------ */

 


 

 

/* ------------------ Ссылки ------------------ */
@keyframes flicker-fast {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0.2; }
  30% { opacity: 1; }
  40% { opacity: 0.5; }
  50% { opacity: 1; }
  60% { opacity: 0.3; }
  70% { opacity: 1; }
  80% { opacity: 0.6; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

.layer3 a {
  opacity: 0;
  animation: flicker-fast 0.6s ease-in-out 1s forwards;
}

.layer3 a:nth-child(1) { animation-delay: 1s; }
.layer3 a:nth-child(2) { animation-delay: 1.2s; }
.layer3 a:nth-child(3) { animation-delay: 1.4s; }


/* Полупрозрачный оверлей для читаемости текста */
.overlay {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.4);
  z-index: 0;
}

/* Контент (заголовок и подзаголовок) */
.content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
 padding: 40px 20px 0 20px;  /* отступ сверху 150px */

}

.content h1 {
    
  font-size: 3em;
  margin: 0.1em 0;
}

/* Подзаголовок и ссылка */
.content p {
  font-size: 1.5em;
  max-width: 800px;
  letter-spacing: 4px;               /* межбуквенное расстояние */
  font-family: 'Lato', sans-serif; /* <-- добавлено */
   margin-top: ;
}

.content p a {
  color: white;                       /* стандартный цвет */
  text-decoration: none;              /* убираем подчёркивание */
  transition: color 0.3s, transform 0.3s;
}

.content p a:hover {
  color: #a09e9e;                     /* цвет при наведении */
  transform: scale(1.05);             /* лёгкое увеличение при наведении */
}


/* Адаптивность текста для мобильных экранов */
@media (max-width: 768px) {
  .content h1 { font-size: 2em; }
  .content p { font-size: 1.2em; }
}

/* Кнопка управления звуком */
.sound-toggle {
  position: fixed;
  top: 45px;
  right: 40px;
  width: 50px;
  height: 50px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s, background 0.3s;
}

.sound-toggle:hover {
  transform: scale(1.2);
  background: rgba(255,255,255,0.4);
}

.sound-toggle svg {
  width: 24px;
  height: 24px;
  fill: white;
  transition: fill 0.3s;
}

.muted svg {
  fill: #f0e8e8;
}

 
/* Иконки ссылок снизу в ряд (только иконки, без текста) */
.social-icons {
  position: fixed;
  bottom: 37px;
  left: 35px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  z-index: 2;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 24px;
  transition: transform 0.2s, color 0.2s;
}

.social-icons li a:hover {
  transform: scale(1.2);
  color: #bbbaba; /* подсветка при наведении */
}

/* Мобильная адаптация */
@media(max-width:768px){
  .social-icons {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Логотип слева вверху */
.top-logo {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 3; /* выше контента и видео */
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-logo li a img {
  width: 100px; /* можно подстроить размер */
  height: auto;
  display: block;
  transition: transform 0.3s;
}

.top-logo li a img:hover {
  transform: scale(1.1); /* лёгкая анимация при наведении */
}

.layer3 {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
 
}

.layer3 a {
  color: white;
  text-decoration: none;
  font-size: 1.2em;
  transition: color 0.2s, transform 0.2s;
}

.layer3 a:hover {
  color: #cbcbcb;
  transform: scale(1.1);
}

/* Адаптивный размер текста */
@media(max-width:768px){
  .layer3 a {
    font-size: 1em;
  }
}
/* Адаптация для маленьких экранов */
@media (max-width: 400px) {

  .content h1 {
    font-size: 1em;          /* уменьшаем заголовок */
    letter-spacing: 4px;     /* уменьшаем раздвижение букв */
  }

   .layer3 {
    gap: 2px; /* уменьшаем расстояние между ссылками */
  }
  .content p {
    font-size: 0.8em;          /* уменьшаем подзаголовок */
    letter-spacing: 2px;
  }

  .layer3 a {
    font-size: 0.5em;        /* уменьшаем ссылки */
  
  }
 
  .social-icons {
    bottom: 20px;            /* увеличиваем отступ от нижнего края */
    gap: 15px;               /* чуть больше расстояние между иконками */
    left: 25px;
        transform: none; /* убираем центрирование */


  }

    .social-icons li a {
    font-size: 14px;   /* уменьшили размер иконок */
  }

  .top-logo li a img {
    width: 80px;             /* уменьшаем логотип */
  }

  .sound-toggle {
    top: 50px;               /* немного ниже кнопка звука */
    width: 35px;
    height: 35px;
  }
}


 
/* Адаптация для маленьких экранов в ландшафте */
@media (max-width: 600px) and (orientation: landscape) {
  .content h1 { font-size: 1.2em; letter-spacing: 3px; }
  .content p { font-size: 0.6em; letter-spacing: 2px; }
  .layer3 a { font-size: 0.6em; }
  .layer3 { gap: 2px; }
  .social-icons { bottom: 15px; left: 100px; gap: 13px; }
  .social-icons li a { font-size: 16px; }
  .top-logo li a img { width: 75px; }
  .sound-toggle { top: 40px; width: 32px; height: 32px; }
}