/* ==========================================================================
   smartNsales Agent — the identity mark.

   Sized by one custom property so the same markup works in a card header, a
   navbar or a product surface:

     <span class="agm-wrap" style="--agm-size: 28px"> … </span>

   Motion is deliberately close to nothing: an orbit slow enough that you only
   notice it if you watch, a core that breathes once every five seconds, a
   counter-rotating twist. It should read as "on", never as "loading".
   ========================================================================== */

.agm-wrap {
  --agm-size: 28px;
  display: inline-block;
  width: var(--agm-size);
  height: var(--agm-size);
  flex: none;
  line-height: 0;
}

.agm { display: block; width: 100%; height: 100%; overflow: visible; }

/* Rotating about the viewBox centre, not the element box, so the orbit stays
   concentric at any rendered size. */
.agm-core,
.agm-twist,
.agm-orbit {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .agm-orbit { animation: agm-orbit 24s linear infinite; }
  .agm-twist { animation: agm-twist 19s linear infinite reverse; }
  .agm-core  { animation: agm-breathe 5.4s ease-in-out infinite; }
  .agm-node  { animation: agm-node 5.4s ease-in-out infinite; }
  .agm-node--far { animation-delay: -2.7s; }
}

@keyframes agm-orbit  { to { transform: rotate(360deg); } }
@keyframes agm-twist  { to { transform: rotate(360deg); } }
@keyframes agm-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes agm-node {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}