/* The Association Events banner: 18 seconds, ease-in-out, one complete drift.
   Only photographic banner planes move. Text, shade, layout and Youth home stay still. */
.phero > .hero__media > picture:not(.lit),
.association-hero .association-hero__motion {
  --banner-drift-x: min(18px, 5vw);
  transform-origin: 50% 50%;
  transform: scale(1.12);
  animation: ayaBannerDrift 18s ease-in-out infinite;
  animation-play-state: paused;
  will-change: auto;
}
.phero[data-banner-active="true"] > .hero__media > picture:not(.lit),
.association-hero[data-banner-active="true"] .association-hero__motion {
  animation-play-state: running;
  will-change: transform;
}
@keyframes ayaBannerDrift {
  0%, 100% { transform: scale(1.12) translate(0, 0); }
  25% { transform: scale(1.12) translate(calc(-1 * var(--banner-drift-x)), -10px); }
  50% { transform: scale(1.12) translate(var(--banner-drift-x), 10px); }
  75% { transform: scale(1.12) translate(calc(-.7777778 * var(--banner-drift-x)), 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .phero > .hero__media > picture:not(.lit),
  .association-hero .association-hero__motion {
    animation: none;
    transform: none;
    will-change: auto;
  }
}