/* 
 * Websly Ultra-Modern Navbar Styles (v5.1)
 * High-performance visual effects for premium navigation components.
 */

/* --- 1. Navbar Styles --- */

/* Neon Wide */
.websly-nav-neon {
    border-bottom: 2px solid var(--accent-default);
    box-shadow: 0 4px 20px -5px rgba(var(--accent-default-rgb), 0.4);
    transition: box-shadow 0.6s ease, border-color 0.6s ease;
}

#navbar.scrolled.websly-nav-neon {
    box-shadow: 0 10px 40px -10px rgba(var(--accent-default-rgb), 0.6);
}

/* Kinetic Minimalist */
.websly-nav-kinetic {
    backdrop-filter: blur(0px); /* Transition to blur on scroll */
}

#navbar.scrolled.websly-nav-kinetic {
    backdrop-filter: blur(20px);
    background: color-mix(in srgb, var(--bg-theme-base) 80%, transparent);
}

/* --- 2. Menu Item Hover Animations --- */

.websly-nav-links-wrap li {
    position: relative;
    list-style: none;
}

.websly-nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Magnet Glow */
.websly-hover-magnet-glow .websly-nav-link:hover {
    transform: translateY(-2px) scale(1.05);
    color: var(--accent-default);
}

.websly-hover-magnet-glow .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: -5px;
    background: radial-gradient(circle, rgba(var(--accent-default-rgb), 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    border-radius: 999px;
}

.websly-hover-magnet-glow .websly-nav-link:hover::before {
    opacity: 1;
}

/* Kinetic Underscore */
.websly-hover-kinetic-underscore .websly-nav-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0%;
    height: 2px;
    background: var(--accent-default);
    transition: width 0.4s cubic-bezier(0.8, 0, 0.2, 1), left 0.4s cubic-bezier(0.8, 0, 0.2, 1);
    border-radius: 99px;
    box-shadow: 0 0 8px var(--accent-default);
}

.websly-hover-kinetic-underscore .websly-nav-link:hover::after {
    width: 80%;
    left: 10%;
}

/* Ambient Pulse */
.websly-hover-ambient-pulse .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent-default);
    opacity: 0;
    transform: scale(0.8);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    z-index: -1;
    border-radius: 8px;
    filter: blur(10px);
}

.websly-hover-ambient-pulse .websly-nav-link:hover::before {
    opacity: 0.1;
    transform: scale(1.1);
}

/* --- 3. Interaction Mechanics (JavaScript Driven) --- */

/* Scrolled state for all navbars */
#navbar.scrolled {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
}

/* Pill Capsule specific transition */
#navbar[data-nav-style="pill-capsule"].scrolled {
    width: 85% !important;
    border-radius: 999px !important;
}

/* --- 4. 5.1 Surface Engine Bridges --- */

/* Material Overrides */
.ws-mat-glass {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.ws-mat-solid {
    backdrop-filter: none;
    background-color: var(--bg-theme-surface) !important;
}

.ws-mat-transparent {
    backdrop-filter: none;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Tone Overrides */
.ws-tone-accent {
    --text-theme-text-rgb: 255, 255, 255;
    background-color: var(--accent-default) !important;
    color: var(--text-on-accent) !important;
}

/* Frame Overrides */
.ws-frame-none { border: none !important; }
.ws-frame-subtle { border: 1px solid rgba(var(--text-theme-text-rgb), 0.08) !important; }
.ws-frame-strong { border: 2px solid rgba(var(--text-theme-text-rgb), 0.2) !important; }