/* Separate motion layer: PSD coordinates, sizing, shadows and responsive layout stay untouched. */
.hero-static-scene > .hero-motion-plane {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--hero-parallax-x, 0px), var(--hero-parallax-y, 0px), 0);
  transition: transform 550ms ease-out;
}

.hero-static-scene [data-psd-id="17"] img {
  --hero-float-range: 4px;
  animation: hero-card-float 5.2s ease-in-out -0.7s infinite;
}
.hero-static-scene [data-psd-id="43"] img {
  --hero-float-range: 5px;
  animation: hero-card-float 6.4s ease-in-out -2.6s infinite;
}
.hero-static-scene [data-psd-id="21"] img {
  --hero-float-range: 3px;
  animation: hero-card-float 4.8s ease-in-out -1.5s infinite;
}
.hero-static-scene [data-psd-id="19"] img {
  --hero-float-range: 3.5px;
  animation: hero-card-float 7s ease-in-out -4.1s infinite;
}
.hero-static-scene [data-psd-id="30"] img {
  --hero-float-range: 2px;
  animation: hero-card-float 7s ease-in-out -3.7s infinite;
}
.hero-static-scene [data-psd-id="36"] img {
  transform-origin: 50% 80%;
  animation: hero-joyboy-sway 6s ease-in-out -1.8s infinite;
}

@keyframes hero-card-float {
  0%, 100% { transform: translateY(calc(-1 * var(--hero-float-range))); }
  50% { transform: translateY(var(--hero-float-range)); }
}
@keyframes hero-joyboy-sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

.hero-motion-paused .hero-static-scene img {
  animation-play-state: paused;
}

/* Touch/mobile never receives mouse offsets. Existing mobile Hero is not replaced. */
@media (max-width: 700px), (hover: none), (pointer: coarse) {
  .hero-static-scene > .hero-motion-plane {
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-static-enabled .hero-static-scene,
  .hero-static-enabled .hero-static-scene * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}