/* Only the decorative background moves; the hero frame and controls stay fixed.
   The temporary layer inherits each site's responsive photograph and contrast overlays. */
[data-hero-motion="public"] {
  --hero-motion-surface: #071f18;
  --hero-motion-scale: 1.04;
  --hero-motion-duration: 4s;
  --hero-motion-fade-duration: 800ms;
}

[data-hero-motion="eap"] {
  --hero-motion-surface: #fff;
  --hero-motion-scale: 1.02;
  --hero-motion-duration: 2.5s;
  --hero-motion-fade-duration: 600ms;
}

.hero-motion-active {
  position: relative;
  isolation: isolate;
}

.hero-motion-layer,
.hero-motion-layer::before,
.hero-motion-layer::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.hero-motion-layer {
  background: inherit;
  overflow: hidden;
  z-index: -1;
}

.hero-motion-layer::before {
  content: "";
  background: var(--hero-motion-surface);
}

.hero-motion-layer::after {
  content: "";
  background: inherit;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-motion-layer::after {
    animation:
      hero-image-reveal var(--hero-motion-fade-duration) ease-out both,
      hero-image-settle var(--hero-motion-duration) cubic-bezier(.2, .65, .3, 1) both;
  }

  .hero-motion-fade {
    animation: hero-image-reveal 450ms ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-motion-layer {
    display: none;
  }
}

@keyframes hero-image-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-image-settle {
  from { transform: scale(var(--hero-motion-scale)); }
  to { transform: scale(1); }
}