:root{
    --hero-background: url("../images/hero/banner.png");
    --hero-bg-position: center center;
    --hero-bg-opacity: .80;
    --hero-overlay-strength: .90;
}

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#06182c !important;
}

/* Image layer */
.hero-background-image{
    position:absolute;
    inset:0;
    z-index:-5;

    background-image:var(--hero-background);
    background-position:var(--hero-bg-position);
    background-size:cover;
    background-repeat:no-repeat;

    opacity:var(--hero-bg-opacity);
    transform:scale(1.025);

    transition:
        opacity .5s ease,
        background-image .5s ease;
}

/* Elegant dark + navy/orange cinematic treatment */
.hero-background-overlay{
  position:absolute;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(4,15,28,var(--hero-overlay-strength)) 0%,
      rgba(5,23,42,.78) 42%,
      rgba(4,24,43,.43) 72%,
      rgba(4,18,33,.62) 100%),
    linear-gradient(180deg,
      rgba(3,13,25,.48) 0%,
      transparent 45%,
      rgba(3,13,25,.52) 100%);
}

/* Make the existing digital grid an enhancement, not the main background */
.hero-grid{
  opacity:.24 !important;
  z-index:-2;
}
.hero-glow{z-index:-1}
.hero-orbit{z-index:-1}

/* Keep the existing dancer/temple/AI artwork, but soften it so
   a photographic background can become the dominant hero visual. */
.hero-art{
  z-index:2;
}
.hero-art .dancer,
.hero-art .data-head,
.hero-art .temple-silhouette,
.hero-art .lotus{
  opacity:.78;
  transition:opacity .4s ease;
}
.hero:hover .hero-art .dancer,
.hero:hover .hero-art .data-head{
  opacity:.92;
}

/* Editing control — visible only when desired */
.hero-bg-editor{
  position:absolute;
  z-index:20;
  right:24px;
  bottom:22px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(3,16,30,.68);
  backdrop-filter:blur(12px);
  opacity:.32;
  transition:opacity .25s ease;
}
.hero-bg-editor:hover{opacity:1}
.hero-bg-editor span{
  padding:0 7px;
  color:#d9b45a;
  font-size:7px;
  font-weight:800;
  letter-spacing:1.5px;
}
.hero-bg-editor button{
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  padding:7px 8px;
  font:700 7px Inter,Arial,sans-serif;
  letter-spacing:.7px;
  cursor:pointer;
}
.hero-bg-editor button:hover,
.hero-bg-editor button.active{
  border-color:#ef5b22;
  color:#f3c96a;
}

/* On smaller screens, keep the image visible but prevent controls
   from competing with the hero content. */
@media(max-width:700px){
  .hero-background-image{
    background-position:60% center;
    opacity:.27;
  }
  .hero-bg-editor{
    display:none;
  }
}