/* V10 — latest generated BMW parking scene as the actual hero background */

/* The generated image already contains the G30 and the headlight beams.
   Keep it as one cinematic background; do not layer a second car over it. */
.hero-unified .hero-scene{
  background:#020305;
}
.hero-unified .hero-scene:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:930px;
  background:url("assets/hero-generated-g30.png") center top / cover no-repeat;
  filter:none;
  transform:none;
  mix-blend-mode:normal;
  pointer-events:none;
}
.hero-unified .hero-scene:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(2,4,7,.96) 0%,
      rgba(2,4,7,.90) 18%,
      rgba(2,4,7,.68) 33%,
      rgba(2,4,7,.24) 49%,
      rgba(2,4,7,.03) 63%,
      rgba(2,4,7,.02) 100%),
    linear-gradient(180deg,
      rgba(2,4,7,.12) 0%,
      rgba(2,4,7,.02) 42%,
      rgba(2,4,7,.14) 59%,
      rgba(2,4,7,.76) 78%,
      #020305 93%,
      #020305 100%);
  pointer-events:none;
}

/* Car is already baked into the generated scene. */
.hero-unified .hero-g30,
.hero-unified .hero-vignette{
  display:none!important;
}

/* Keep the first product window visually connected to the same scene. */
.hero-top{
  min-height:500px;
}
.hero-product-showcase{
  margin:-18px auto 0;
}
.hero-product-showcase .demo-window{
  box-shadow:
    0 0 0 1px rgba(132,173,255,.08),
    0 0 66px rgba(54,117,255,.14),
    0 46px 120px rgba(0,0,0,.72);
}

/* Wide screens: preserve the complete right-side car silhouette. */
@media(min-width:1900px){
  .hero-unified .hero-scene:before{
    height:980px;
    background-position:center top;
  }
  .hero-top{min-height:520px}
}

/* Tablet: crop from the right without bringing the car into the copy column. */
@media(max-width:900px){
  .hero-unified .hero-scene:before{
    height:830px;
    background-position:62% top;
  }
  .hero-unified .hero-scene:after{
    background:
      linear-gradient(180deg,
        rgba(2,4,7,.96) 0%,
        rgba(2,4,7,.86) 38%,
        rgba(2,4,7,.34) 61%,
        rgba(2,4,7,.70) 78%,
        #020305 94%),
      linear-gradient(90deg,
        rgba(2,4,7,.72) 0%,
        rgba(2,4,7,.42) 46%,
        rgba(2,4,7,.05) 82%);
  }
  .hero-top{min-height:610px}
}

/* Phones: image remains cinematic below the copy; headline stays readable. */
@media(max-width:600px){
  .hero-unified .hero-scene:before{
    height:760px;
    background-position:67% top;
  }
  .hero-unified .hero-scene:after{
    background:
      linear-gradient(180deg,
        rgba(2,4,7,.985) 0%,
        rgba(2,4,7,.94) 43%,
        rgba(2,4,7,.50) 61%,
        rgba(2,4,7,.72) 78%,
        #020305 94%),
      linear-gradient(90deg,
        rgba(2,4,7,.76) 0%,
        rgba(2,4,7,.42) 52%,
        rgba(2,4,7,.08) 90%);
  }
  .hero-top{min-height:620px}
  .hero-product-showcase{margin-top:-4px}
}