.video-player__wrapper {
  aspect-ratio: 1 / 1;
}

.circle-video-player {
  cursor: pointer;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform 0.35s ease;
  transform: translate3d(0, 0, 0);
}

.circle-video-player__play {
  width: 21.5%;
  height: 25.5%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 1;
  transition: all 0.3s ease;
  opacity: 1;
}

.circle-video-player-progress {
  width: 110%;
  height: 110%;
  display: block;
  z-index: -1;
  border-radius: 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: opacity 0.35s ease;
  position: absolute;
  opacity: 0;
}

.circle-video-player-progress__value {
    stroke: #C1272D; /* Колір прогрес-бара */
    stroke-width: 12; /* Товщина лінії прогрес-бара */
    fill: none; /* Відсутність заливки */
    stroke-dasharray: 339.29; /* Загальна довжина лінії (довжина кола) */
    stroke-dashoffset: 339.29; /* Початковий стан - повністю заповнений */
    transition: stroke-dashoffset 0.6s linear; /* Плавна анімація зміни прогресу */
    filter: drop-shadow(0 0 10px #C1272D); /* Ефект світіння */
}

.circle-video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  display: block;
}

.circle-video-player.playing .circle-video-player-progress {
  opacity: 1;
}

.circle-video-player.playing .circle-video-player__play {
  opacity: 0;
}

.circle-video-player.glowing {
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(193, 39, 45, 0.5), 
              0 0 35px rgba(193, 39, 45, 0.4), 
              0 0 50px rgba(193, 39, 45, 0.3), 
              0 0 65px rgba(193, 39, 45, 0.2);
  transition: box-shadow 0.3s;
}

/* Основні стилі для .video-effect */
.video-effect {
  position: relative;
  z-index: 0;
}

/* Світлова аура та Глибокий енергетичний обвід */
.video-effect::before,
.video-effect::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  border: 1px solid var(--bs-danger);
}

/* Світлова аура */
.video-effect::before {
  width: 110%;
  height: 110%;
  transition: all 0.5s;
}

/* Глибокий енергетичний обвід */
.video-effect::after {
  width: 120%;
  height: 120%;
}

.circle-video-bg {
  background: linear-gradient(90deg, #a13f3e 0%, #efc286 100%);
  border-radius: 50%;
}