.biglogo {
    width: clamp(200px, 25vw, 400px);
    height: clamp(200px, 25vw, 400px);
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.biglogo img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 20px rgba(251, 198, 56, 0.3));
    animation: spin 15s linear infinite;
}

/* Speed up on hover */
.biglogo:hover img {
    max-width: 90%;
    max-height: 90%;
    filter: drop-shadow(0 0 30px rgba(251, 198, 56, 0.6));
    animation-duration: 8s;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .biglogo {
        width: clamp(150px, 30vw, 250px);
        height: clamp(150px, 30vw, 250px);
    }
    
    .biglogo img {
        max-width: 75%;
        max-height: 75%;
    }
    
    .biglogo:hover img {
        max-width: 85%;
        max-height: 85%;
    }
}

@media (max-width: 480px) {
    .biglogo {
        width: clamp(120px, 35vw, 200px);
        height: clamp(120px, 35vw, 200px);
    }
    
    .biglogo img {
        max-width: 70%;
        max-height: 70%;
        animation-duration: 20s; /* Slower on mobile for better performance */
    }
    
    .biglogo:hover img {
        max-width: 80%;
        max-height: 80%;
        animation-duration: 12s;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .biglogo img {
        animation: none;
    }
    
    .biglogo:hover img {
        animation: none;
    }
}

@keyframes spin {
    from { 
        transform: translate(-50%, -50%) rotate(0deg); 
    }
    to { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}