.social-bubbles {
  --bubble-size: 46px;
  position: fixed;
  top: 52%;
  left: -52px;
  z-index: 80;
  width: 136px;
  height: 500px;
  direction: ltr;
  transform: translateY(-50%);
  transition: left 0.58s cubic-bezier(0.18, 0.86, 0.2, 1);
  pointer-events: none;
}

.social-bubbles__link {
  --tx: 0px;
  --ty: 0px;
  --lift: 0px;
  --rot: 0deg;
  --scale: 0.96;
  --stack-tx: 0px;
  --stack-ty: 0px;
  --open-delay: 0s;
  --close-delay: 0s;
  --open-ty: 0px;
  position: absolute;
  left: 0;
  top: 230px;
  display: grid;
  place-items: center;
  width: var(--bubble-size);
  height: var(--bubble-size);
  color: var(--color-white);
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: 1px solid rgba(var(--rgb-white), 0.34);
  border-radius: var(--radius-circle);
  box-shadow:
    0 16px 28px rgba(var(--rgb-primary-dark), 0.24),
    inset 0 1px 0 rgba(var(--rgb-white), 0.35);
  cursor: pointer;
  outline: none;
  opacity: 0.98;
  pointer-events: auto;
  transform: translate3d(var(--tx), calc(var(--ty) + var(--lift)), 0) rotate(var(--rot)) scale(var(--scale));
  transition:
    transform 0.72s cubic-bezier(0.18, 0.88, 0.2, 1.12),
    opacity 0.24s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  will-change: transform, opacity;
}

.social-bubbles:not(.is-ready):not(.is-intro) .social-bubbles__link {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(calc(var(--tx) - 44px), calc(var(--ty) + var(--lift)), 0) rotate(var(--rot)) scale(0.76);
}

.social-bubbles.is-intro:not(.is-open):not(.is-closing) .social-bubbles__link {
  animation: socialBubbleInitialIn 0.66s cubic-bezier(0.18, 0.88, 0.2, 1.12) both;
  animation-delay: var(--intro-delay, 0s);
}

.social-bubbles__link:nth-of-type(1) {
  --tx: 56px;
  --ty: 0px;
  --stack-tx: 56px;
  --stack-ty: 0px;
  --open-ty: -210px;
  --close-delay: 0.32s;
  z-index: 7;
  --intro-delay: 0.18s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, #833ab4, #fd1d1d 58%, #fcb045);
}

.social-bubbles__link:nth-of-type(2) {
  --tx: 42px;
  --ty: -22px;
  --stack-tx: 42px;
  --stack-ty: -22px;
  --open-ty: -140px;
  --close-delay: 0.27s;
  z-index: 6;
  color: var(--color-text);
  --intro-delay: 0.28s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.42), transparent 34%),
    linear-gradient(135deg, #fff86b, #ffdc29);
}

.social-bubbles__link:nth-of-type(3) {
  --tx: 42px;
  --ty: 22px;
  --stack-tx: 42px;
  --stack-ty: 22px;
  --open-ty: -70px;
  --close-delay: 0.22s;
  z-index: 6;
  --intro-delay: 0.38s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, #111827, #000000 58%, #e21f3d);
}

.social-bubbles__link:nth-of-type(4) {
  --tx: 28px;
  --ty: -44px;
  --stack-tx: 28px;
  --stack-ty: -44px;
  --open-ty: 0px;
  --close-delay: 0.17s;
  z-index: 5;
  --intro-delay: 0.48s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, #25d366, #0b8f43);
}

.social-bubbles__link:nth-of-type(5) {
  --tx: 28px;
  --ty: 0px;
  --stack-tx: 28px;
  --stack-ty: 0px;
  --open-ty: 70px;
  --close-delay: 0.12s;
  z-index: 4;
  --intro-delay: 0.58s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, #0a66c2, var(--color-primary-dark));
}

