.social-icons__item { --social-color: #171717; }
.social-icons__item--facebook { --social-color: #1877f2; }
.social-icons__item--youtube { --social-color: #ff0000; }
.social-icons__item--instagram { --social-color: #e1306c; }
.social-icons__item--pinterest { --social-color: #e60023; }
.social-icons__item--linkedin { --social-color: #0a66c2; }
.social-icons__item--vimeo { --social-color: #1ab7ea; }
.social-icons__item--rss { --social-color: #f26522; }
.social-icons__item--discord { --social-color: #5865f2; }
.social-icons__item--twitter,
.social-icons__item--tiktok { --social-color: #171717; }

.social-icons--footer .social-icons__item--tiktok { --social-front-color: #fff; }

.social-icons__link {
  width: 34px;
  height: 34px;
  perspective: 180px;
}

.social-icons__cube {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  transform-style: preserve-3d;
  transform: translateZ(-17px) rotateX(var(--social-rotation, 0deg));
}

.social-icons__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  border-radius: 5px;
}

.social-icons__face--front {
  color: var(--social-front-color, var(--social-color));
  transform: translateZ(17px);
}

.social-icons__face--bottom {
  color: #fff;
  background: var(--social-color);
  transform: rotateX(-90deg) translateZ(17px);
}

.social-icons__face svg {
  display: block;
}

.social-icons__item > a:focus-visible {
  --social-rotation: 90deg;
  outline: 2px solid var(--social-color);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .social-icons__item > a:hover {
    --social-rotation: 90deg;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .social-icons__item {
    animation: social-icons-enter .45s ease-out backwards;
    animation-delay: calc(var(--social-index, 0) * 70ms);
  }

  .social-icons__cube {
    transition: transform .5s cubic-bezier(.22, .75, .25, 1);
  }
}

@keyframes social-icons-enter {
  from { opacity: 0; transform: translateY(7px) scale(.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}