/*
 * ══════════════════════════════════════════════
 *  NAVBAR.CSS — Estilos da Barra de Navegação
 * ══════════════════════════════════════════════
 *
 *  Propósito : Underline hover nos links e animação beam-slide.
 *  Dependências : tokens.css (--color-primary, --duration-normal).
 *  NÃO COLOCAR AQUI : Layout da navbar (está em classes Tailwind).
 */

/* ── Link Hover Underline ─────────────────────── */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -4px;
    left: 50%;
    background-color: var(--color-primary);
    transition: all var(--duration-normal) ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 100%;
}

/* ── Beam Slide (linha inferior animada) ──────── */
@keyframes beam-slide {
    0%   { transform: translateX(-100%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* ── Estado Scrollado (Após a Segunda Dobra) ── */
.navbar-scrolled {
    background-color: rgba(10, 10, 10, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}