.footer-motion-suite {
  --motion-scene-width: 960px;
  --motion-scene-height: 750px;
  --motion-board-size: 1080px;
  --motion-art-left: 60px;
  --motion-art-top: 175px;
  --motion-scene-duration: 6s;
  --motion-paper: #f5f3ef;
  --motion-ink: #101010;
  --motion-cyan: #38ded1;
  --motion-lime: #c3ff5d;
  --motion-red: #de0030;
  margin: var(--s20) 0 var(--s12);
}
.motion-suite-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 750;
  overflow: hidden;
  background: var(--motion-paper);
  isolation: isolate;
}
.motion-suite-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--motion-scene-width);
  height: var(--motion-scene-height);
  transform: scale(var(--motion-scale, 1));
  transform-origin: top left;
  pointer-events: none;
}
.motion-suite-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.motion-suite-fallback img {
  display: block;
  width: 89.5833%;
  height: auto;
}
.motion-suite-canvas[hidden], .motion-suite-fallback[hidden] { display: none; }
.footer-motion-suite [data-motion-scene][hidden] { display: none !important; }
.motion-suite-video-scene {
  position: absolute;
  inset: 0;
  width: var(--motion-scene-width);
  height: var(--motion-scene-height);
  overflow: hidden;
  background: var(--motion-ink);
}
.motion-suite-video {
  position: absolute;
  left: calc(-1 * var(--motion-art-left));
  top: calc(-1 * var(--motion-art-top));
  width: var(--motion-board-size);
  height: var(--motion-board-size);
  max-width: none;
  object-fit: fill;
  display: block;
}
.footer-motion-suite.motion-suite-is-playing
[data-motion-scene]:not([hidden]) [data-motion-node] {
  animation-play-state: running;
}
@media (max-width: 600px) {
  .footer-motion-suite { margin: var(--s12) 0 var(--s10); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-motion-suite [data-motion-node] { animation: none !important; }
}