.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: hero-cinematic-zoom 24s ease-in-out infinite alternate;
  transform-origin: 50% 46%;
  will-change: transform;
}

.hero-media .hero-image,
.hero-lantern-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-media .hero-image {
  filter: sepia(0.04) saturate(0.91) contrast(0.96);
  animation: none;
}

.hero-lantern-layer {
  z-index: 1;
  pointer-events: none;
  transform-origin: 50% 6%;
  animation: lantern-sway 4.8s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes hero-cinematic-zoom {
  from {
    transform: scale(1.01) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.105) translate3d(0, -1.2%, 0);
  }
}

@keyframes lantern-sway {
  from {
    transform: translate3d(-4px, 0, 0) rotate(-0.7deg);
  }
  to {
    transform: translate3d(4px, 0, 0) rotate(0.7deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media,
  .hero-lantern-layer {
    animation: none !important;
  }
}