/*
 * Vectura Studio — skin/motion.css
 *
 * Keyframe library for skin-driven animations. Mode-independent: every skin uses these
 * same keyframes. Tokens (`--motion-*`) parameterize duration/ease via App.applyTheme().
 *
 * Sourced verbatim from docs/design/themes-mockup.html (lines 491–549). Reduced-motion
 * fallbacks collapse all durations to ≤80 ms or skip outright.
 */

/* Slider thumb release halo — fired on input release. */
@keyframes thumb-release {
  0% {
    box-shadow: 0 0 0 1.5px var(--ui-accent), 0 0 0 7px var(--ui-accent-2);
    transform: scale(1.15);
  }
  100% {
    box-shadow: 0 0 0 1.5px var(--ui-accent), 0 0 0 0 transparent;
    transform: scale(1);
  }
}

/* Slider fill-side pulse — applied to .sld-fx-wrap.fx-active::after. */
@keyframes fx-pulse-fill {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 0 transparent;
  }
  12% {
    opacity: 0.36;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.22);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Button selection blink — applied via .btn-pulse class. */
@keyframes btn-press {
  0%   { opacity: 1; }
  28%  { opacity: 0.42; }
  100% { opacity: 1; }
}

/* Randomize button — hover glow pulse. */
@keyframes rand-glow-pulse {
  0%, 100% { box-shadow: 0 0 8px -1px rgba(217, 70, 239, 0.30); }
  50%       { box-shadow: 0 0 16px  0px rgba(217, 70, 239, 0.55); }
}

/* Randomize button — spark particle scatter (uses --dx, --dy CSS vars per particle). */
@keyframes rand-spark-fly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0);
    opacity: 0;
  }
}

/* Indeterminate progress bar — Phase 4. Slides a 30% bar from -30% → 100%. */
@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}

/* Indeterminate progress bar component (used by UI.overlays.ProgressBar). */
.vectura-progress-bar {
  position: relative;
  width: 100%;
  height: 3px;
  background: var(--ui-border, rgba(120, 130, 145, 0.25));
  border-radius: 2px;
  overflow: hidden;
}
.vectura-progress-bar > .vectura-progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: var(--ui-accent, #4e9ee1);
  border-radius: 2px;
  animation: progress-indeterminate 1.05s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* Reduced-motion: collapse durations and disable expensive halos. */
@media (prefers-reduced-motion: reduce) {
  .ctrl-slider.just-released::-webkit-slider-thumb,
  .sld-fx-wrap.fx-active::after,
  .btn-pulse {
    animation-duration: 80ms !important;
    animation-iteration-count: 1 !important;
  }
  .vectura-progress-bar > .vectura-progress-bar-fill {
    animation: none;
    width: 100%;
    opacity: 0.55;
  }
  #btn-randomize-params  { animation: none !important; }
  .rand-spark-overlay    { display: none !important; }
}