/* SincroAI animated logo — rotating ring + subtle pulsing glow + fixed "S"
   Usage:
   <span class="logo-anim" style="width:40px;height:40px">  (or use w-10 h-10 etc.)
     <img class="logo-ring" src="/assets/images/logo-ring.png" alt="">
     <img class="logo-s"    src="/assets/images/logo-s.png"    alt="SincroAI">
   </span>
*/
.logo-anim {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    line-height: 0;
    isolation: isolate;
}
.logo-anim img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.logo-anim .logo-ring {
    z-index: 1;
    transform-origin: 50% 50%;
    animation: logoSpin 22s linear infinite;
    will-change: transform;
}
.logo-anim .logo-s {
    z-index: 2;
}
/* soft pulsing glow behind the logo */
.logo-anim::before {
    content: "";
    position: absolute;
    inset: -14%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 200, 255, 0.45) 0%, rgba(0, 200, 255, 0) 65%);
    pointer-events: none;
    animation: logoPulse 3.4s ease-in-out infinite;
}

@keyframes logoSpin {
    to { transform: rotate(360deg); }
}
@keyframes logoPulse {
    0%, 100% { opacity: 0.30; transform: scale(0.92); }
    50%      { opacity: 0.65; transform: scale(1.06); }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo-anim .logo-ring { animation: none; }
    .logo-anim::before { animation: none; opacity: 0.4; }
}