.hero-art {
  position: absolute;
  right: -3%;
  top: 0;
  width: 63%;
  height: 100%;
  overflow: hidden;
  display: block;
  mask-image: linear-gradient(90deg, transparent 0, #000 25%, #000 100%);
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(7,6,11,.78), transparent 32%), linear-gradient(0deg, #07060b, transparent 28%);
  filter: none;
}
.hero-art img {
  position: static;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 72% center;
  border-radius: 0;
  filter: saturate(.95) contrast(1.06);
  animation: sceneMove 11s ease-in-out infinite alternate;
}
.scene-light { position:absolute; z-index:5; width:270px; height:180px; left:40%; bottom:18%; background:radial-gradient(circle,rgba(255,122,24,.4),transparent 68%); filter:blur(25px); animation:pulse 2.3s ease-in-out infinite; }
.spark { position:absolute; z-index:6; width:4px; height:4px; border-radius:50%; background:#ff9c48; box-shadow:0 0 12px #ff7a18; bottom:23%; left:46%; animation:spark 2.7s ease-out infinite; }
.spark.s2 { left:52%; animation-delay:.8s; }.spark.s3 { left:57%; animation-delay:1.5s; }
@keyframes sceneMove { to { transform:scale(1.035) translate3d(-6px,-4px,0); } }
@keyframes pulse { 50% { opacity:.55; transform:scale(1.12); } }
@keyframes spark { to { transform:translate(38px,-170px); opacity:0; } }
@media(max-width:900px){.hero-art{right:-38%;top:auto;bottom:-20px;width:110%;height:72%;opacity:.46;mask-image:linear-gradient(90deg,transparent,#000 30%)}.hero-art img{object-position:70% center}}
@media(prefers-reduced-motion:reduce){.hero-art img,.scene-light,.spark{animation:none}}