/* xeek.dev theme, footer.css: rack-and-pinion gear divider, footer content */

.site-footer { margin-top: 40px; padding: 0 24px 36px; }

/* The divider is a functional chain drive: an outline gear at each end and a
   circulating chain between them (top run moves right, bottom run moves left,
   so both gears turn clockwise like a real chain loop). Speeds are matched:
   the 16px gear's pitch circumference is ~36.4px, one revolution takes 6s
   (~6.06px/s), and the chain dashes (11px period) travel 66px in 10.89s,
   the same linear speed, so the mesh never slips. */
.footer-gear-divider {
  position: relative;
  /* full content-column width: 860px container minus its 24px side padding */
  width: 100%;
  max-width: 812px;
  height: 18px;
  margin: 0 auto 18px;
}

.divider-chain {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 8px;
  right: 8px;
}

.divider-chain::before,
.divider-chain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 11px);
}

.divider-chain::before { top: 0; animation: divider-chain-right 10.89s linear infinite; }
.divider-chain::after { bottom: 0; animation: divider-chain-left 10.89s linear infinite; }

@keyframes divider-chain-right { to { background-position: 66px 0; } }
@keyframes divider-chain-left { to { background-position: -66px 0; } }

/* gear-outline.svg applied as a mask so the color comes from a skin token */
.divider-gear {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--gear-divider);
  -webkit-mask: url("/static/user/theme/img/gear-outline.svg") center / contain no-repeat;
  mask: url("/static/user/theme/img/gear-outline.svg") center / contain no-repeat;
  animation: divider-gear-spin 6s linear infinite;
}

.divider-gear-left { left: 0; }
.divider-gear-right { right: 0; }

@keyframes divider-gear-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .divider-chain::before,
  .divider-chain::after,
  .divider-gear { animation: none; }
}

.footer-content {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font: 400 12.5px var(--font-body);
  color: var(--dim);
}