/* =============================================
   Botões flutuantes — redes sociais
   ============================================= */

/* Grupo: Instagram + GitHub (canto inferior esquerdo) */
.social-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 999;
}

.social-float a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.88;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  /* Esconde o texto visualmente, mantém acessibilidade */
  font-size: 0;
  color: transparent;
}

.social-float a:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* GitHub */
.social-float a[href*="github"] {
  background: #24292f;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.social-float a[href*="github"]:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

/* Instagram */
.social-float a[href*="instagram"] {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  box-shadow: 0 2px 8px rgba(214, 36, 159, 0.22);
}
.social-float a[href*="instagram"]:hover {
  box-shadow: 0 4px 16px rgba(214, 36, 159, 0.38);
}

/* Ícones — adicione via pseudo-elemento ou SVG inline */
.social-float a[href*="github"]::before,
.social-float a[href*="instagram"]::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1); /* torna branco */
}

.social-float a[href*="github"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'/%3E%3C/svg%3E");
  filter: none;
}

.social-float a[href*="instagram"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");
  filter: none;
}

/* =============================================
   Botão WhatsApp (canto inferior direito)
   ============================================= */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;

  display: flex;
  align-items: center;
  gap: 8px;

  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;

  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 100px;

  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.28);
  opacity: 0.93;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.whatsapp-float::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.whatsapp-float:hover {
  transform: scale(1.04);
  opacity: 1;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.42);
}

/* Acessibilidade: foco visível */
.social-float a:focus-visible,
.whatsapp-float:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* =========================================================
   FLOATING BUTTONS — CONTROLE PREMIUM DE VISIBILIDADE
   Regra:
   - HERO visível  => social-float aparece | whatsapp some
   - Fora da HERO  => social-float some    | whatsapp aparece
   ========================================================= */

/* Melhor transição para os elementos flutuantes */
.social-float,
.social-float a,
.whatsapp-float {
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
  will-change: opacity, transform;
}

/* Estado base de visibilidade */
.social-float,
.whatsapp-float {
  opacity: 1;
  visibility: visible;
}

/* Esconde o grupo social (GitHub + Instagram) */
.social-float.float-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-18px) translateY(6px);
}

/* Esconde o WhatsApp */
.whatsapp-float.float-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px) translateY(6px);
}

/* Pequeno refinamento: quando os links sociais estiverem visíveis */
.social-float:not(.float-hidden) a {
  transform: translateY(0);
}

/* Acessibilidade: reduz animação para quem preferir menos movimento */
@media (prefers-reduced-motion: reduce) {
  .social-float,
  .social-float a,
  .whatsapp-float {
    transition: none !important;
  }
}