:root {
  --bf-accent: #00babd;
}

.hero-bar {
  position: relative;
}

.hero-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    #ddfdff,
    #ecfcfd91,
    rgba(255, 255, 255, 0)
  );
}
[data-theme="dark"] .hero-bar::before {
  background: linear-gradient(to right, #002323, #04282897, rgba(0, 0, 0, 0));
}

.hero-bar__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.bg-video--dark {
  display: none;
}
[data-theme="dark"] .bg-video--light {
  display: none;
}
[data-theme="dark"] .bg-video--dark {
  display: block;
}

.hero-bar > .container {
  position: relative;
  z-index: 3;
}

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