/**
 * Wanda Panda — calm loader (Wanda gently bobbing, no spinning)
 * Usage:
 *   <div class="wanda-rolling" role="status" aria-label="Lädt">
 *     <div class="wanda-rolling__wheel" aria-hidden="true"></div>
 *   </div>
 *
 * Size via --wanda-rolling-size. Assumes a dark background.
 */

.wanda-rolling {
  --wanda-rolling-size: 3.5rem;
  --wanda-rolling-duration: 2.4s;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wanda-rolling-size);
  height: var(--wanda-rolling-size);
}

.wanda-rolling .wanda-rolling__wheel {
  width: 100%;
  height: 100%;
  background: center / contain no-repeat url("./wanda.svg");
  animation: wanda-bob var(--wanda-rolling-duration) ease-in-out infinite;
}

.wanda-rolling::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: -6%;
  height: 8%;
  border-radius: 50%;
  background: rgb(0 0 0 / 35%);
  filter: blur(2px);
  z-index: -1;
  animation: wanda-bob-shadow var(--wanda-rolling-duration) ease-in-out infinite;
}

@keyframes wanda-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes wanda-bob-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(0.9); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .wanda-rolling .wanda-rolling__wheel,
  .wanda-rolling::after {
    animation: none;
  }
}