/* Donkey Factory — Key-loader animation
 * The keys-on-ring SVG is loaded as <img> or <object> and animated via CSS.
 * Two states: idle (during page interaction) and active (during extraction).
 *
 * Sizes:  .wt-keyloader        — 28px default (replaces .wt-loader)
 *         .wt-keyloader--lg    — 48px
 *         .wt-keyloader--xl    — 96px (used in extraction overlay)
 *
 * Animation: the ring slowly spins; individual keys jiggle with a slight stagger.
 * Falls back to a CSS spinner (border + border-top) when the SVG can't load.
 */

.wt-keyloader {
  display: inline-block;
  width: 28px;
  height: 28px;
  color: var(--primary);
  position: relative;
}
.wt-keyloader--lg { width: 48px; height: 48px; }
.wt-keyloader--xl { width: 96px; height: 96px; }

.wt-keyloader > svg,
.wt-keyloader > img,
.wt-keyloader > object {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Idle: gentle hover + slow ring spin */
@keyframes wt-keyloader-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.wt-keyloader > svg {
  animation: wt-keyloader-hover 2.4s ease-in-out infinite;
}

/* Active: keys jiggle in stagger to convey "working" */
@keyframes wt-key-jiggle {
  0%, 100% { transform: rotate(0) translateY(0); }
  25%      { transform: rotate(-4deg) translateY(-1px); }
  75%      { transform: rotate(4deg)  translateY(1px); }
}

.wt-keyloader.is-active > svg {
  animation: wt-keyloader-hover 0.9s ease-in-out infinite;
}
.wt-keyloader.is-active .wt-key {
  transform-origin: center top;
  animation: wt-key-jiggle 0.9s ease-in-out infinite;
}
.wt-keyloader.is-active .wt-key-1 { animation-delay: 0ms;   }
.wt-keyloader.is-active .wt-key-2 { animation-delay: 80ms;  }
.wt-keyloader.is-active .wt-key-3 { animation-delay: 160ms; }
.wt-keyloader.is-active .wt-key-4 { animation-delay: 240ms; }

/* CSS-only fallback if the SVG file is missing — looks like the original loader */
.wt-keyloader.is-fallback {
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: wt-spin 0.65s linear infinite;
}
.wt-keyloader.is-fallback > * { display: none; }

/* High contrast + reduced motion: hold still */
.hc .wt-keyloader > svg,
.hc .wt-keyloader .wt-key,
.hc .wt-keyloader.is-active > svg,
.hc .wt-keyloader.is-active .wt-key {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .wt-keyloader > svg,
  .wt-keyloader .wt-key,
  .wt-keyloader.is-active > svg,
  .wt-keyloader.is-active .wt-key {
    animation: none;
  }
}