.social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.social-links a{position:relative;isolation:isolate;display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border:1px solid color-mix(in srgb,var(--social-brand,var(--primary)) 28%,var(--line));border-radius:13px;background:linear-gradient(145deg,#fff,color-mix(in srgb,var(--social-brand,var(--primary)) 6%,#fff));color:var(--social-brand,var(--primary));box-shadow:0 7px 18px #0000000d;transition:transform .24s,border-color .24s,box-shadow .24s}
.social-links a::before{content:"";position:absolute;z-index:-1;inset:-35%;background:radial-gradient(circle at 25% 25%,color-mix(in srgb,var(--social-brand,var(--primary)) 34%,#fff),transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--social-brand,var(--primary)) 18%,#fff),color-mix(in srgb,var(--social-hover,var(--social-brand,var(--primary))) 24%,#fff));opacity:0;transform:scale(.72) rotate(-10deg);transition:opacity .28s,transform .32s}
.social-links a::after{content:"";position:absolute;z-index:-1;width:26px;height:90px;top:-22px;left:-45px;background:linear-gradient(90deg,transparent,#ffffffb8,transparent);transform:rotate(26deg);opacity:0}
.social-links a i{position:relative;z-index:1;font-size:19px;line-height:1;color:var(--social-brand,var(--primary));transition:transform .24s,filter .24s}
.social-links a img{position:relative;z-index:1;width:23px;height:23px;object-fit:contain;filter:none;transition:transform .24s,filter .24s}
.social-links a:hover,.social-links a:focus-visible{transform:translateY(-5px) scale(1.05);border-color:color-mix(in srgb,var(--social-brand,var(--primary)) 72%,#fff);box-shadow:0 16px 34px color-mix(in srgb,var(--social-brand,var(--primary)) 30%,transparent)}
.social-links a:hover::before,.social-links a:focus-visible::before{opacity:1;transform:scale(1) rotate(0)}
.social-links a:hover::after,.social-links a:focus-visible::after{opacity:.72;animation:social-shine .7s ease forwards}
.social-links a:hover i,.social-links a:focus-visible i{color:var(--social-brand,var(--primary));transform:scale(1.16) rotate(-5deg);filter:saturate(1.2) brightness(1.04)}
.social-links a:hover img,.social-links a:focus-visible img{transform:scale(1.14) rotate(4deg);filter:saturate(1.18) contrast(1.04)}
@keyframes social-shine{0%{left:-45px}100%{left:68px}}
@media(prefers-reduced-motion:reduce){.social-links a,.social-links a::before,.social-links a::after,.social-links a i,.social-links a img{transition:none!important;animation:none!important;transform:none!important}}