/* Единая верхняя панель vpnv.space — подключается на всех страницах (nav.css + nav.js).
   Правки делать ЗДЕСЬ, а не копировать в страницы. */

.vnav { position: sticky; top: 0; z-index: 50; display: flex; justify-content: space-between; align-items: center;
        padding: 16px 40px !important; background: rgba(10,14,39,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        transition: padding .3s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.vnav.scrolled { padding: 10px 40px !important; background: rgba(8,11,32,0.94); box-shadow: 0 8px 30px rgba(0,0,0,0.45); border-color: rgba(102,126,234,0.28); }

.vnav-logo { display: flex; align-items: center; gap: 8px; font-size: 1.55em; font-weight: 700; text-decoration: none; color: #fff; transition: font-size .3s ease; }
.vnav-rocket { display: inline-block; animation: vnavFloat 3.6s ease-in-out infinite; }
@keyframes vnavFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-8deg); } }
.vnav-title { background: linear-gradient(100deg, #8fa2f0, #c3ccff, #8fa2f0); background-size: 200% auto;
              -webkit-background-clip: text; background-clip: text; color: transparent; animation: vnavShine 6s linear infinite; }
@keyframes vnavShine { to { background-position: 200% center; } }

.vnav-links { display: flex; gap: 6px; align-items: center; }
.vnav-links a { position: relative; color: rgba(255,255,255,0.78); text-decoration: none; padding: 9px 16px; border-radius: 12px;
                white-space: nowrap; transition: color .25s ease, background .25s ease, transform .25s ease; }
.vnav-links a::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; border-radius: 2px;
                       background: linear-gradient(90deg, #667eea, #a5b4fc); transform: translateX(-50%); transition: width .28s cubic-bezier(.4,0,.2,1); }
.vnav-links a:hover { color: #fff; background: rgba(102,126,234,0.14); transform: translateY(-1px); }
.vnav-links a:hover::after { width: calc(100% - 32px); }
.vnav-links a.active { color: #fff; background: rgba(102,126,234,0.18); }

/* Гамбургер → крестик */
.vnav-burger { display: none; width: 42px; height: 42px; flex: 0 0 auto; position: relative; padding: 0; cursor: pointer;
               background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
               transition: background .25s ease, border-color .25s ease, transform .2s ease; }
.vnav-burger:active { transform: scale(0.94); }
.vnav-burger span { position: absolute; left: 11px; width: 20px; height: 2px; border-radius: 2px; background: #fff;
                    transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .2s ease, width .32s ease; }
.vnav-burger span:nth-child(1) { top: 14px; }
.vnav-burger span:nth-child(2) { top: 20px; width: 14px; }
.vnav-burger span:nth-child(3) { top: 26px; }
.vnav-burger.active { background: rgba(102,126,234,0.22); border-color: rgba(102,126,234,0.55); }
.vnav-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vnav-burger.active span:nth-child(2) { opacity: 0; width: 0; }
.vnav-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 768px) {
    .vnav { padding: 12px 16px !important; }
    .vnav.scrolled { padding: 9px 16px !important; }
    .vnav-logo { font-size: 1.15em; }
    .vnav-burger { display: block; }
    /* Показ через display — надёжнее visibility/max-height: на страницах есть свои
       стили, которые перебивали переходы. Анимируем сам блок и ссылки в нём. */
    .vnav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 8px;
                  padding: 12px 14px 18px; background: rgba(9,12,34,0.97);
                  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
                  border-bottom: 1px solid rgba(102,126,234,0.25); border-radius: 0 0 18px 18px;
                  box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
    .vnav-links.open { display: flex; animation: vnavDrop .3s cubic-bezier(.4,0,.2,1) both; }
    @keyframes vnavDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
    .vnav-links a { font-size: 16px; padding: 14px 18px; text-align: left; color: rgba(255,255,255,0.92);
                    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
                    transition: background .2s ease, border-color .2s ease; }
    .vnav-links a::after { display: none; }
    /* Ссылки показываем сразу: поштучную анимацию перебивали общие переходы страниц
       (ultra-smooth.css), из-за чего пункты оставались невидимыми. Выезжает весь блок. */
    .vnav-links.open a { opacity: 1 !important; transform: none !important; animation: none !important; }
    .vnav-links a:active { background: rgba(102,126,234,0.22); border-color: rgba(102,126,234,0.5); }
}

@media (prefers-reduced-motion: reduce) {
    .vnav-rocket, .vnav-title { animation: none; }
    .vnav, .vnav-links, .vnav-links a, .vnav-burger span { transition-duration: .01ms; }
}