/* =============================================================
   O MENU
   -------------------------------------------------------------
   Antes, cada item tinha o seu próprio marcador: um aparecia
   enquanto outro sumia. Isso é o que faz uma seleção parecer barata —
   nada se move, duas coisas piscam.

   Aqui a seleção é UM objeto só, que viaja. E como ele viaja, pode se
   comportar como matéria: estica na direção do movimento, chega com
   inércia, assenta. É o mesmo truque de animação clássica — esticar e
   achatar — aplicado a um marcador de menu.

   E ele empurra quem passa. Ao atravessar os itens do caminho, cada um
   recua por um instante e volta, como água abrindo. Dura 400ms e some;
   movimento que fica é movimento que cansa.
============================================================= */

.sidebar-nav { position: relative; }

/* -------------------------------------------------------------
   O farol: o objeto que viaja
------------------------------------------------------------- */

.nav-farol {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--farol-h, 38px);
    border-radius: var(--r-sm);
    pointer-events: none;
    z-index: 0;

    transform: translate3d(0, var(--farol-y, 0px), 0) scaleY(var(--farol-esticar, 1));
    transform-origin: center var(--farol-origem, center);

    background: linear-gradient(90deg,
        rgba(233, 192, 122, .16),
        rgba(233, 192, 122, .04) 60%,
        transparent);

    opacity: 0;
    transition:
        transform 420ms cubic-bezier(.34, 1.32, .3, 1),
        height 300ms cubic-bezier(.34, 1.32, .3, 1),
        opacity 200ms ease;
}

.sidebar-nav.tem-farol .nav-farol { opacity: 1; }

/* O fio dourado anda junto, colado na borda de entrada. Ele é a
   assinatura: curto, sempre no mesmo lugar, nunca em outro. */
.nav-farol::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 18px;
    margin-top: -9px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(233, 192, 122, .5);
    transform: scaleY(var(--farol-fio, 1));
    transition: transform 420ms cubic-bezier(.34, 1.32, .3, 1);
}

/* -------------------------------------------------------------
   Os itens
------------------------------------------------------------- */

/* O marcador de cada item sai de cena: quem marca agora é o farol.
   Dois marcadores seria o mesmo problema de antes, só que pior. */
.nav-item::before { display: none; }

.nav-item {
    position: relative;
    z-index: 1;
    background: none;
    overflow: visible;
    transition:
        color 220ms ease,
        transform 300ms cubic-bezier(.34, 1.32, .3, 1);
}

.nav-item.active {
    background: none;
    color: var(--text-strong);
}
.nav-item.active i,
.nav-item.active svg { opacity: 1; }

.nav-item:hover { background: none; color: var(--text); transform: none; }

/* No hover, o item se abre um pouco em vez de deslizar. Deslizar
   competia com o farol, que também se move — duas coisas andando ao
   mesmo tempo o olho lê como tremor. */
.nav-item:hover i,
.nav-item:hover svg {
    opacity: 1;
    transform: scale(1.12);
}
.nav-item i, .nav-item svg {
    transition: opacity 200ms ease, transform 260ms cubic-bezier(.34, 1.4, .3, 1);
}

/* -------------------------------------------------------------
   A onda: quem o farol atravessa recua e volta
------------------------------------------------------------- */

.nav-item.onda {
    animation: navOnda 400ms cubic-bezier(.34, 1.3, .3, 1);
}

@keyframes navOnda {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* O item que ACABA de receber o farol chega um instante depois dele —
   a informação assenta junto com o objeto, não antes. */
.nav-item.chegando {
    animation: navChega 420ms cubic-bezier(.34, 1.35, .3, 1);
}

@keyframes navChega {
    0%   { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

/* -------------------------------------------------------------
   Menu fechado
-------------------------------------------------------------
   Com o menu recolhido só o ícone aparece, então o farol vira um
   quadrado do tamanho do ícone. Deixá-lo com a largura toda faria
   uma faixa dourada atravessar uma coluna de 60px. */

.sidebar.collapsed .nav-farol,
.sidebar.is-collapsed .nav-farol,
body.sidebar-collapsed .nav-farol {
    background: rgba(233, 192, 122, .12);
    border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
    .nav-farol,
    .nav-farol::before,
    .nav-item,
    .nav-item.onda,
    .nav-item.chegando {
        transition: none !important;
        animation: none !important;
    }
}