/* Um único sprite leve; a travessia e as seis poses são animadas separadamente. */
.events {
  --agenda-horse-size: clamp(128px, 12vw, 160px);
  --agenda-horse-speed: 14s;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-bottom: calc(var(--agenda-horse-size) * .53 + 48px);
}
.events .agenda-container { position: relative; z-index: 1; }
.events .agenda-empty { max-width: 760px; padding: 16px 0 0; background: transparent; }
.agenda-motion { position: absolute; inset: auto 0 12px; z-index: 0; height: var(--agenda-horse-size); overflow: hidden; pointer-events: none; }
.agenda-horse-travel { width: 100%; height: 100%; animation: agenda-horse-cross var(--agenda-horse-speed) linear infinite; }
.agenda-horse-frame {
  display: block;
  width: var(--agenda-horse-size);
  height: var(--agenda-horse-size);
  background-image: url('../images/agenda-cavalo-sequencia.webp');
  background-repeat: no-repeat;
  background-size: 300% 200%;
  background-position: 0 0;
  opacity: .92;
  animation: agenda-horse-gallop .6s steps(1, end) infinite;
}
.events:not([data-motion-running="true"]) .agenda-horse-travel,
.events:not([data-motion-running="true"]) .agenda-horse-frame { animation-play-state: paused; }
.events:not([data-motion-running]) .agenda-horse-travel { animation: none; transform: translateX(calc(100% - var(--agenda-horse-size) - 24px)); }
.events[data-motion-static="true"] .agenda-horse-travel { animation: none; transform: translateX(calc(100% - var(--agenda-horse-size) - 24px)); }
.events[data-motion-static="true"] .agenda-horse-frame { animation: none; }
@keyframes agenda-horse-cross {
  from { transform: translateX(calc(-1 * var(--agenda-horse-size))); }
  to { transform: translateX(100%); }
}
@keyframes agenda-horse-gallop {
  0%, 100% { background-position: 0% 0%; }
  16.666% { background-position: 50% 0%; }
  33.333% { background-position: 100% 0%; }
  50% { background-position: 0% 100%; }
  66.666% { background-position: 50% 100%; }
  83.333% { background-position: 100% 100%; }
}
@media (max-width: 767px) {
  .events { --agenda-horse-size: 112px; --agenda-horse-speed: 10s; padding-bottom: 176px; }
  .agenda-horse-frame { opacity: .86; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-horse-travel { animation: none; transform: translateX(calc(100% - var(--agenda-horse-size) - 24px)); }
  .agenda-horse-frame { animation: none; }
}