/* Homepage-only, cinematic hardware ride. The photographic computer scene
   stays visible while the canvas supplies the moving first-person circuitry. */
.hero .cinematic-hardware-bg {
  background:
    linear-gradient(90deg, rgba(1, 5, 10, .72) 0%, rgba(1, 7, 14, .32) 49%, rgba(1, 6, 12, .40) 100%),
    radial-gradient(circle at 64% 42%, rgba(87, 204, 255, .16), transparent 36%),
    url("assets/cinematic-hardware-journey-v2.webp") 57% 54% / cover no-repeat;
  filter: saturate(1.14) brightness(.70) contrast(1.16) drop-shadow(0 24px 48px rgba(0, 0, 0, .68));
  animation: hardware-ride-glide 22s cubic-bezier(.42, .03, .42, .98) infinite alternate !important;
  transform-origin: 59% 54%;
}

.hero #hero-canvas {
  opacity: .83 !important;
  mix-blend-mode: screen;
  filter: saturate(1.14) contrast(1.05) drop-shadow(0 0 13px rgba(53, 188, 255, .12));
}

.hero .wave-field,
.hero .hero-grid,
.hero .scanlines { opacity: .025; }

@keyframes hardware-ride-glide {
  0% { background-position: 56% 54%; transform: translate3d(-.28%, .18%, 0); }
  52% { background-position: 59% 52%; transform: translate3d(.34%, -.16%, 0); }
  100% { background-position: 61% 51%; transform: translate3d(.55%, -.32%, 0); }
}

@media (max-width: 750px) {
  .hero .cinematic-hardware-bg {
    /* Phone GPUs can visibly stutter while repainting a large image's
       background-position. Keep the photo locked in place and move the
       already-composited layer very slowly instead. */
    background-position: 59% center;
    filter: saturate(1.05) brightness(.66) contrast(1.08);
    animation: phone-hardware-ride 34s ease-in-out infinite alternate !important;
    transform: translate3d(0, 0, 0) scale(1.035);
    transform-origin: 59% 54%;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* Avoid mobile blending/filter artifacts while keeping the keyboard,
     light trail, and customer-journey graphics crisp. */
  .hero #hero-canvas {
    opacity: .72 !important;
    mix-blend-mode: normal;
    filter: none;
  }
}

@keyframes phone-hardware-ride {
  from { transform: translate3d(-.16%, .08%, 0) scale(1.035); }
  to { transform: translate3d(.16%, -.08%, 0) scale(1.055); }
}

@media (prefers-reduced-motion: reduce) {
  .hero .cinematic-hardware-bg { animation: none; transform: none; }
}