/* Общий видео-блок с кастомной кнопкой */

.lavrus-video {
  width: 100%;
  max-width: 960px;
  margin: 0 auto 32px;
}

.lavrus-video__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-black-solid);
}

.lavrus-video__player,
.lavrus-video__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-black-solid);
}

.lavrus-video__player {
  object-fit: contain;
}

.lavrus-video__media:not(.lavrus-video__media--playing) .lavrus-video__player {
  pointer-events: none;
}

.lavrus-video__player::-webkit-media-controls-start-playback-button,
.lavrus-video__player::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}

.lavrus-video__media:not(.lavrus-video__media--playing)
  .lavrus-video__player::-webkit-media-controls {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.lavrus-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  width: 270px;
  height: 270px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: all 0.3s ease;
}

.lavrus-video__play::before {
  content: "";
  position: absolute;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  left: -1rem;
  z-index: 10;
  background: radial-gradient(
    ellipse at center,
    #b620e0 0,
    rgba(182, 32, 224, 0) 60%
  );
  opacity: 0.5;
  pointer-events: none;
  transition: all 0.3s ease;
}

.lavrus-video__play::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: url("../assets/icons/player.svg") center / contain no-repeat;
  pointer-events: none;
}

.lavrus-video__play:hover,
.lavrus-video__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.4);
}

.lavrus-video__play:hover::before,
.lavrus-video__play:focus-visible::before {
  opacity: 0.7;
}

.lavrus-video__play:focus-visible {
  outline: 2px solid var(--color-white-solid);
  outline-offset: 6px;
}

.lavrus-video__media--playing .lavrus-video__play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 1023px) {
  .lavrus-video__play {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 767px) {
  .lavrus-video__play {
    width: 96px;
    height: 96px;
  }
}