/* Safemoney logo — CSS animations
 * Use when embedding the logo as inline SVG inside HTML/React.
 * For pure SVG <img> use, prefer safemoney-logo-animated.svg (SMIL).
 *
 * Mark up your SVG like this:
 *   <svg viewBox="0 0 120 120">
 *     <g class="sm-logo-arc"> ...arc + tip dot... </g>
 *     <circle class="sm-logo-core" ... />
 *   </svg>
 */

@keyframes sm-logo-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes sm-logo-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.92); }
}

@keyframes sm-logo-spin-fast {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Idle / brand state — slow arc orbit + core breathe */
.sm-logo-arc {
  animation: sm-logo-spin 4.2s linear infinite;
  transform-origin: 60px 60px;
}
.sm-logo-core {
  animation: sm-logo-pulse 2s ease-in-out infinite;
  transform-origin: 60px 60px;
  transform-box: fill-box;
}

/* Connecting / loading state — fast spin */
.sm-logo-arc--connecting {
  animation: sm-logo-spin-fast 0.8s linear infinite;
  transform-origin: 60px 60px;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .sm-logo-arc,
  .sm-logo-arc--connecting,
  .sm-logo-core {
    animation: none;
  }
}