/* Стили для прелоадера, использующие псевдоэлемент ::before */
.video-container::before {
    /* Создаем псевдоэлемент */
    content: '';
    
    /* Абсолютное позиционирование относительно контейнера */
    position: absolute;
    
    /* Позиционируем в центре контейнера */
    top: 50%;
    left: 50%;
    
    /* Размеры спиннера */
    width: 100px;
    height: 100px;
    
    /* Создаем круговую рамку с прозрачным фоном */
    border: 10px solid rgba(0, 0, 0, 0.2);
    /* Верхняя часть рамки будет темнее - создает эффект вращения */
    border-top: 10px solid rgb(0, 0, 0);
    /* Делаем спиннер круглым */
    border-radius: 50%;
    
    /* Центрируем спиннер используя transform */
    transform: translate(-50%, -50%);
    
    /* Добавляем анимацию вращения */
    animation: videoPreloaderSpin 1s linear infinite;
    
    /* Помещаем спиннер поверх видео */
    z-index: 2;
    
    /* Начальное состояние - видимое */
    opacity: 1;
    
    /* Плавное исчезновение при скрытии */
    transition: opacity 0.3s ease;
    
    /* Отключаем взаимодействие с прелоадером */
    pointer-events: none;
}

/* Определяем ключевые кадры анимации вращения */
@keyframes videoPreloaderSpin {
    /* Начальное положение (0 градусов) */
    0% { 
        /* Сохраняем центрирование при вращении */
        transform: translate(-50%, -50%) rotate(0deg);
    }
    /* Конечное положение (полный оборот - 360 градусов) */
    100% { 
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Стили для скрытия прелоадера после загрузки видео */
.video-container.loaded::before {
    /* Делаем прелоадер полностью прозрачным */
    opacity: 0;
}