/**
 * Page enter + hero stagger animations.
 * LCP images are never hidden — only text, overlays and shell elements animate.
 */

:root {
  --dx-enter-duration: 0.55s;
  --dx-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --dx-enter-distance: 16px;
  --dx-ken-burns-duration: 10s;
  --dx-ken-burns-easing: ease-in-out;
  --dx-ken-burns-scale-from: 1.08;
  --dx-ken-burns-scale-to: 1.18;
  --dx-ken-burns-translate-x: -3%;
  --dx-ken-burns-translate-y: -2%;
}

body.dx-page-enter:not(.dx-page-ready) .smx-header {
  opacity: 0;
  transform: translateY(calc(var(--dx-enter-distance) * -0.75));
}

body.dx-page-enter:not(.dx-page-ready) #content {
  opacity: 0;
  transform: translateY(var(--dx-enter-distance));
}

body.dx-page-enter:not(.dx-page-ready) .dx-enter-fade,
body.dx-page-enter:not(.dx-page-ready) .dx-enter-up {
  opacity: 0;
}

body.dx-page-enter:not(.dx-page-ready) .dx-enter-up {
  transform: translateY(var(--dx-enter-distance));
}

body.dx-page-ready .smx-header,
body.dx-page-ready #content {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dx-enter-duration) var(--dx-enter-easing),
    transform var(--dx-enter-duration) var(--dx-enter-easing);
}

body.dx-page-ready .dx-enter-fade,
body.dx-page-ready .dx-enter-up {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dx-enter-duration) var(--dx-enter-easing),
    transform var(--dx-enter-duration) var(--dx-enter-easing);
}

body.dx-page-ready .dx-enter-delay-1 {
  transition-delay: 0.1s;
}

body.dx-page-ready .dx-enter-delay-2 {
  transition-delay: 0.2s;
}

body.dx-page-ready .dx-enter-delay-3 {
  transition-delay: 0.3s;
}

body.dx-page-ready .dx-enter-delay-4 {
  transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  body.dx-page-enter:not(.dx-page-ready) .smx-header,
  body.dx-page-enter:not(.dx-page-ready) #content,
  body.dx-page-enter:not(.dx-page-ready) .dx-enter-fade,
  body.dx-page-enter:not(.dx-page-ready) .dx-enter-up {
    opacity: 1;
    transform: none;
  }

  body.dx-page-ready .smx-header,
  body.dx-page-ready #content,
  body.dx-page-ready .dx-enter-fade,
  body.dx-page-ready .dx-enter-up {
    transition: none;
  }
}

/* Ken Burns — Hero standard; Gutenberg: Klasse `dx-ken-burns` am Bild-Block (figure) */
@keyframes dx-ken-burns {
  0% {
    transform: scale(var(--dx-ken-burns-scale-from)) translate3d(0, 0, 0);
  }

  100% {
    transform: scale(var(--dx-ken-burns-scale-to))
      translate3d(var(--dx-ken-burns-translate-x), var(--dx-ken-burns-translate-y), 0);
  }
}

/* Wrapper mit overflow — Gutenberg setzt Klassen auf figure.wp-block-image */
.dx-hero-fullscreen__bg,
:where(
  .dx-ken-burns,
  figure.dx-ken-burns,
  .wp-block-image.dx-ken-burns,
  figure.--dx-ken-burns-duration,
  .wp-block-image.--dx-ken-burns-duration
) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .dx-hero-fullscreen__bg-image,
  :where(
    .dx-ken-burns,
    figure.dx-ken-burns,
    .wp-block-image.dx-ken-burns,
    figure.--dx-ken-burns-duration,
    .wp-block-image.--dx-ken-burns-duration
  )
    img {
    transform: scale(var(--dx-ken-burns-scale-from));
    transform-origin: center center;
    will-change: transform;
    animation: dx-ken-burns var(--dx-ken-burns-duration) var(--dx-ken-burns-easing) infinite alternate;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx-hero-fullscreen__bg-image,
  :where(
    .dx-ken-burns,
    figure.dx-ken-burns,
    .wp-block-image.dx-ken-burns,
    figure.--dx-ken-burns-duration,
    .wp-block-image.--dx-ken-burns-duration
  )
    img {
    animation: none;
    transform: none;
  }
}