/**
 * EDS Loop Animations — Keyframes & Classes
 * eDesign Space · https://edesignspace.com/
 */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.eds-loop-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.eds-loop-el.eds-loop-hover-pause:hover {
  animation-play-state: paused;
}

/* ══════════════════════════════════════════════════════════════════════════
   FLOAT — UP & DOWN
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-float-low    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes eds-float-medium { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes eds-float-high   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-28px)} }

.eds-loop--float.eds-loop-i--low    { animation-name: eds-float-low;    animation-timing-function: ease-in-out; }
.eds-loop--float.eds-loop-i--medium { animation-name: eds-float-medium;  animation-timing-function: ease-in-out; }
.eds-loop--float.eds-loop-i--high   { animation-name: eds-float-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   FLOAT — SIDE TO SIDE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-float-side-low    { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-8px)} }
@keyframes eds-float-side-medium { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-16px)} }
@keyframes eds-float-side-high   { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-28px)} }

.eds-loop--float-side.eds-loop-i--low    { animation-name: eds-float-side-low;    animation-timing-function: ease-in-out; }
.eds-loop--float-side.eds-loop-i--medium { animation-name: eds-float-side-medium; animation-timing-function: ease-in-out; }
.eds-loop--float-side.eds-loop-i--high   { animation-name: eds-float-side-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   SHAKE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-shake-low    { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-3px)} 40%{transform:translateX(3px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes eds-shake-medium { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }
@keyframes eds-shake-high   { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-12px)} 40%{transform:translateX(12px)} 60%{transform:translateX(-12px)} 80%{transform:translateX(12px)} }

.eds-loop--shake.eds-loop-i--low    { animation-name: eds-shake-low;    animation-timing-function: linear; }
.eds-loop--shake.eds-loop-i--medium { animation-name: eds-shake-medium; animation-timing-function: linear; }
.eds-loop--shake.eds-loop-i--high   { animation-name: eds-shake-high;   animation-timing-function: linear; }

/* ══════════════════════════════════════════════════════════════════════════
   SPIN (clockwise)
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

.eds-loop--spin { animation-name: eds-spin; animation-timing-function: linear; }

/* ══════════════════════════════════════════════════════════════════════════
   SPIN (counter-clockwise)
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-spin-ccw { from{transform:rotate(0deg)} to{transform:rotate(-360deg)} }

.eds-loop--spin-ccw { animation-name: eds-spin-ccw; animation-timing-function: linear; }

/* ══════════════════════════════════════════════════════════════════════════
   PULSE — SCALE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-pulse-low    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes eds-pulse-medium { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }
@keyframes eds-pulse-high   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.eds-loop--pulse.eds-loop-i--low    { animation-name: eds-pulse-low;    animation-timing-function: ease-in-out; }
.eds-loop--pulse.eds-loop-i--medium { animation-name: eds-pulse-medium; animation-timing-function: ease-in-out; }
.eds-loop--pulse.eds-loop-i--high   { animation-name: eds-pulse-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   PULSE — FADE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-pulse-fade-low    { 0%,100%{opacity:1} 50%{opacity:0.7} }
@keyframes eds-pulse-fade-medium { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes eds-pulse-fade-high   { 0%,100%{opacity:1} 50%{opacity:0.1} }

.eds-loop--pulse-fade.eds-loop-i--low    { animation-name: eds-pulse-fade-low;    animation-timing-function: ease-in-out; }
.eds-loop--pulse-fade.eds-loop-i--medium { animation-name: eds-pulse-fade-medium; animation-timing-function: ease-in-out; }
.eds-loop--pulse-fade.eds-loop-i--high   { animation-name: eds-pulse-fade-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   BOUNCE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-bounce-low    { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-8px)} 60%{transform:translateY(-4px)} }
@keyframes eds-bounce-medium { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-18px)} 60%{transform:translateY(-9px)} }
@keyframes eds-bounce-high   { 0%,20%,50%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-32px)} 60%{transform:translateY(-16px)} }

.eds-loop--bounce.eds-loop-i--low    { animation-name: eds-bounce-low;    animation-timing-function: ease; }
.eds-loop--bounce.eds-loop-i--medium { animation-name: eds-bounce-medium; animation-timing-function: ease; }
.eds-loop--bounce.eds-loop-i--high   { animation-name: eds-bounce-high;   animation-timing-function: ease; }

/* ══════════════════════════════════════════════════════════════════════════
   SWING
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-swing-low    { 0%,100%{transform:rotate(0)} 20%{transform:rotate(5deg)} 60%{transform:rotate(-3deg)} 80%{transform:rotate(2deg)} }
@keyframes eds-swing-medium { 0%,100%{transform:rotate(0)} 20%{transform:rotate(12deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(4deg)} }
@keyframes eds-swing-high   { 0%,100%{transform:rotate(0)} 20%{transform:rotate(22deg)} 60%{transform:rotate(-16deg)} 80%{transform:rotate(8deg)} }

.eds-loop--swing { transform-origin: top center; }
.eds-loop--swing.eds-loop-i--low    { animation-name: eds-swing-low;    animation-timing-function: ease-in-out; }
.eds-loop--swing.eds-loop-i--medium { animation-name: eds-swing-medium; animation-timing-function: ease-in-out; }
.eds-loop--swing.eds-loop-i--high   { animation-name: eds-swing-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   WOBBLE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-wobble-low    { 0%,100%{transform:translateX(0) rotate(0)} 15%{transform:translateX(-6px) rotate(-3deg)} 30%{transform:translateX(5px) rotate(2deg)} 45%{transform:translateX(-4px) rotate(-2deg)} 60%{transform:translateX(3px) rotate(1deg)} 75%{transform:translateX(-2px) rotate(-1deg)} }
@keyframes eds-wobble-medium { 0%,100%{transform:translateX(0) rotate(0)} 15%{transform:translateX(-12px) rotate(-6deg)} 30%{transform:translateX(10px) rotate(4deg)} 45%{transform:translateX(-8px) rotate(-3deg)} 60%{transform:translateX(6px) rotate(2deg)} 75%{transform:translateX(-3px) rotate(-1deg)} }
@keyframes eds-wobble-high   { 0%,100%{transform:translateX(0) rotate(0)} 15%{transform:translateX(-22px) rotate(-10deg)} 30%{transform:translateX(18px) rotate(7deg)} 45%{transform:translateX(-14px) rotate(-5deg)} 60%{transform:translateX(10px) rotate(3deg)} 75%{transform:translateX(-5px) rotate(-1deg)} }

.eds-loop--wobble.eds-loop-i--low    { animation-name: eds-wobble-low; }
.eds-loop--wobble.eds-loop-i--medium { animation-name: eds-wobble-medium; }
.eds-loop--wobble.eds-loop-i--high   { animation-name: eds-wobble-high; }

/* ══════════════════════════════════════════════════════════════════════════
   WIGGLE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-wiggle-low    { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }
@keyframes eds-wiggle-medium { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-7deg)} 75%{transform:rotate(7deg)} }
@keyframes eds-wiggle-high   { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} }

.eds-loop--wiggle.eds-loop-i--low    { animation-name: eds-wiggle-low;    animation-timing-function: ease-in-out; }
.eds-loop--wiggle.eds-loop-i--medium { animation-name: eds-wiggle-medium; animation-timing-function: ease-in-out; }
.eds-loop--wiggle.eds-loop-i--high   { animation-name: eds-wiggle-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   HEARTBEAT
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-heartbeat-low    { 0%,100%{transform:scale(1)} 14%{transform:scale(1.06)} 28%{transform:scale(1)} 42%{transform:scale(1.04)} 70%{transform:scale(1)} }
@keyframes eds-heartbeat-medium { 0%,100%{transform:scale(1)} 14%{transform:scale(1.15)} 28%{transform:scale(1)} 42%{transform:scale(1.1)} 70%{transform:scale(1)} }
@keyframes eds-heartbeat-high   { 0%,100%{transform:scale(1)} 14%{transform:scale(1.28)} 28%{transform:scale(1)} 42%{transform:scale(1.2)} 70%{transform:scale(1)} }

.eds-loop--heartbeat.eds-loop-i--low    { animation-name: eds-heartbeat-low;    animation-timing-function: ease-in-out; }
.eds-loop--heartbeat.eds-loop-i--medium { animation-name: eds-heartbeat-medium; animation-timing-function: ease-in-out; }
.eds-loop--heartbeat.eds-loop-i--high   { animation-name: eds-heartbeat-high;   animation-timing-function: ease-in-out; }

/* ══════════════════════════════════════════════════════════════════════════
   JELLO
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-jello {
  0%,11.1%,100%{transform:none}
  22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}
  33.3%{transform:skewX(6.25deg) skewY(6.25deg)}
  44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}
  55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}
  66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}
  77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}
  88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}
}
@keyframes eds-jello-high {
  0%,11.1%,100%{transform:none}
  22.2%{transform:skewX(-20deg) skewY(-20deg)}
  33.3%{transform:skewX(12deg) skewY(12deg)}
  44.4%{transform:skewX(-7deg) skewY(-7deg)}
  55.5%{transform:skewX(4deg) skewY(4deg)}
  66.6%{transform:skewX(-2deg) skewY(-2deg)}
  77.7%{transform:skewX(1deg) skewY(1deg)}
  88.8%{transform:skewX(-0.5deg) skewY(-0.5deg)}
}

.eds-loop--jello.eds-loop-i--low    { animation-name: eds-jello; }
.eds-loop--jello.eds-loop-i--medium { animation-name: eds-jello; }
.eds-loop--jello.eds-loop-i--high   { animation-name: eds-jello-high; }
.eds-loop--jello { transform-origin: center; }

/* ══════════════════════════════════════════════════════════════════════════
   RUBBER BAND
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-rubber-low {
  0%,100%{transform:scaleX(1) scaleY(1)}
  30%{transform:scaleX(1.15) scaleY(0.9)}
  40%{transform:scaleX(0.95) scaleY(1.05)}
  50%{transform:scaleX(1.05) scaleY(0.975)}
  65%{transform:scaleX(0.985) scaleY(1.0075)}
  75%{transform:scaleX(1.0025) scaleY(0.9975)}
}
@keyframes eds-rubber-medium {
  0%,100%{transform:scaleX(1) scaleY(1)}
  30%{transform:scaleX(1.3) scaleY(0.75)}
  40%{transform:scaleX(0.85) scaleY(1.15)}
  50%{transform:scaleX(1.1) scaleY(0.95)}
  65%{transform:scaleX(0.97) scaleY(1.015)}
  75%{transform:scaleX(1.005) scaleY(0.995)}
}
@keyframes eds-rubber-high {
  0%,100%{transform:scaleX(1) scaleY(1)}
  30%{transform:scaleX(1.5) scaleY(0.6)}
  40%{transform:scaleX(0.7) scaleY(1.3)}
  50%{transform:scaleX(1.2) scaleY(0.9)}
  65%{transform:scaleX(0.95) scaleY(1.03)}
  75%{transform:scaleX(1.01) scaleY(0.99)}
}

.eds-loop--rubber.eds-loop-i--low    { animation-name: eds-rubber-low; }
.eds-loop--rubber.eds-loop-i--medium { animation-name: eds-rubber-medium; }
.eds-loop--rubber.eds-loop-i--high   { animation-name: eds-rubber-high; }

/* ══════════════════════════════════════════════════════════════════════════
   TADA
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-tada-medium {
  0%,100%{transform:scaleX(1) scaleY(1) rotate(0)}
  10%,20%{transform:scale(0.9) rotate(-3deg)}
  30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
  40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
}
@keyframes eds-tada-high {
  0%,100%{transform:scaleX(1) scaleY(1) rotate(0)}
  10%,20%{transform:scale(0.8) rotate(-6deg)}
  30%,50%,70%,90%{transform:scale(1.2) rotate(6deg)}
  40%,60%,80%{transform:scale(1.2) rotate(-6deg)}
}

.eds-loop--tada.eds-loop-i--low    { animation-name: eds-tada-medium; }
.eds-loop--tada.eds-loop-i--medium { animation-name: eds-tada-medium; }
.eds-loop--tada.eds-loop-i--high   { animation-name: eds-tada-high; }

/* ══════════════════════════════════════════════════════════════════════════
   ORBIT / CIRCLE
══════════════════════════════════════════════════════════════════════════ */
@keyframes eds-orbit-low    { 0%{transform:rotate(0) translateX(8px) rotate(0)} 100%{transform:rotate(360deg) translateX(8px) rotate(-360deg)} }
@keyframes eds-orbit-medium { 0%{transform:rotate(0) translateX(16px) rotate(0)} 100%{transform:rotate(360deg) translateX(16px) rotate(-360deg)} }
@keyframes eds-orbit-high   { 0%{transform:rotate(0) translateX(28px) rotate(0)} 100%{transform:rotate(360deg) translateX(28px) rotate(-360deg)} }

.eds-loop--orbit.eds-loop-i--low    { animation-name: eds-orbit-low;    animation-timing-function: linear; }
.eds-loop--orbit.eds-loop-i--medium { animation-name: eds-orbit-medium; animation-timing-function: linear; }
.eds-loop--orbit.eds-loop-i--high   { animation-name: eds-orbit-high;   animation-timing-function: linear; }

/* ══════════════════════════════════════════════════════════════════════════
   RANDOM MOVE — handled entirely by JS
   (CSS class just marks the element)
══════════════════════════════════════════════════════════════════════════ */
.eds-loop--random { /* JS takes over */ }