/* Gentle motion for the decorative cards on the sign-in and register panel and
   on the automation hero. It moves with the individual `translate`, `rotate`
   and `scale` properties, so each card keeps the tilt its own `transform`
   gives it, and it only runs for people who have not asked for less motion. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes moFloatA { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }
  @keyframes moFloatB { 0%,100% { translate: 0 0; } 50% { translate: 0 10px; } }
  @keyframes moFloatC { 0%,100% { translate: 0 0; } 33% { translate: 5px -8px; } 66% { translate: -4px -3px; } }
  @keyframes moSway { 0%,100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }
  @keyframes moIn { from { opacity: 0; scale: .93; } to { opacity: 1; scale: 1; } }
  @keyframes moPulse { 0%,100% { scale: 1; opacity: .9; } 50% { scale: 1.045; opacity: 1; } }
  @keyframes moFill { from { width: 0; } }
  @keyframes moDash { to { stroke-dashoffset: -16; } }
  @keyframes moSpark { 0%,100% { scale: 1; rotate: 0deg; opacity: .9; } 50% { scale: 1.3; rotate: 24deg; opacity: 1; } }
  @keyframes moRing { 0% { box-shadow: 0 0 0 0 #f75c0a55; } 70%,100% { box-shadow: 0 0 0 9px #f75c0a00; } }
  @keyframes moBolt { 0%,100% { scale: 1; } 50% { scale: 1.14; } }

  /* ---------- /auth and /register ---------- */
  .crdts-auth .loyalty-card,
  .crdts-auth .float-card { will-change: translate; }

  .crdts-auth .loyalty-card {
    animation: moIn .9s cubic-bezier(.22,1,.36,1) both, moFloatA 7s ease-in-out .9s infinite, moSway 9s ease-in-out infinite;
  }
  .crdts-auth .float-card.cashback {
    animation: moIn .9s cubic-bezier(.22,1,.36,1) .25s both, moFloatB 5.6s ease-in-out 1.15s infinite;
  }
  .crdts-auth .float-card.repeat {
    animation: moIn .9s cubic-bezier(.22,1,.36,1) .45s both, moFloatC 6.4s ease-in-out 1.35s infinite;
  }
  .crdts-auth .orbit-one { animation: moPulse 9s ease-in-out infinite; }
  .crdts-auth .orbit-two { animation: moPulse 11s ease-in-out -4s infinite; }
  .crdts-auth .progress span { animation: moFill 1.8s cubic-bezier(.22,1,.36,1) .6s both; }
  .crdts-auth .store-icon { animation: moBolt 3.6s ease-in-out infinite; }

  /* ---------- /dashboard/automation hero ---------- */
  .crdts-dash .au-vnode,
  .crdts-dash .au-hub { will-change: translate; }

  .crdts-dash .au-vnode.one { animation: moIn .8s cubic-bezier(.22,1,.36,1) both, moFloatA 5.4s ease-in-out .8s infinite; }
  .crdts-dash .au-vnode.two { animation: moIn .8s cubic-bezier(.22,1,.36,1) .2s both, moFloatB 6.2s ease-in-out 1s infinite; }
  .crdts-dash .au-vnode.three { animation: moIn .8s cubic-bezier(.22,1,.36,1) .4s both, moFloatC 6.8s ease-in-out 1.2s infinite; }
  .crdts-dash .au-hub { animation: moIn .8s cubic-bezier(.22,1,.36,1) .1s both, moFloatB 4.8s ease-in-out .9s infinite, moSway 7s ease-in-out infinite; }
  .crdts-dash .au-hub svg { animation: moBolt 2.6s ease-in-out infinite; }
  .crdts-dash .au-visual-connector path { animation: moDash 1.4s linear infinite; }
  .crdts-dash .au-visual-spark { animation: moSpark 3.4s ease-in-out infinite; }
  .crdts-dash .au-visual-dot { animation: moRing 2.2s ease-out infinite; }
}