@import url('/site-assets/social-links-v1.css?v=social-20261008');

.social-icon {
  background-size: 100% 100%;
  background-position: center;
  background-image: image-set(url('/site-assets/social-x-dark-v2-1x.png') 1x, url('/site-assets/social-x-dark-v2-2x.png') 2x, url('/site-assets/social-x-dark-v2-3x.png') 3x);
  image-rendering: auto;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 calc(100% - .65px), transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 calc(100% - .65px), transparent 100%);
  -webkit-mask-size: 95% 95%;
  mask-size: 95% 95%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.social-icon--telegram {
  background-position: center;
  background-image: image-set(url('/site-assets/social-telegram-dark-v2-1x.png') 1x, url('/site-assets/social-telegram-dark-v2-2x.png') 2x, url('/site-assets/social-telegram-dark-v2-3x.png') 3x);
}
.token-footer .social-icon {
  background-image: image-set(url('/site-assets/social-x-cream-v2-1x.png') 1x, url('/site-assets/social-x-cream-v2-2x.png') 2x, url('/site-assets/social-x-cream-v2-3x.png') 3x);
}
.token-footer .social-icon--telegram {
  background-image: image-set(url('/site-assets/social-telegram-cream-v2-1x.png') 1x, url('/site-assets/social-telegram-cream-v2-2x.png') 2x, url('/site-assets/social-telegram-cream-v2-3x.png') 3x);
}
.social-links .social-link {
  transition: transform .35s ease, filter .35s ease;
}
.landing-v2.motion-enabled .social-links { --social-lift: -5px; }
@media (hover: hover) and (pointer: fine) {
  .social-links .social-link:hover {
    filter: brightness(1.1) drop-shadow(0 8px 12px #ffc53030);
  }
  body:not(.motion-disabled) .social-links .social-link:hover {
    transform: translateY(var(--social-lift, -4px));
  }
  body:not(.motion-disabled) .social-links .social-link:active {
    transform: translateY(-1px) scale(.96);
  }
}
body.motion-disabled .social-links .social-link { transition: filter .2s ease; }
body.motion-disabled .social-links .social-link:hover,
body.motion-disabled .social-links .social-link:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .social-links .social-link { transition: none; }
  body:not(.motion-disabled) .social-links .social-link:hover,
  body:not(.motion-disabled) .social-links .social-link:active { transform: none; }
}
