/* ============================================================
   Movilo · Riel de redes sociales + mascota Memo ilustrada
   Ruta de URL: /static/Movilo/social/social.css
   Sin CDNs externos. Cero dependencias externas.
   ============================================================ */

/* ── 1. Keyframes ── */

/* Flotar suave en reposo (burbujas de red) */
@keyframes mv-float {
  0%,100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-6px) scale(1.02); }
}

/* Boing en hover: squash & stretch */
@keyframes mv-boing {
  0%   { transform: scale(1,1); }
  15%  { transform: scale(1.18,0.82); }  /* squash */
  30%  { transform: scale(0.88,1.18); }  /* stretch */
  45%  { transform: scale(1.1,0.94);  }
  60%  { transform: scale(0.96,1.06); }
  75%  { transform: scale(1.04,0.98); }
  100% { transform: scale(1,1); }
}

/* Rebote suave continuo para el widget Memo (chat launcher) */
@keyframes mv-memo-bounce {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-5px); }
}

/* Flotar idle de la ilustracion Memo en el riel */
@keyframes mv-memo-float {
  0%,100% { transform: translateY(0px) rotate(-2deg); }
  50%     { transform: translateY(-7px) rotate(2deg); }
}

/* Boing para la ilustracion Memo en hover del riel */
@keyframes mv-memo-boing {
  0%   { transform: scale(1,1) rotate(0deg); }
  15%  { transform: scale(1.14,0.88) rotate(-4deg); }
  35%  { transform: scale(0.90,1.14) rotate(3deg); }
  55%  { transform: scale(1.06,0.96) rotate(-1deg); }
  75%  { transform: scale(0.98,1.03) rotate(1deg); }
  100% { transform: scale(1,1) rotate(0deg); }
}

/* Respetar motion reducido */
@media (prefers-reduced-motion: reduce) {
  .mv-social-rail *,
  .mv-social-bubble,
  .mv-social-memo,
  .mv-memo-bounce {
    animation: none !important;
    transition: none !important;
  }
}

/* ── 2. Riel vertical ── */
.mv-social-rail {
  position: fixed;
  left: 14px;
  bottom: 100px; /* por encima de la bottom-nav en mobile */
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* sin width fija — se ajusta al contenido */
}

/* Cuando el riel tiene hover, el boing afecta tambien a Memo */
.mv-social-rail:hover .mv-social-memo,
.mv-social-rail:focus-within .mv-social-memo {
  animation: mv-memo-boing 0.6s cubic-bezier(0.36,0.07,0.19,0.97) both;
  filter: drop-shadow(0 6px 14px rgba(249,115,22,0.35));
}

/* ── 3. Memo ilustrada (encabezado del riel) ── */
.mv-social-memo {
  display: block;
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* Efecto pegatina suave: fondo blanco circular con sombra */
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid rgba(249,115,22,0.20);
  box-shadow:
    0 3px 10px rgba(0,0,0,0.14),
    0 0 0 3px #ffffff,
    0 4px 16px rgba(249,115,22,0.18);
  padding: 4px;
  /* Animacion idle: flotar con ligero vaiven */
  animation: mv-memo-float 3.0s ease-in-out infinite;
  /* Separar un poco mas del primer icono */
  margin-bottom: 2px;
  /* El cursor no indica enlace — es decorativo */
  cursor: default;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  /* Transicion suave al dejar el hover */
  transition: filter 0.25s ease, box-shadow 0.25s ease;
}

/* ── 4. Burbuja base ── */
.mv-social-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Tamano base aumentado: 54px (era 48px) */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  /* Efecto sticker: borde blanco externo + sombra suave */
  border: 3px solid #ffffff;
  box-shadow:
    0 4px 14px rgba(0,0,0,0.20),
    0 1px 4px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.06);
  text-decoration: none;
  cursor: pointer;
  /* Flotar escalonado — se sobreescribe por nth-child */
  animation: mv-float 3.2s ease-in-out infinite;
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.15s ease;
  /* touch target minimo 44px — cubierto con 54px */
  -webkit-tap-highlight-color: transparent;
}

/* Escalonar la animacion idle por burbuja
   nth-child(2) = primera burbuja (Memo ocupa el slot 1) */
.mv-social-bubble:nth-child(2) { animation-delay: 0s; }
.mv-social-bubble:nth-child(3) { animation-delay: 0.6s; }
.mv-social-bubble:nth-child(4) { animation-delay: 1.2s; }
.mv-social-bubble:nth-child(5) { animation-delay: 1.8s; }

/* Hover individual sobre una burbuja: boing + sombra reforzada */
.mv-social-bubble:hover,
.mv-social-bubble:focus-visible {
  animation: mv-boing 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.28),
    0 2px 6px rgba(0,0,0,0.14),
    0 0 0 3px #ffffff;
  outline: 2px solid rgba(249,115,22,0.50);
  outline-offset: 2px;
  filter: brightness(1.10);
}

/* Focus sin mouse */
.mv-social-bubble:focus:not(:focus-visible) { outline: none; }

/* ── 5. Colores de marca por red ── */

/* Instagram — degradado de marca */
.mv-social-bubble--ig {
  background: radial-gradient(circle at 30% 110%,
    #ffd600 0%, #ff6a00 25%, #ee0979 50%, #c000a8 75%, #6600cc 100%);
}

/* TikTok — negro con glifo bicolor (cyan sobre negro) */
.mv-social-bubble--tt {
  background: #010101;
  /* el glifo SVG tiene las capas cyan + rosa de TikTok */
}

/* Facebook — azul de marca */
.mv-social-bubble--fb {
  background: #1877f2;
}

/* WhatsApp — verde de marca */
.mv-social-bubble--wa {
  background: #25d366;
}

/* ── 6. SVG dentro de burbuja ── */
.mv-social-bubble svg {
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

/* ── 7. Animacion Memo (widget chat launcher, por social.js) ── */
.mv-memo-bounce {
  animation: mv-memo-bounce 2.4s ease-in-out infinite !important;
}

/* ── 8. Ajuste mobile-first ── */

/* En pantallas muy pequenas (< 380px): ocultar imagen Memo
   para no solapar el bottom-nav; mantener las burbujas */
@media (max-width: 379px) {
  .mv-social-memo {
    display: none;
  }
  .mv-social-rail {
    left: 8px;
    gap: 8px;
  }
  .mv-social-bubble {
    width: 46px;
    height: 46px;
  }
  .mv-social-bubble svg {
    width: 24px;
    height: 24px;
  }
  /* Ajustar nth-child si Memo se oculta con display:none
     (el nav tiene Memo + 3 burbujas; cuando Memo es none
     los hijos visibles cambian, pero nth-child sigue contando
     el elemento — los delays quedan levemente desfasados, aceptable) */
}

/* En pantallas grandes dar mas respiro */
@media (min-width: 768px) {
  .mv-social-rail {
    left: 20px;
    bottom: 120px;
    gap: 12px;
  }
  .mv-social-memo {
    width: 64px;
    height: 64px;
  }
  .mv-social-bubble {
    width: 56px;
    height: 56px;
  }
  .mv-social-bubble svg {
    width: 30px;
    height: 30px;
  }
}