/* ==========================================================================
   candies.css — the dancing wrapped-candy strip along the bottom of the page.
   Pairs with js/candies.js. The page pads its footer with --candy-stage-height.
   Only `transform` / `opacity` are animated, so everything stays composited.
   ========================================================================== */

:root {
  --candy-stage-height: 160px;
}

/* The strip itself: fixed to the bottom, never intercepts clicks. */
#candy-stage {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--candy-stage-height);
  pointer-events: none;
  overflow: hidden;
  z-index: 9000;
  background: transparent;
  contain: layout paint;
}

/* Layer 1: horizontal travel (driven by JS, translate3d only). */
.candy {
  position: absolute;
  left: 0;
  bottom: 6px;
  will-change: transform;
}

/* Layers 2-4 fill the candy box; each owns one part of the dance. */
.candy-bob,
.candy-wiggle,
.candy-flair {
  width: 100%;
  height: 100%;
}

/* Layer 2: bob + squash-and-stretch (per-candy amplitude/duration/phase
   come from custom properties that candies.js sets on .candy). */
.candy-bob {
  transform-origin: 50% 100%;
  animation: candy-bob var(--bob-dur, 1.2s) ease-in-out infinite;
  animation-delay: var(--bob-delay, 0s);
}

/* Layer 3: wiggle (rotation back and forth) on its own clock. */
.candy-wiggle {
  transform-origin: 50% 85%;
  animation: candy-wiggle var(--wig-dur, 1.8s) ease-in-out infinite;
  animation-delay: var(--wig-delay, 0s);
}

/* Layer 4: occasional one-shot flourish (jump or spin), toggled by JS. */
.candy-flair {
  transform-origin: 50% 50%;
}
.candy-flair.is-jumping {
  animation: candy-jump 0.9s cubic-bezier(0.3, 0.6, 0.4, 1) 1;
}
.candy-flair.is-spinning {
  animation: candy-spin 0.8s ease-in-out 1;
}

.candy svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* JS adds .is-paused while the tab is hidden. */
#candy-stage.is-paused .candy-bob,
#candy-stage.is-paused .candy-wiggle,
#candy-stage.is-paused .candy-flair {
  animation-play-state: paused;
}

@keyframes candy-bob {
  0%, 100% {
    transform: translateY(0)
      scale(calc(1 + var(--sq, 0.06)), calc(1 - var(--sq, 0.06)));
  }
  18%, 82% {
    transform: translateY(calc(var(--bob, 10px) * -0.35)) scale(1, 1);
  }
  50% {
    transform: translateY(calc(var(--bob, 10px) * -1))
      scale(calc(1 - var(--sq, 0.06) * 0.6), calc(1 + var(--sq, 0.06) * 0.6));
  }
}

@keyframes candy-wiggle {
  0%, 100% { transform: rotate(calc(var(--wig, 8deg) * -1)); }
  50%      { transform: rotate(var(--wig, 8deg)); }
}

@keyframes candy-jump {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(0) scale(1.18, 0.82); }
  45%  { transform: translateY(-38px) scale(0.92, 1.1); }
  80%  { transform: translateY(0) scale(1.12, 0.88); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes candy-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reduced motion: candies.js lays the candies out as a static row and
   never starts its loop; this makes sure no keyframes run either. */
@media (prefers-reduced-motion: reduce) {
  .candy-bob,
  .candy-wiggle,
  .candy-flair {
    animation: none !important;
  }
  .candy {
    will-change: auto;
  }
}
#candy-stage.is-static .candy-bob,
#candy-stage.is-static .candy-wiggle,
#candy-stage.is-static .candy-flair {
  animation: none !important;
}