.hero-video-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #15100d;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  opacity: 0.72;
  filter: saturate(1.14) contrast(1.05) brightness(0.78);
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 206, 219, 0.26), transparent 36%),
    radial-gradient(circle at 82% 24%, rgba(212, 175, 55, 0.20), transparent 34%),
    linear-gradient(120deg, rgba(21, 16, 13, 0.82), rgba(74, 42, 37, 0.34), rgba(21, 16, 13, 0.78));
  pointer-events: none;
}

.hero-video-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, rgba(21, 16, 13, 0.92));
  pointer-events: none;
}

.hero-video-section .hero-grid {
  position: relative;
  z-index: 2;
}

.hero-video-section .hero-frame {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34), 0 0 70px rgba(212, 175, 55, 0.12);
}

@media (max-width: 768px) {
  .hero-bg-video {
    opacity: 0.52;
  }

  .hero-video-overlay {
    background:
      radial-gradient(circle at 50% 15%, rgba(255, 206, 219, 0.20), transparent 42%),
      linear-gradient(155deg, rgba(21, 16, 13, 0.90), rgba(74, 42, 37, 0.45), rgba(21, 16, 13, 0.86));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    display: none;
  }

  .hero-video-section {
    background:
      linear-gradient(120deg, rgba(21, 16, 13, 0.94), rgba(74, 42, 37, 0.66)),
      url("../images/hero-clouds-poster.jpg") center / cover no-repeat;
  }
}