.hero-bg-img {
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('hero-login.jpg');
  background-size: cover;
  /* Character stays on the left; center kept free for site logo */
  background-position: left 35%;
  background-repeat: no-repeat;
  filter: brightness(1.18) contrast(1.12) saturate(1.18);
  transform: none;
  animation: none;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left 35%;
  filter: brightness(1.18) contrast(1.12) saturate(1.18);
  transform: none;
  z-index: 1;
}

#flame-hero-canvas {
  z-index: 2;
  opacity: 0.18;
}

.hero-bg-overlay {
  /* Soften left side so the character stays visible */
  background: radial-gradient(ellipse at 18% 48%, rgba(3, 6, 17, 0) 0%, rgba(3, 6, 17, 0.12) 42%, rgba(3, 6, 17, 0.55) 100%),
              linear-gradient(90deg, rgba(3, 6, 17, 0.08) 0%, rgba(3, 6, 17, 0.18) 45%, rgba(3, 6, 17, 0.55) 100%),
              linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(6, 12, 30, 0.22) 78%, #030611 100%);
  z-index: 3;
}

.hero-wrapper > .container {
  position: relative;
  z-index: 5;
}

.hero-logo-large {
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  position: relative;
  z-index: 6;
}

@media (max-width: 900px) {
  .hero-bg-img,
  .hero-bg-video {
    object-position: 22% 32%;
    background-position: 22% 32%;
  }
}

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