/* ══════════════════════════════════════════════════════════════════
   Vively Technology Solutions — Standardized Floating Social Controls
   ══════════════════════════════════════════════════════════════════ */

.social-floating-wrap {
  position: fixed;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 990;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s;
  pointer-events: none;
}

.social-floating-wrap.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.social-float-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none !important;
  border: none;
  outline-offset: 3px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.social-float-btn:hover {
  transform: translateY(-3px) scale(1.04);
  color: #ffffff !important;
}

.social-float-btn:focus-visible {
  outline: 2px solid #4f46e5;
}

.social-float-btn.linkedin-btn {
  background: #0077b5;
  box-shadow: 0 6px 18px rgba(0, 119, 181, 0.38);
}

.social-float-btn.linkedin-btn:hover {
  box-shadow: 0 10px 24px rgba(0, 119, 181, 0.52);
  filter: brightness(1.06);
}

.social-float-btn.whatsapp-btn {
  background: #25d366;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.38);
}

.social-float-btn.whatsapp-btn:hover {
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.52);
  filter: brightness(1.06);
}

.social-float-btn svg {
  display: block;
  pointer-events: none;
}

@media (max-width: 575.98px) {
  .social-floating-wrap {
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social-floating-wrap {
    transition: opacity 0.2s ease, visibility 0.2s;
    transform: none !important;
  }
  .social-float-btn:hover {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Living Icon Motion System (Global)
   ══════════════════════════════════════════════════════════════════ */
[class*=" an-"], [class^="an-"] {
  transform-box: fill-box;
  transform-origin: center;
}
.an-spin { animation: ispin 8s linear infinite; }
.an-spin-f { animation: ispin 3s linear infinite; }
@keyframes ispin { to { transform: rotate(360deg); } }
.an-pulse { animation: ipulse 3s ease-in-out infinite; }
@keyframes ipulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.22); opacity: .7; } }
.an-blink { animation: iblink 3.5s steps(1) infinite; }
@keyframes iblink { 0%, 88%, 100% { opacity: 1; } 92%, 96% { opacity: .2; } }
.an-flow { stroke-dasharray: 4 5; animation: iflow 1.8s linear infinite; }
@keyframes iflow { to { stroke-dashoffset: -9; } }
.an-bob { animation: ibob 3.5s ease-in-out infinite; }
@keyframes ibob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
.an-wave { animation: iwave 2.6s ease-in-out infinite; }
@keyframes iwave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.6); } }
.an-cart { animation: icart 3.8s ease-in-out infinite; }
@keyframes icart { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.an-orbit { animation: iorbit 6s linear infinite; }
@keyframes iorbit { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .an-spin, .an-spin-f, .an-pulse, .an-blink, .an-flow, .an-bob, .an-wave, .an-cart, .an-orbit {
    animation: none !important;
  }
}