/* V28 — hero background with a Mercedes appearing to drive on the road */
.hero{isolation:isolate}
.hero-mercedes-motion{
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 72% 22%, rgba(215,177,99,.12), transparent 24%),
    linear-gradient(180deg, rgba(7,12,16,.28), rgba(7,12,16,.74)),
    url('../images/balk-vip-transfer-mercedes-turkgozu.webp') center 60%/cover no-repeat;
  opacity:.22;
  filter:saturate(.78) brightness(.48) contrast(1.05) blur(1.2px);
  transform:scale(1.05);
}
.hero-mercedes-motion::before{
  content:"";
  position:absolute;
  width:clamp(360px,34vw,560px);
  aspect-ratio:650/560;
  left:-22vw;
  bottom:6%;
  background:url('../images/hero-mercedes-drive.webp') center/contain no-repeat;
  opacity:.30;
  filter:brightness(.92) contrast(1.08) saturate(.92) blur(.3px)
         drop-shadow(0 24px 36px rgba(0,0,0,.28));
  animation:heroDriveMercedes 15.5s linear infinite;
  will-change:transform,opacity;
}
.hero-mercedes-motion::after{
  content:"";
  position:absolute;
  width:34vw;
  max-width:460px;
  height:90px;
  left:-12vw;
  bottom:8%;
  background:radial-gradient(ellipse at center, rgba(215,177,99,.22) 0%, rgba(215,177,99,.08) 38%, transparent 72%);
  filter:blur(14px);
  transform:translate3d(0,0,0);
  animation:heroDriveGlow 15.5s linear infinite;
  will-change:transform,opacity;
}
.hero>.hero-glow{z-index:0}
.hero-grid,.home-route-wrap{position:relative;z-index:3}

@keyframes heroDriveMercedes{
  0%{transform:translate3d(0,0,0) scale(.84);opacity:0}
  8%{opacity:.19}
  18%{opacity:.30}
  50%{transform:translate3d(47vw,-1.5%,0) scale(.93)}
  82%{opacity:.28}
  100%{transform:translate3d(92vw,-2.2%,0) scale(1.02);opacity:0}
}

@keyframes heroDriveGlow{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:.24}
  50%{transform:translate3d(48vw,0,0);opacity:.16}
  100%{transform:translate3d(92vw,0,0);opacity:0}
}

@media(min-width:1181px){
  .hero-mercedes-motion{background-position:center 57%}
  .hero-mercedes-motion::before{bottom:7%}
}

@media(max-width:1180px){
  .hero-mercedes-motion{
    opacity:.18;
    background-position:center 62%;
  }
  .hero-mercedes-motion::before{
    width:min(470px,44vw);
    left:-28vw;
    bottom:5%;
    opacity:.22;
    animation-duration:16.5s;
  }
  .hero-mercedes-motion::after{
    width:min(360px,36vw);
    bottom:7%;
    animation-duration:16.5s;
  }
}

@media(max-width:900px){
  .hero-mercedes-motion{
    opacity:.16;
    background-size:cover;
    background-position:center 66%;
    filter:saturate(.72) brightness(.42) blur(1.4px);
  }
  .hero-mercedes-motion::before{
    width:min(360px,54vw);
    left:-36vw;
    bottom:8%;
    opacity:.18;
    animation-duration:17.5s;
  }
  .hero-mercedes-motion::after{
    width:min(260px,44vw);
    bottom:10%;
    animation-duration:17.5s;
  }
}

@media(max-width:640px){
  .hero-mercedes-motion{
    opacity:.13;
    background-position:center 72%;
    filter:saturate(.68) brightness(.38) blur(1.6px);
  }
  .hero-mercedes-motion::before{
    width:265px;
    left:-170px;
    bottom:14%;
    opacity:.14;
    animation-duration:18s;
  }
  .hero-mercedes-motion::after{
    width:180px;
    bottom:16%;
    filter:blur(12px);
    animation-duration:18s;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-mercedes-motion::before,
  .hero-mercedes-motion::after{animation:none!important}
  .hero-mercedes-motion::before{transform:translate3d(32vw,0,0) scale(.92);opacity:.16}
  .hero-mercedes-motion::after{transform:translate3d(32vw,0,0);opacity:.12}
}