@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    /* Estética técnica e rolagem fluida */
    @apply antialiased overflow-x-hidden bg-chumbo text-white scroll-smooth;
  }
}

/* ==========================================================================
   HEADER PREMIUM (TRANSIÇÃO E CONTRASTE)
   ========================================================================== 
*/

/* 1. Estado Inicial: Logo Branca via Filtro */
.logo-white {
  filter: brightness(0) invert(1);
  @apply transition-all duration-500 ease-in-out;
}

/* 2. Estado Scrolled: Fundo Branco Sólido */
.header-scrolled {
  background-color: #FFFFFF !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  @apply border-b border-gray-100 transition-all duration-500;
}

/* 3. Reversão da Logo no Scroll */
.header-scrolled #header-logo {
  filter: none;
}

/* 4. Cores do Menu no Scroll: Força o texto para Preto (Chumbo) */
.header-scrolled #nav-menu .nav-text {
  color: #0B0B0B !important;
}

/* 5. Botão "Falar com Especialista" no Scroll */
.header-scrolled #cta-button {
  background-color: #00C3FF !important;
  color: #0B0B0B !important;
  @apply shadow-md hover:brightness-110;
}

/* 6. BOTÃO HAMBÚRGUER (MOBILE) */
#menu-btn {
  @apply transition-colors duration-500;
  color: #FFFFFF; 
}

/* Quando o header está branco, o botão fica preto */
.header-scrolled #menu-btn {
  color: #0B0B0B !important;
}

/* Garante que o ícone acompanhe a cor do botão */
#menu-btn svg {
  stroke: currentColor;
}

/* Se o menu estiver ABERTO, o botão principal deve ser branco (contraste com o modal escuro) */
.menu-open #menu-btn {
  color: #FFFFFF !important;
}

/* ==========================================================================
   EFEITO SIRIUS STAR (HOVER NOS MENUS)
   ========================================================================== 
*/

.nav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.nav-text {
  @apply transition-colors duration-400 ease-in-out;
}

/* Estrela Sirius */
.star-icon {
  position: absolute;
  top: -8px;
  font-size: 10px;
  color: #00C3FF;
  opacity: 0;
  transform: scale(0) rotate(-45deg);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 0 8px rgba(0, 195, 255, 0.6);
}

/* Rastro Estelar */
.nav-line {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00C3FF, transparent);
  transition: all 0.4s ease-in-out;
  transform: translateX(-50%);
}

/* Interação de Hover */
.nav-item:hover .nav-text {
  color: #00C3FF !important;
}

.nav-item:hover .star-icon {
  opacity: 1;
  top: -14px;
  transform: scale(1.2) rotate(0deg);
}

.nav-item:hover .nav-line {
  width: 100%;
}

/* ==========================================================================
   MENU MOBILE MODAL (TOP-DOWN)
   ========================================================================== 
*/

#mobile-menu {
  /* Começa fora da tela (acima) */
  transform: translateY(-100%);
  @apply transition-transform duration-700 cubic-bezier(0.77, 0, 0.175, 1);
}

/* Quando aberto, desliza para baixo */
.menu-open #mobile-menu {
  transform: translateY(0);
}

/* Estilo do botão X dedicado dentro do modal */
#close-menu {
  @apply transition-all duration-300;
}

#close-menu:hover {
  @apply text-sky-sirius scale-110;
}

.mobile-link {
  @apply text-white hover:text-sky-sirius transition-all duration-300 tracking-widest uppercase font-bold text-center;
}

/* ==========================================================================
   ANIMAÇÕES E COMPONENTES TECH
   ========================================================================== 
*/

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

::selection {
  background-color: #00C3FF;
  color: #0B0B0B;
}

.glass-card {
  @apply bg-chumbo-light/50 backdrop-blur-md border border-white/5 shadow-2xl;
}