/* Контейнер предзагрузчика */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10005;
    transition: opacity 1s ease-in-out;
  }
  
  /* Анимация загрузки */
  .hole {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  i {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0;
    animation: scale 3s infinite linear;
  }
  
  i:nth-child(n) {
    animation-delay: calc(0.3s * var(--i));
  }
  
  @keyframes scale {
    0% {
        transform: scale(2);
        opacity: 0;
        box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1) translate(0px, -5px);
        opacity: 1;
        box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(0.1) translate(0px, 5px);
        opacity: 0;
        box-shadow: 0px 10px 20px rgba(255, 255, 255, 0);
    }
  }
  
  /* Полноэкранное изображение */
  .fullscreen-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 100% ширины экрана */
    height: 100vh; /* 100% высоты экрана */
    background: url('logo2.jpg') center/cover no-repeat; /* Используем cover для полноэкранного отображения */
    opacity: 1;
    z-index: 10004;
    transition: transform 2s ease-in-out, opacity 1.5s ease-in-out;
  }
  
  /* Анимация приближения и исчезновения */
  .zoom-out {
    transform: scale(1.2);
    opacity: 0;
  }

  #blackOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 1;
    transition: opacity 2s ease-out;
    pointer-events: none;
    z-index: 10001;
  }