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

.bg-primary {
  background-color: #001334;
}

.bg-secondary{
    background-color: #DA101C;
}

.text-primary {
  color: #001334;
}

.text-secondary {
  color: #DA101C;
}

  /* Animação de entrada dos links */
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .nav-link-anim { animation: fadeInDown 0.3s ease both; }
  .nav-link-anim:nth-child(1) { animation-delay: 0.05s; }
  .nav-link-anim:nth-child(2) { animation-delay: 0.10s; }
  .nav-link-anim:nth-child(3) { animation-delay: 0.15s; }
  .nav-link-anim:nth-child(4) { animation-delay: 0.20s; }
  .nav-link-anim:nth-child(5) { animation-delay: 0.25s; }

  /* Underline deslizante nos links */
  .nav-item-link {
    position: relative;
  }
  .nav-item-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: #DA101C;
    border-radius: 2px;
    transition: width 0.25s ease;
  }
  .nav-item-link:hover::after { width: 100%; }

  /* Glassmorphism ao rolar */
  nav.scrolled {
    background: rgba(0, 19, 52, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 32px rgba(0,0,0,0.35);
    border-bottom-color: rgba(218,16,28,0.35) !important;
  }

  /* Linha vermelha animada ao rolar */
  nav::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, #DA101C, transparent);
    transition: width 0.6s ease;
  }
  nav.scrolled::after { width: 35%; }

  /* Dot pulsante */
  @keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.6); }
  }
  .pulse-dot { animation: pulse-dot 2s infinite; }