[data-motion="silky"] {
  --dur-1: 160ms;
  --dur-2: 280ms;
  --dur-3: 480ms;
  --dur-4: 800ms;
  --dur-5: 1300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --anim-distance: 32px;
  --anim-scale-from: 0.97;
  --anim-blur-from: 10px;
  --stagger-step: 95ms;
}

[data-motion="snappy"] {
  --dur-1: 90ms;
  --dur-2: 150ms;
  --dur-3: 240ms;
  --dur-4: 380ms;
  --dur-5: 600ms;
  --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --anim-distance: 18px;
  --anim-scale-from: 0.92;
  --anim-blur-from: 0px;
  --stagger-step: 45ms;
}

[data-motion="editorial"] {
  --dur-1: 110ms;
  --dur-2: 190ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 780ms;
  --ease-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --anim-distance: 0px;          
  --anim-scale-from: 1;
  --anim-blur-from: 0px;
  --stagger-step: 70ms;
}

[data-motion="organic"] {
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 650ms;
  --dur-5: 1000ms;
  --ease-out: var(--ease-spring);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.35, 1);
  --anim-distance: 22px;
  --anim-scale-from: 0.96;
  --anim-blur-from: 4px;
  --stagger-step: 80ms;
}

[data-motion="invisible"] {
  --dur-1: 80ms;
  --dur-2: 140ms;
  --dur-3: 200ms;
  --dur-4: 300ms;
  --dur-5: 450ms;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: ease-in-out;
  --anim-distance: 8px;
  --anim-scale-from: 0.99;
  --anim-blur-from: 0px;
  --stagger-step: 35ms;
}