/* ======================================================
   MedClin24h — Estilos base (Tailwind + animações extras)
   ====================================================== */

/* Diretivas Tailwind CSS (para build local) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   🎞️ Animações personalizadas
   ======================================== */

/* Flutuação leve (para ícones e imagens decorativas) */
@keyframes float-bob {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.float-bob {
  animation: float-bob 4s ease-in-out infinite;
}

/* Fade-in + leve deslocamento (usado no JS e mobile menu) */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.35s ease-out forwards;
}

/* ========================================
   ⚙️ Efeitos utilitários
   ======================================== */

/* Spinner do preloader (usado no carregamento inicial) */
.spinner-border {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #00b093;
  /* Cor principal do MedClin */
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Brilho suave em botões (usado nos botões principais) */
.group:hover span.absolute {
  transform: scaleX(1.05) skewX(-10deg);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* ========================================
   🧩 Ajustes finos visuais
   ======================================== */

/* Corrige ícones Font Awesome em hover */
i {
  transition: color 0.3s ease;
}

/* Ajuste de imagem responsiva e sombra */
img.rounded-xl {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Pequeno efeito de elevação global em hover */
.hover-lift:hover {
  transform: translateY(-4px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}


/* ===============================
   PRELOADER — Batimento cardíaco
   =============================== */

/* Batimento com leve deformação */
@keyframes heartbeat {

  0%,
  40%,
  80%,
  100% {
    transform: scaleY(1);
    opacity: 0.8;
  }

  20%,
  60% {
    transform: scaleY(1.6);
    opacity: 1;
  }
}

.animate-heartbeat {
  animation: heartbeat 1.3s ease-in-out infinite;
}

/* Fade suave para texto */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 1.2s ease-in-out forwards;
}

/* Pulsação lenta da logo */
@keyframes pulseSlow {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.animate-pulse-slow {
  animation: pulseSlow 2.5s ease-in-out infinite;
}

/* Efeito de saída global (fade + scale down) */
.fade-out {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.8s ease, transform 0.8s ease;
}



#menuContent {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

#toggleMenu {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

#toggleMenu:hover {
  transform: scale(1.1);
}

#sideMenu.open #toggleMenu {
  transform: translateX(-14rem);
  /* move o botão junto com o painel aberto */
}

/* Flutuação lenta para elementos decorativos */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}