/* ============================================================
   SOCIALS SECTION
============================================================ */

.socials {
  width: 100%;
  min-height: 92svh;
  padding: 4.5vh 0 7vh;
  overflow: hidden;
  border-top: 2px solid rgba(8, 38, 110, 0.32);
  background: transparent;
}

.socials .socials-title {
  margin-bottom: clamp(36px, 6vh, 70px);
}

.socials-stage {
  position: relative;
  display: grid;
  width: min(94vw, 720px);
  height: clamp(380px, 52vw, 520px);
  margin: 0 auto;
  place-items: center;
}

.socials-orbit {
  position: absolute;
  inset: 0;
}

.social-link {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: clamp(92px, 12vw, 124px);
  aspect-ratio: 1;
  place-items: center;
  text-decoration: none;
  transform: translate(-50%, -50%);
}

.instagram {
  --x: 38%;
  --y: 15%;
  --float-x: 10px;
  --float-y: -8px;
  --tilt: 5deg;
  --duration: 7.8s;
  --delay: -1.2s;
}

.medium {
  --x: 67%;
  --y: 22%;
  --float-x: -9px;
  --float-y: 8px;
  --tilt: -4deg;
  --duration: 8.4s;
  --delay: -3s;
}

.facebook {
  --x: 74%;
  --y: 62%;
  --float-x: -10px;
  --float-y: -7px;
  --tilt: 4deg;
  --duration: 8.7s;
  --delay: -4.2s;
}

.linkedin {
  --x: 20%;
  --y: 58%;
  --float-x: 8px;
  --float-y: 10px;
  --tilt: -3deg;
  --duration: 8s;
  --delay: -2s;
}

.github {
  --x: 51%;
  --y: 84%;
  --float-x: 7px;
  --float-y: -9px;
  --tilt: -5deg;
  --duration: 7.5s;
  --delay: -2.8s;
}

.social-card {
  --hover-scale: 1;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  animation: social-logo-float var(--duration) ease-in-out var(--delay) infinite;
  transition: transform 220ms ease, filter 220ms ease;
  will-change: transform;
}

.social-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 18px rgba(5, 24, 48, 0.16));
  user-select: none;
  pointer-events: none;
}

.instagram .social-card img {
  width: 108%;
  height: 108%;
}

.facebook .social-card img {
  width: 96%;
  height: 96%;
}

.medium .social-card img {
  width: 94%;
  height: 94%;
}

.linkedin .social-card img {
  width: 92%;
  height: 92%;
}

.github .social-card img {
  width: 90%;
  height: 90%;
}

.social-link:hover .social-card,
.social-link:focus-visible .social-card {
  --hover-scale: 1.1;
  filter: brightness(1.04) saturate(1.06);
}

.social-link:focus-visible {
  outline: 4px solid rgba(10, 35, 88, 0.45);
  outline-offset: 8px;
}

.socials-stage:hover .socials-orbit,
.socials-stage:hover .social-card {
  animation-play-state: paused;
}

@keyframes social-logo-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--hover-scale));
  }

  45% {
    transform: translate3d(var(--float-x), var(--float-y), 0) rotate(var(--tilt)) scale(var(--hover-scale));
  }

  72% {
    transform: translate3d(calc(var(--float-x) * -0.45), calc(var(--float-y) * 0.55), 0) rotate(calc(var(--tilt) * -0.55)) scale(var(--hover-scale));
  }
}

@media (max-width: 700px) {
  .socials {
    min-height: 68svh;
    padding: 3.5vh 0 5vh;
  }

  .socials .socials-title {
    margin-bottom: clamp(16px, 4vh, 28px);
  }

  .socials-stage {
    width: min(92vw, 360px);
    height: 330px;
  }

  .social-link {
    width: clamp(62px, 17vw, 72px);
  }

  .social-card img {
    filter: drop-shadow(0 10px 12px rgba(5, 24, 48, 0.15));
  }

  .instagram {
    --x: 52%;
    --y: 86%;
    --float-x: 5px;
    --float-y: -6px;
  }

  .medium {
    --x: 24%;
    --y: 62%;
    --float-x: -5px;
    --float-y: 6px;
  }

  .facebook {
    --x: 24%;
    --y: 24%;
    --float-x: 5px;
    --float-y: -5px;
  }

  .linkedin {
    --x: 78%;
    --y: 54%;
    --float-x: 6px;
    --float-y: 5px;
  }

  .github {
    --x: 55%;
    --y: 13%;
    --float-x: -4px;
    --float-y: 5px;
  }

  .medium .social-card img,
  .linkedin .social-card img {
    width: 88%;
    height: 88%;
  }

  .github .social-card img {
    width: 86%;
    height: 86%;
  }
}

@media (max-width: 380px) {
  .socials-stage {
    height: 312px;
  }

  .social-link {
    width: 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-card {
    animation: none;
    transform: scale(var(--hover-scale));
  }
}