/* Floating Social Icons Pro – Frontend CSS */

/* ── Entrance animations ── */
.fsi-wrapper {
  transition: opacity .4s;
}

.fsi-entrance-slideIn { animation: fsiSlideIn .5s cubic-bezier(.34,1.56,.64,1) both; }
.fsi-entrance-fadeIn  { animation: fsiFadeIn .6s ease both; }
.fsi-entrance-none    {}

@keyframes fsiSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fsiFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Icon hover ── */
.fsi-icon {
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.fsi-icon:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* ── Icon animations ── */
.fsi-anim-bounce  { animation: fsiBounce 2.4s infinite; }
.fsi-anim-pulse   { animation: fsiPulse  2s   infinite; }
.fsi-anim-shake   { animation: fsiShake  3s   infinite; }
.fsi-anim-swing   { animation: fsiSwing  2.8s infinite; }

@keyframes fsiBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes fsiPulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; }
  50%     { box-shadow: 0 0 0 10px transparent; }
}
@keyframes fsiShake {
  0%,100% { transform: rotate(0deg); }
  10%,50% { transform: rotate(-12deg); }
  30%,70% { transform: rotate(12deg); }
  80%     { transform: rotate(0deg); }
}
@keyframes fsiSwing {
  0%,100% { transform: rotate(0); }
  20%     { transform: rotate(8deg); }
  40%     { transform: rotate(-6deg); }
  60%     { transform: rotate(4deg); }
  80%     { transform: rotate(-2deg); }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .fsi-wrapper { bottom: 12px !important; right: 12px !important; left: auto !important; }
}