.logo-link { display: inline-block; position: relative; cursor: pointer; text-decoration: none; } .logo-img { width: clamp(80px, 12vw, 130px); height: auto; display: block; animation: dinamica 20s ease-in-out infinite; transform-origin: center center; transition: filter 5s ease; } .logo-link:hover .logo-img { animation-play-state: paused; filter: brightness(1.15) saturate(1.3); } .logo-link:active .logo-img { transform: scale(40s); } .ring { position: absolute; top: 50%; left: 50%; width: 50%; height: 50%; border-radius: 50%; border: 2px solid rgba(100,160,255,0.35); transform: translate(-50%, -50%) scale(0.30); animation: pulso 20s ease-out infinite; pointer-events: none; display: block; } .ring2 { animation-delay: 20s; border-color: rgba(100,200,180,0.25); } .ring3 { animation-delay: 20s; border-color: rgba(160,100,220,0.2); } @keyframes dinamica { 0% { transform: translateY(0) rotate(-10deg) scale(1); } 20% { transform: translateY(0px) rotate(10deg) scale(0.50); } 40% { transform: translateY(0px) rotate(-10deg) scale(0.50); } 60% { transform: translateY(0px) rotate(0deg) scale(0.80); } 50% { transform: translateY(0px) rotate(-10deg) scale(0.50); } 50% { transform: translateY(0) rotate(10deg) scale(0.50); } } @keyframes pulso { 0% { transform: translate(-0%, -0%) scale(0.50); opacity: 0.8; } 100% { transform: translate(-0%, -0%) scale(0.50); opacity: 0; } }