/* NAV MENU BASE */
html, body {
    height: 100%;
    overflow: hidden; /* STOP MAIN PAGE SCROLL */
}

.nav a {
    position: relative;
    display: block;
    padding: 6px 8px;
    margin: 2px 0;
    font-size: 12px;
    color: #cfe8ff;
    text-decoration: none;
    border-radius: 4px;
    background: rgba(10, 14, 18, 0.55);
    border: 1px solid rgba(120, 200, 255, 0.18);
    overflow: hidden;
    transition: 0.18s ease-out;
}

/* Hover glow */
.nav a:hover {
    color: #fff;
    border-color: #6cf;
    box-shadow:
        0 0 12px rgba(120, 220, 255, 0.55),
        inset 0 0 10px rgba(0, 0, 0, 0.9);
    transform: translateX(2px);
}

/* ACTIVE CLICK FLASH */
.nav a:active {
    box-shadow:
        0 0 6px rgba(80, 160, 220, 0.7),
        inset 0 0 12px rgba(0, 0, 0, 1);
    transform: translateX(0);
}

/* SHINE SWEEP EFFECT */
.nav a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.0) 100%
    );
    transform: skewX(-25deg);
    transition: 0.4s ease;
}

/* Sweep on hover */
.nav a:hover::before {
    left: 120%;
}

/* SUBTLE IDLE PULSE */
@keyframes idlePulse {
    0%   { box-shadow: 0 0 0 rgba(120,200,255,0.0); }
    50%  { box-shadow: 0 0 6px rgba(120,200,255,0.15); }
    100% { box-shadow: 0 0 0 rgba(120,200,255,0.0); }
}

.nav a {
    animation: idlePulse 4s ease-in-out infinite;
}