.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg,
    var(--color-1) 0%,
    var(--color-2) 25%,
    var(--color-3) 50%,
    var(--color-4) 75%,
    var(--color-5) 100%);
    background-size: 300% 300%;
    color: var(--text-color);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    border: var(--border);
    text-decoration: none;
    font-size: 1.4em;
    transition: transform var(--transition-duration) var(--transition-easing),
        box-shadow var(--transition-duration) var(--transition-easing),
        background-position var(--transition-duration) var(--transition-easing),
        filter var(--transition-duration) var(--transition-easing);
    animation: gradientAnimation 10s ease-in-out infinite;
}

html:not([data-hover-effects="off"]) .social-links a:hover {
    transform: scale(1.25);
    box-shadow: var(--shadow-xl);
    background-position: 100% 50%;
    filter: brightness(1.2);
}


/* gradientAnimation moved to animations.css */