.social-bubbles__link:nth-of-type(6) {
  --tx: 28px;
  --ty: 44px;
  --stack-tx: 28px;
  --stack-ty: 44px;
  --open-ty: 140px;
  --close-delay: 0.07s;
  z-index: 3;
  --intro-delay: 0.68s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, #1877f2, #0d4f9f);
}

.social-bubbles__link:nth-of-type(7) {
  --tx: 14px;
  --ty: 0px;
  --stack-tx: 14px;
  --stack-ty: 0px;
  --open-ty: 210px;
  --close-delay: 0.02s;
  z-index: 2;
  --intro-delay: 0.78s;
  background:
    linear-gradient(145deg, rgba(var(--rgb-white), 0.24), transparent 34%),
    linear-gradient(135deg, #132238, #010409);
}

.social-bubbles__link::after {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  min-width: max-content;
  padding: 7px 10px;
  color: var(--color-white);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  background: rgba(8, 35, 68, 0.92);
  border: 1px solid rgba(var(--rgb-white), 0.14);
  border-radius: var(--radius-ui);
  box-shadow: 0 12px 26px rgba(var(--rgb-primary-dark), 0.18);
  content: attr(aria-label);
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.social-bubbles__link:hover::after,
.social-bubbles__link:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.social-bubbles__link:hover,
.social-bubbles__link:focus-visible {
  --lift: -2px;
  --scale: 1;
  border-color: rgba(var(--rgb-white), 0.5);
  box-shadow:
    0 18px 34px rgba(var(--rgb-primary-dark), 0.28),
    inset 0 1px 0 rgba(var(--rgb-white), 0.42);
}

.social-bubbles svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-bubbles__link[aria-label="فيسبوك"] svg,
.social-bubbles__link[aria-label="تيك توك"] svg,
.social-bubbles__link[aria-label="واتساب"] svg,
.social-bubbles__link[aria-label="سناب شات"] svg {
  fill: currentColor;
  stroke: none;
}

.social-bubbles.is-open {
  left: 18px;
}

.social-bubbles.is-closing .social-bubbles__link {
  pointer-events: none;
  animation: socialBubbleCloseIn 0.62s cubic-bezier(0.22, 0.76, 0.22, 1) backwards;
  animation-delay: var(--close-delay, 0s);
}

.social-bubbles.is-open .social-bubbles__link {
  --tx: 0px;
  --scale: 1;
  opacity: 1;
  animation: socialBubbleOpenIn 0.76s cubic-bezier(0.16, 0.86, 0.18, 1.12) backwards;
  animation-delay: var(--open-delay, 0s);
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(1) {
  --ty: -210px;
  --open-ty: -210px;
  --close-delay: 0.32s;
  --open-delay: 0.02s;
  transition-delay: 0.02s;
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(2) {
  --ty: -140px;
  --open-ty: -140px;
  --close-delay: 0.27s;
  --open-delay: 0.07s;
  transition-delay: 0.07s;
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(3) {
  --ty: -70px;
  --open-ty: -70px;
  --close-delay: 0.22s;
  --open-delay: 0.12s;
  transition-delay: 0.12s;
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(4) {
  --ty: 0px;
  --open-ty: 0px;
  --close-delay: 0.17s;
  --open-delay: 0.17s;
  transition-delay: 0.17s;
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(5) {
  --ty: 70px;
  --open-ty: 70px;
  --close-delay: 0.12s;
  --open-delay: 0.22s;
  transition-delay: 0.22s;
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(6) {
  --ty: 140px;
  --open-ty: 140px;
  --close-delay: 0.07s;
  --open-delay: 0.27s;
  transition-delay: 0.27s;
}

.social-bubbles.is-open .social-bubbles__link:nth-of-type(7) {
  --ty: 210px;
  --open-ty: 210px;
  --close-delay: 0.02s;
  --open-delay: 0.32s;
  transition-delay: 0.32s;
}

@media (max-width: 640px) {
  .social-bubbles {
    --bubble-size: 40px;
    top: 54%;
    left: -46px;
    width: 112px;
    height: 420px;
  }

  .social-bubbles__link {
    top: 192px;
  }

  .social-bubbles__link:nth-of-type(1) {
    --tx: 50px;
    --ty: 0px;
    --stack-tx: 50px;
    --stack-ty: 0px;
    --open-ty: -168px;
  }

  .social-bubbles__link:nth-of-type(2) {
    --tx: 38px;
    --ty: -19px;
    --stack-tx: 38px;
    --stack-ty: -19px;
    --open-ty: -112px;
  }

  .social-bubbles__link:nth-of-type(3) {
    --tx: 38px;
    --ty: 19px;
    --stack-tx: 38px;
    --stack-ty: 19px;
    --open-ty: -56px;
  }

  .social-bubbles__link:nth-of-type(4) {
    --tx: 26px;
    --ty: -38px;
    --stack-tx: 26px;
    --stack-ty: -38px;
    --open-ty: 0px;
  }

  .social-bubbles__link:nth-of-type(5) {
    --tx: 26px;
    --ty: 0px;
    --stack-tx: 26px;
    --stack-ty: 0px;
    --open-ty: 56px;
  }

  .social-bubbles__link:nth-of-type(6) {
    --tx: 26px;
    --ty: 38px;
    --stack-tx: 26px;
    --stack-ty: 38px;
    --open-ty: 112px;
  }

  .social-bubbles__link:nth-of-type(7) {
    --tx: 13px;
    --ty: 0px;
    --stack-tx: 13px;
    --stack-ty: 0px;
    --open-ty: 168px;
  }

  .social-bubbles.is-open {
    left: 12px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(1) {
    --ty: -168px;
    --open-ty: -168px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(2) {
    --ty: -112px;
    --open-ty: -112px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(3) {
    --ty: -56px;
    --open-ty: -56px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(4) {
    --ty: 0px;
    --open-ty: 0px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(5) {
    --ty: 56px;
    --open-ty: 56px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(6) {
    --ty: 112px;
    --open-ty: 112px;
  }

  .social-bubbles.is-open .social-bubbles__link:nth-of-type(7) {
    --ty: 168px;
    --open-ty: 168px;
  }

  .social-bubbles svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-bubbles,
  .social-bubbles *,
  .social-bubbles *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}


@keyframes socialBubbleInitialIn {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--tx) - 44px), calc(var(--ty) + 8px), 0) rotate(-9deg) scale(0.72);
  }

  68% {
    opacity: 1;
    transform: translate3d(calc(var(--tx) + 4px), calc(var(--ty) - 2px), 0) rotate(2deg) scale(1.04);
  }

  100% {
    opacity: 0.98;
    transform: translate3d(var(--tx), calc(var(--ty) + var(--lift)), 0) rotate(var(--rot)) scale(var(--scale));
  }
}

@keyframes socialBubbleOpenIn {
  0% {
    opacity: 0.82;
    transform: translate3d(calc(var(--stack-tx) - 8px), calc(var(--stack-ty) + var(--lift)), 0) rotate(-7deg) scale(0.86);
  }

  62% {
    opacity: 1;
    transform: translate3d(5px, calc(var(--ty) + var(--lift)), 0) rotate(2deg) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translate3d(var(--tx), calc(var(--ty) + var(--lift)), 0) rotate(var(--rot)) scale(var(--scale));
  }
}

@keyframes socialBubbleCloseIn {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(var(--open-ty) + var(--lift)), 0) rotate(0deg) scale(1);
  }

  62% {
    opacity: 0.98;
    transform: translate3d(calc(var(--stack-tx) + 4px), calc(var(--stack-ty) - 2px + var(--lift)), 0) rotate(-2deg) scale(1.02);
  }

  100% {
    opacity: 0.98;
    transform: translate3d(var(--stack-tx), calc(var(--stack-ty) + var(--lift)), 0) rotate(var(--rot)) scale(var(--scale));
  }
}