/* UiCoreNavBar.css — Navigation bar core component */
/* deps: { TokensFixed.css, TokensFluid.css, TokensOklchDark.css, Foundation.css, UiUtilDropDown.css } */

@layer components {

/* =============================================================================
   NAVBAR — Root Component
   
   Responsive Behavior (controlled via JavaScript + CSS classes):
   - Default (Desktop): Pills visible, menu toggle hidden
   - .is-compact (Tablet): Pills hidden, menu toggle → dropdown
   - .is-mobile (Mobile): Same as tablet with smaller UI adjustments
   
   JavaScript reads breakpoint tokens and toggles classes:
   - --token-breakpoint-850 (compact)
   - --token-breakpoint-500 (mobile)
   ============================================================================= */

.navbar {
       /* Positioning */
    position: fixed;
    inset-block-start: var(--token-space-12);
    inset-inline: 0;
    z-index: var(--token-z-overlay);
    
    /* Spacing */
    padding-inline: var(--token-padding-fluid-20-40);
    
    /* Initial state — hidden until JS reveals */
    opacity: 0;
    
    /* Transitions */
    transition: 
        opacity var(--token-duration-slow) var(--token-ease-smooth-out),
        transform var(--token-duration-base) var(--token-ease-smooth);
    
    /* Ready state — JS adds .is-ready after init complete */
    &.is-ready {
        opacity: 1;
    }
}

/* =============================================================================
   NAVBAR CONTAINER
   ============================================================================= */

.navbar-container {
    max-width: var(--token-max-width-1400);
    margin-inline: auto;
    
    /* Layout */
    display: flex;
    align-items: center;
    gap: var(--token-space-8);
    
    /* Appearance */
    background: var(--token-bg-card);
    border-radius: var(--token-radius-24);
    padding: var(--token-padding-8);
    box-shadow: var(--token-shadow-card);
    overflow: visible;
}

/* =============================================================================
   NAVBAR SECTIONS — Flex Layout
   
   Structure (Desktop):
   [Logo] [---- Pills ----] [User]
   
   Structure (Compact — JS toggles .is-compact):
   [☰] [------ Logo ------] [User]
   
   Structure (Mobile — JS toggles .is-mobile):
   [☰] [------ Logo ------] [👤]
   ============================================================================= */

.navbar-section {
    display: flex;
    align-items: center;
    gap: var(--token-space-8);
    
    /* Appearance */
    background: var(--token-bg-surface);
    padding: var(--token-padding-8);
    border-radius: var(--token-radius-16);
    box-shadow: var(--token-shadow-inner-default);
}

/* Logo section — FIXED width */
.navbar-section--logo {
    flex: 0 0 auto;
    overflow: visible;
    position: relative;
}

/* Jet boost glow shadow — JS controls animation */
.navbar-logo-shadow {
    position: absolute;
    inset-block-end: -0.33em;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    
    /* Cyan glow to match jet boots */
    inline-size: var(--token-width-112);
    block-size: var(--token-height-8);
    background: radial-gradient(ellipse, var(--token-navbar-logo-shadow-color) 0%, transparent 70%);
    border-radius: var(--token-radius-full);
    filter: blur(var(--token-blur-2));
    
    /* Initial state matches JS average — prevents flash on load */
    opacity: var(--token-opacity-60);
    
    /* JS controls transform and opacity */
    will-change: transform, opacity;
    z-index: var(--token-z-base);
    pointer-events: none;
}

/* Links section — FLEXIBLE, fills space */
.navbar-section--links {
    position: relative;
    flex: 1 1 auto;
    justify-content: center;
}

/* User section — FIXED width */
.navbar-section--user {
    flex: 0 0 auto;
    overflow: visible;
}

/* =============================================================================
   LOGO / BRAND
   ============================================================================= */

.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-color-brand-orange);
        outline-offset: var(--token-outline-offset-md);
        border-radius: var(--token-radius-full);
    }
}

/* Logo Image — Breaks out of navbar (larger, overlaps top) */
.navbar-logo-img {
    /* Size larger than navbar height */
    inline-size: auto;
    block-size: var(--token-height-72);
    
    /* Break out above the navbar */
    margin-block-start: calc(-1 * var(--token-margin-16));
    margin-block-end: calc(-1 * var(--token-margin-8));
    
    /* JS controls the floating animation via inline style */
    will-change: transform;
    
    /* Above the shadow */
    position: relative;
    z-index: var(--token-z-above);
}

/* =============================================================================
   NAVIGATION PILLS
   ============================================================================= */

.navbar-pills {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--token-space-fluid-4-8);
}

/* =============================================================================
   MENU TOGGLE — Hamburger → X
   
   Simple, clean implementation:
   - 3 lines transform to X when open
   - Orange accent on hover (mouse only) and open state
   - Focus outline for accessibility
   ============================================================================= */

.navbar-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    
    /* Touch target (44px minimum) */
    inline-size: var(--token-height-44);
    block-size: var(--token-height-44);
    
    /* Clean appearance */
    background: transparent;
    border: none;
    border-radius: var(--token-radius-12);
    padding: 0;
    cursor: pointer;
    
    /* Focus outline */
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-color-brand-orange);
        outline-offset: var(--token-outline-offset-sm);
    }
}

/* Menu Icon — Container for lines */
.navbar-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--token-space-6);
    inline-size: var(--token-size-24);
    block-size: var(--token-size-24);
}

/* Menu Lines — The 3 bars */
.navbar-menu-line {
    display: block;
    inline-size: 100%;
    block-size: var(--token-border-2);
    background: var(--token-text-primary);
    border-radius: var(--token-radius-full);
    transition: 
        transform var(--token-duration-base) var(--token-ease-bounce),
        opacity var(--token-duration-fast) var(--token-ease-smooth),
        background var(--token-duration-fast) var(--token-ease-smooth);
    
    /* Middle line shorter */
    &:nth-child(2) {
        inline-size: 75%;
    }
}

/* Hover: Orange lines (mouse/trackpad only) */
@media (hover: hover) {
    .navbar-menu-toggle:hover .navbar-menu-line {
        background: var(--token-color-brand-orange);
    }
}

/* Open State: X Transform */
[data-dropdown-id].is-open .navbar-menu-line {
    background: var(--token-color-brand-orange);
    
    &:nth-child(1) {
        transform: translateY(calc(var(--token-space-6) + var(--token-border-2))) rotate(45deg);
    }
    
    &:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    
    &:nth-child(3) {
        transform: translateY(calc(-1 * (var(--token-space-6) + var(--token-border-2)))) rotate(-45deg);
    }
}

/* Sliding Bubble Indicator */
.navbar-pills-indicator {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
    
    /* Appearance */
    background: var(--token-bg-item-hover);
    border-radius: var(--token-radius-12);
    box-shadow: var(--token-shadow-inner-orange);
    
    /* Animation */
    transition: 
        transform var(--token-duration-280) var(--token-ease-smooth-out),
        inline-size var(--token-duration-280) var(--token-ease-smooth-out);
    will-change: transform, inline-size;
    
    /* Behind pills */
    pointer-events: none;
    z-index: var(--token-z-base);
}

.navbar-pill {
    position: relative;
    
    /* Spacing */
    padding-block: var(--token-padding-8);
    padding-inline: var(--token-padding-16);
    
    /* Typography */
    font-family: var(--token-font-primary);
    font-size: var(--token-text-14);
    font-weight: var(--token-weight-600);
    color: var(--token-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    
    /* Appearance */
    border-radius: var(--token-radius-12);
    cursor: pointer;
    user-select: none;
    z-index: var(--token-z-above);
    
    transition: color var(--token-duration-fast) var(--token-ease-smooth);
    
    &:hover,
    &:focus-visible {
        color: var(--token-text-primary);
    }
    
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-border-orange);
        outline-offset: var(--token-outline-offset-sm);
    }
    
    &.is-active {
        color: var(--token-color-brand-orange);
    }
    
    &.is-inactive {
        opacity: var(--token-opacity-60);
        cursor: default;
    }
}

/* Pill Divider — Vertical separator */
.navbar-divider {
    inline-size: var(--token-border-1);
    block-size: var(--token-height-24);
    margin-inline: var(--token-margin-8);
    flex-shrink: 0;
    background: var(--token-border-orange);
}

/* =============================================================================
   LOGIN BUTTON (Electric Lightning Effect)
   ============================================================================= */

.navbar-login-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--token-space-12);
    
    /* Sizing */
    padding: var(--token-padding-12) var(--token-padding-24);
    
    /* Typography */
    font-family: var(--token-font-primary);
    font-weight: var(--token-weight-600);
    font-size: var(--token-text-14);
    color: var(--token-color-white);
    text-decoration: none;
    
    /* Appearance */
    background: var(--token-bg-gradient-cyan-purple);
    border-radius: var(--token-radius-12);
    overflow: visible;
    
    transition: 
        background var(--token-duration-base) var(--token-ease-smooth),
        transform var(--token-duration-fast) var(--token-ease-smooth);
    
    &:hover {
        background: var(--token-navbar-login-hover-bg);
        transform: scale(var(--token-scale-105));
    }
    
    &:active {
        transform: scale(var(--token-scale-102));
    }
    
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-color-brand-orange);
        outline-offset: var(--token-outline-offset-sm);
    }
}

.navbar-login-content {
    position: relative;
    z-index: var(--token-z-above);
    display: flex;
    align-items: center;
    gap: var(--token-space-12);
}

.navbar-login-icon {
    inline-size: var(--token-icon-24);
    block-size: var(--token-icon-24);
    flex-shrink: 0;
    fill: currentColor;
}

.navbar-login-text {
    white-space: nowrap;
}

/* Lightning Bolts */
.navbar-lightning-bolt {
    position: absolute;
    inline-size: var(--token-width-2);
    block-size: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--token-navbar-lightning-color) 50%, 
        transparent 100%);
    inset-block-start: 0;
    opacity: 0;
    pointer-events: none;
    
    &:nth-child(1) { inset-inline-start: var(--token-percent-15); animation: lightning1 var(--token-duration-3000) var(--token-ease-in-out) infinite; }
    &:nth-child(2) { inset-inline-start: var(--token-percent-35); animation: lightning2 var(--token-duration-2500) var(--token-ease-in-out) infinite; animation-delay: var(--token-delay-2000); }
    &:nth-child(3) { inset-inline-start: var(--token-percent-60); animation: lightning3 var(--token-duration-3500) var(--token-ease-in-out) infinite; animation-delay: var(--token-delay-1200); }
    &:nth-child(4) { inset-inline-start: var(--token-percent-80); animation: lightning4 var(--token-duration-3500) var(--token-ease-in-out) infinite; animation-delay: var(--token-delay-800); }
    &:nth-child(5) { inset-inline-start: var(--token-percent-25); animation: lightning5 var(--token-duration-3000) var(--token-ease-in-out) infinite; animation-delay: var(--token-delay-1500); }
    &:nth-child(6) { inset-inline-start: var(--token-percent-70); animation: lightning6 var(--token-duration-3000) var(--token-ease-in-out) infinite; animation-delay: var(--token-delay-300); }
}

@keyframes lightning1 {
    0%, 85%, 100% { opacity: 0; transform: translateY(-100%); }
    86% { opacity: 0; }
    87%, 88% { opacity: 1; transform: translateY(0); }
    89% { opacity: 0; }
    90%, 91% { opacity: 1; transform: translateY(0); }
}

@keyframes lightning2 {
    0%, 94%, 100% { opacity: 0; transform: translateY(-100%); }
    95%, 96% { opacity: 1; transform: translateY(0); }
}

@keyframes lightning3 {
    0%, 87%, 100% { opacity: 0; transform: translateY(-100%); }
    88% { opacity: 0; }
    89%, 90% { opacity: 1; transform: translateY(0); }
    91% { opacity: 0; }
    92% { opacity: 1; transform: translateY(0); }
}

@keyframes lightning4 {
    0%, 88%, 100% { opacity: 0; transform: translateY(-100%); }
    89% { opacity: 0; }
    90%, 91%, 92% { opacity: 1; transform: translateY(0); }
}

@keyframes lightning5 {
    0%, 92%, 100% { opacity: 0; transform: translateY(-100%) translateX(calc(-1 * var(--token-space-5))); }
    93% { opacity: 0; }
    94% { opacity: 1; transform: translateY(0) translateX(calc(-1 * var(--token-space-5))); }
    95% { opacity: 0; }
    96%, 97% { opacity: 1; transform: translateY(0) translateX(var(--token-space-5)); }
}

@keyframes lightning6 {
    0%, 90%, 100% { opacity: 0; transform: translateY(-100%) translateX(var(--token-space-5)); }
    91% { opacity: 0; }
    92%, 93% { opacity: 1; transform: translateY(0) translateX(calc(-1 * var(--token-space-5))); }
    94% { opacity: 0; }
    95% { opacity: 1; transform: translateY(0) translateX(var(--token-space-5)); }
}

/* =============================================================================
   FALLING SPARKLES EFFECT (Login Button Hover)
   
   Note: Keyframe position values use hardcoded rem because CSS keyframes
   cannot use CSS custom properties. Comments reference matching tokens.
   ============================================================================= */

.navbar-sparkle {
    position: absolute;
    inline-size: var(--token-size-6);
    block-size: var(--token-size-6);
    inset-block-start: calc(-1 * var(--token-size-20));
    opacity: 0;
    pointer-events: none;
    z-index: var(--token-z-above);
    
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--sparkle-color, var(--token-navbar-sparkle-color-cyan));
        clip-path: polygon(
            50% 0%, 55% 40%, 100% 50%, 55% 60%, 
            50% 100%, 45% 60%, 0% 50%, 45% 40%
        );
    }
}

/* Sparkle positions — alternating cyan and purple */
.navbar-sparkle:nth-of-type(1) { 
    inset-inline-start: var(--token-percent-10); 
    --sparkle-color: var(--token-navbar-sparkle-color-cyan); 
}
.navbar-sparkle:nth-of-type(2) { 
    inset-inline-start: var(--token-percent-25); 
    --sparkle-color: var(--token-navbar-sparkle-color-purple); 
}
.navbar-sparkle:nth-of-type(3) { 
    inset-inline-start: var(--token-percent-40); 
    --sparkle-color: var(--token-navbar-sparkle-color-cyan); 
}
.navbar-sparkle:nth-of-type(4) { 
    inset-inline-start: var(--token-percent-55); 
    --sparkle-color: var(--token-navbar-sparkle-color-purple); 
}
.navbar-sparkle:nth-of-type(5) { 
    inset-inline-start: var(--token-percent-70); 
    --sparkle-color: var(--token-navbar-sparkle-color-cyan); 
}
.navbar-sparkle:nth-of-type(6) { 
    inset-inline-start: var(--token-percent-85); 
    --sparkle-color: var(--token-navbar-sparkle-color-purple); 
}

/* Activate sparkles on hover */
.navbar-login-btn:hover .navbar-sparkle:nth-of-type(1) { animation: sparkle-fall-left var(--token-duration-2000) var(--token-ease-in-out) infinite var(--token-delay-0); }
.navbar-login-btn:hover .navbar-sparkle:nth-of-type(2) { animation: sparkle-fall-right var(--token-duration-2000) var(--token-ease-in-out) infinite var(--token-delay-300); }
.navbar-login-btn:hover .navbar-sparkle:nth-of-type(3) { animation: sparkle-fall-left var(--token-duration-2000) var(--token-ease-in-out) infinite var(--token-delay-600); }
.navbar-login-btn:hover .navbar-sparkle:nth-of-type(4) { animation: sparkle-fall-right var(--token-duration-2000) var(--token-ease-in-out) infinite var(--token-delay-900); }
.navbar-login-btn:hover .navbar-sparkle:nth-of-type(5) { animation: sparkle-fall-left var(--token-duration-2000) var(--token-ease-in-out) infinite var(--token-delay-1200); }
.navbar-login-btn:hover .navbar-sparkle:nth-of-type(6) { animation: sparkle-fall-right var(--token-duration-2000) var(--token-ease-in-out) infinite var(--token-delay-1500); }

/* Sparkle falls LEFT, rolls off edge */
@keyframes sparkle-fall-left {
    0% { 
        inset-block-start: calc(-1 * var(--token-size-20));
        opacity: 0; 
        transform: rotate(0deg) scale(var(--token-scale-50)); 
    }
    10% { 
        opacity: 1; 
        transform: rotate(0deg) scale(var(--token-scale-100)); 
    }
    30% { 
        inset-block-start: calc(-1 * var(--token-size-3));
        opacity: 1; 
        transform: rotate(180deg) scale(var(--token-scale-100)); 
    }
    60% { 
        inset-block-start: calc(-1 * var(--token-size-3)); 
        inset-inline-start: calc(-1 * var(--token-size-3));
        opacity: 1; 
        transform: rotate(360deg) scale(var(--token-scale-100)); 
    }
    75% { 
        inset-block-start: 50%; 
        inset-inline-start: calc(-1 * var(--token-size-6));
        opacity: var(--token-opacity-70); 
        transform: rotate(450deg) scale(var(--token-scale-90)); 
    }
    90% { 
        inset-block-start: calc(100% + var(--token-size-10));
        inset-inline-start: calc(-1 * var(--token-size-10));
        opacity: var(--token-opacity-30); 
        transform: rotate(600deg) scale(var(--token-scale-60)); 
    }
    100% { 
        inset-block-start: calc(100% + var(--token-size-25));
        inset-inline-start: calc(-1 * var(--token-size-15));
        opacity: 0; 
        transform: rotate(720deg) scale(var(--token-scale-50)); 
    }
}

/* Sparkle falls RIGHT, rolls off edge */
@keyframes sparkle-fall-right {
    0% { 
        inset-block-start: calc(-1 * var(--token-size-20));
        opacity: 0; 
        transform: rotate(0deg) scale(var(--token-scale-50)); 
    }
    10% { 
        opacity: 1; 
        transform: rotate(0deg) scale(var(--token-scale-100)); 
    }
    30% { 
        inset-block-start: calc(-1 * var(--token-size-3));
        opacity: 1; 
        transform: rotate(-180deg) scale(var(--token-scale-100)); 
    }
    60% { 
        inset-block-start: calc(-1 * var(--token-size-3)); 
        inset-inline-start: calc(100% - var(--token-size-3));
        opacity: 1; 
        transform: rotate(-360deg) scale(var(--token-scale-100)); 
    }
    75% { 
        inset-block-start: 50%; 
        inset-inline-start: calc(100% + var(--token-size-3));
        opacity: var(--token-opacity-70); 
        transform: rotate(-450deg) scale(var(--token-scale-90)); 
    }
    90% { 
        inset-block-start: calc(100% + var(--token-size-10));
        inset-inline-start: calc(100% + var(--token-size-8));
        opacity: var(--token-opacity-30); 
        transform: rotate(-600deg) scale(var(--token-scale-60)); 
    }
    100% { 
        inset-block-start: calc(100% + var(--token-size-25));
        inset-inline-start: calc(100% + var(--token-size-12));
        opacity: 0; 
        transform: rotate(-720deg) scale(var(--token-scale-50)); 
    }
}

/* =============================================================================
   USER AVATAR BUTTON
   ============================================================================= */

.navbar-avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Sizing */
    inline-size: var(--token-height-44);
    block-size: var(--token-height-44);
    
    /* Appearance */
    background: transparent;
    border: none;
    border-radius: var(--token-radius-full);
    cursor: pointer;
    
    transition: transform var(--token-duration-600) var(--token-ease-spring);
    will-change: transform;
    
    /* Glow effect */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--token-radius-full);
        box-shadow: var(--token-navbar-glow-inner), var(--token-navbar-glow-outer);
        pointer-events: none;
        z-index: var(--token-z-nav);
    }
    
    &:hover {
        transform: translateY(calc(-1 * var(--token-space-2)));
    }
    
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-color-brand-orange);
        outline-offset: var(--token-outline-offset-sm);
    }
    
    &:hover .navbar-avatar-img,
    &:hover .navbar-avatar-text {
        transform: rotate(var(--token-rotate-360));
    }
}

.navbar-avatar-img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--token-radius-full);
    display: block;
    
    transition: transform var(--token-duration-600) var(--token-ease-spring);
    will-change: transform;
}

.navbar-avatar-text {
    font-family: var(--token-font-heading);
    font-weight: var(--token-weight-700);
    font-size: var(--token-text-14);
    color: var(--token-text-primary);
    
    display: inline-block;
    transition: transform var(--token-duration-600) var(--token-ease-spring);
    will-change: transform;
}

/* =============================================================================
   FAIRY DUST EFFECT (Orbiting Sparkles)
   ============================================================================= */

.navbar-fairy-dust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--token-z-above);
}

.navbar-dust-particle {
    position: absolute;
    inline-size: var(--token-size-10);
    block-size: var(--token-size-10);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    margin-block-start: calc(-1 * var(--token-size-10) / 2);
    margin-inline-start: calc(-1 * var(--token-size-10) / 2);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
    /* Center dot */
    &::before {
        content: '';
        position: absolute;
        inline-size: var(--token-size-3);
        block-size: var(--token-size-3);
        background: radial-gradient(circle, var(--token-navbar-dust-center), var(--token-navbar-dust-center-fade));
        border-radius: var(--token-radius-full);
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 var(--token-size-6) var(--token-navbar-dust-glow);
    }
    
    /* Horizontal spike */
    &::after {
        content: '';
        position: absolute;
        inline-size: var(--token-size-10);
        block-size: var(--token-width-1);
        background: linear-gradient(90deg, 
            transparent 0%, 
            var(--token-navbar-dust-spike-start) 20%, 
            var(--token-navbar-dust-spike-mid) 50%, 
            var(--token-navbar-dust-spike-start) 80%, 
            transparent 100%);
        inset-block-start: 50%;
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 var(--token-size-4) var(--token-navbar-dust-spike-glow);
    }
    
    &:nth-child(1) { animation: fairyOrbit1 var(--token-duration-6000) linear infinite; animation-delay: calc(-1 * var(--token-delay-1100)); opacity: var(--token-opacity-70); }
    &:nth-child(2) { animation: fairyOrbit2 var(--token-duration-8500) linear infinite; animation-delay: calc(-1 * var(--token-delay-400)); opacity: var(--token-opacity-65); }
    &:nth-child(3) { animation: fairyOrbit3 var(--token-duration-6500) linear infinite; animation-delay: calc(-1 * var(--token-delay-2000)); opacity: var(--token-opacity-75); }
    &:nth-child(4) { animation: fairyOrbit4 var(--token-duration-9000) linear infinite; animation-delay: calc(-1 * var(--token-delay-900)); opacity: var(--token-opacity-60); }
    &:nth-child(5) { animation: fairyOrbit5 var(--token-duration-7000) linear infinite; animation-delay: calc(-1 * var(--token-delay-3300)); opacity: var(--token-opacity-70); }
    &:nth-child(6) { animation: fairyOrbit6 var(--token-duration-8000) linear infinite; animation-delay: calc(-1 * var(--token-delay-1700)); opacity: var(--token-opacity-65); }
    &:nth-child(7) { animation: fairyOrbit7 var(--token-duration-5500) linear infinite; animation-delay: calc(-1 * var(--token-delay-200)); opacity: var(--token-opacity-70); }
    &:nth-child(8) { animation: fairyOrbit8 var(--token-duration-9000) linear infinite; animation-delay: calc(-1 * var(--token-delay-2600)); opacity: var(--token-opacity-75); }
}

/* Vertical spike */
.navbar-spike-vertical {
    position: absolute;
    inline-size: var(--token-width-1);
    block-size: var(--token-size-10);
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--token-navbar-dust-spike-start) 20%, 
        var(--token-navbar-dust-spike-mid) 50%, 
        var(--token-navbar-dust-spike-start) 80%, 
        transparent 100%);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 var(--token-size-4) var(--token-navbar-dust-spike-glow);
}

/* Fairy orbit keyframes */
@keyframes fairyOrbit1 {
    0% { transform: rotate(12deg) translateX(var(--token-size-24)) rotate(-12deg); opacity: 0; }
    10% { opacity: var(--token-opacity-70); }
    90% { opacity: var(--token-opacity-70); }
    100% { transform: rotate(372deg) translateX(var(--token-size-24)) rotate(-372deg); opacity: 0; }
}

@keyframes fairyOrbit2 {
    0% { transform: rotate(75deg) translateX(var(--token-size-29)) rotate(-75deg); opacity: 0; }
    10% { opacity: var(--token-opacity-65); }
    90% { opacity: var(--token-opacity-65); }
    100% { transform: rotate(435deg) translateX(var(--token-size-29)) rotate(-435deg); opacity: 0; }
}

@keyframes fairyOrbit3 {
    0% { transform: rotate(138deg) translateX(var(--token-size-22)) rotate(-138deg); opacity: 0; }
    10% { opacity: var(--token-opacity-75); }
    90% { opacity: var(--token-opacity-75); }
    100% { transform: rotate(498deg) translateX(var(--token-size-22)) rotate(-498deg); opacity: 0; }
}

@keyframes fairyOrbit4 {
    0% { transform: rotate(210deg) translateX(var(--token-size-27)) rotate(-210deg); opacity: 0; }
    10% { opacity: var(--token-opacity-60); }
    90% { opacity: var(--token-opacity-60); }
    100% { transform: rotate(570deg) translateX(var(--token-size-27)) rotate(-570deg); opacity: 0; }
}

@keyframes fairyOrbit5 {
    0% { transform: rotate(258deg) translateX(var(--token-size-25)) rotate(-258deg); opacity: 0; }
    10% { opacity: var(--token-opacity-70); }
    90% { opacity: var(--token-opacity-70); }
    100% { transform: rotate(618deg) translateX(var(--token-size-25)) rotate(-618deg); opacity: 0; }
}

@keyframes fairyOrbit6 {
    0% { transform: rotate(312deg) translateX(var(--token-size-30)) rotate(-312deg); opacity: 0; }
    10% { opacity: var(--token-opacity-65); }
    90% { opacity: var(--token-opacity-65); }
    100% { transform: rotate(672deg) translateX(var(--token-size-30)) rotate(-672deg); opacity: 0; }
}

@keyframes fairyOrbit7 {
    0% { transform: rotate(6deg) translateX(var(--token-size-23)) rotate(-6deg); opacity: 0; }
    10% { opacity: var(--token-opacity-70); }
    90% { opacity: var(--token-opacity-70); }
    100% { transform: rotate(366deg) translateX(var(--token-size-23)) rotate(-366deg); opacity: 0; }
}

@keyframes fairyOrbit8 {
    0% { transform: rotate(102deg) translateX(var(--token-size-31)) rotate(-102deg); opacity: 0; }
    10% { opacity: var(--token-opacity-75); }
    90% { opacity: var(--token-opacity-75); }
    100% { transform: rotate(462deg) translateX(var(--token-size-31)) rotate(-462deg); opacity: 0; }
}

/* =============================================================================
   NAVBAR DROPDOWN — Tablet Mode Navigation
   
   Appears when navbar has .is-compact class (width <= 851px).
   Uses navbar-specific styling on top of dropdown utility.
   ============================================================================= */

.navbar-dropdown {
    /* Hidden by default (desktop mode) */
    display: none;
    position: relative;
}

/* Show dropdown wrapper in compact/mobile mode */
.navbar.is-compact .navbar-dropdown,
.navbar.is-mobile .navbar-dropdown {
    display: block;
}

.navbar-dropdown-panel {
    /* Override dropdown utility defaults for navbar */
    --dropdown-gap: var(--token-space-20);
    --dropdown-min-width: var(--token-max-width-240);
    
    background: var(--token-bg-card);
    border: none;
    border-radius: var(--token-radius-20);
    box-shadow: var(--token-shadow-dropdown);
    padding: var(--token-padding-8);
}

/* Items wrapper — positioning context for indicator */
.navbar-dropdown-items {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--token-space-4);
    
    background: var(--token-bg-surface);
    border-radius: var(--token-radius-16);
    box-shadow: var(--token-shadow-inner-default);
    padding: var(--token-padding-8);
}

/* Sliding Bubble Indicator — Vertical version */
.navbar-dropdown-indicator {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--token-space-4);
    inset-inline-end: var(--token-space-4);
    
    /* Initial height (fallback before JS) */
    block-size: 0;
    
    /* Appearance */
    background: var(--token-bg-item-hover);
    border-radius: var(--token-radius-12);
    box-shadow: var(--token-shadow-inner-orange);
    
    /* Animation */
    transition: 
        transform var(--token-duration-280) var(--token-ease-smooth-out),
        block-size var(--token-duration-280) var(--token-ease-smooth-out);
    will-change: transform, block-size;
    
    pointer-events: none;
    z-index: var(--token-z-base);
}

.navbar-dropdown-item {
    position: relative;
    z-index: var(--token-z-above);
    
    display: flex;
    align-items: center;
    gap: var(--token-space-8);
    padding-block: var(--token-padding-8);
    padding-inline: var(--token-padding-16);
    
    /* Typography */
    font-family: var(--token-font-primary);
    font-size: var(--token-text-14);
    font-weight: var(--token-weight-600);
    color: var(--token-text-secondary);
    text-decoration: none;
    white-space: nowrap;
    
    background: transparent;
    border-radius: var(--token-radius-12);
    cursor: pointer;
    user-select: none;
    
    transition: color var(--token-duration-fast) var(--token-ease-smooth);
    
    &:hover {
        color: var(--token-text-primary);
    }
    
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-border-orange);
        outline-offset: var(--token-outline-offset-sm);
        color: var(--token-text-primary);
    }
    
    &.is-active {
        color: var(--token-color-brand-orange);
    }
}

/* Dropdown Divider — gradient fade at edges with orange tint */
.navbar-dropdown-divider {
    block-size: var(--token-border-1);
    inline-size: 100%;
    margin-block: var(--token-margin-4);
    flex-shrink: 0;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--token-color-brand-orange-20) 10%,
        var(--token-color-brand-orange-40) 50%,
        var(--token-color-brand-orange-20) 90%,
        transparent 100%
    );
}

/* =============================================================================
   PROFILE DROPDOWN — User account menu
   
   Self-contained profile dropdown. Uses dropdown utility for open/close logic
   but manages its own layout. No overrides, no hacks.
   ============================================================================= */

.navbar-profile {
    position: relative;
    
    /* Reset dropdown-trigger styles — avatar button has its own styling */
    & .dropdown-trigger {
        background: transparent;
        border: none;
        padding: 0;
    }
}

/* Panel — flex container from the start */
.navbar-profile-panel {
    --dropdown-gap: var(--token-space-20);
    --dropdown-min-width: var(--token-max-width-260);
    
    /* Right-align: panel's right edge aligns with avatar's right edge */
    left: auto;
    right: 0;
    
    background: var(--token-bg-card);
    border: none;
    border-radius: var(--token-radius-20);
    box-shadow: var(--token-shadow-dropdown);
    overflow: hidden;
}

/* Header — avatar + user info */
.navbar-profile-header {
    display: flex;
    align-items: center;
    gap: var(--token-space-12);
    padding: var(--token-padding-16);
}

/* Avatar container with glow */
.navbar-profile-avatar {
    position: relative;
    flex-shrink: 0;
    inline-size: var(--token-height-44);
    block-size: var(--token-height-44);
    border-radius: var(--token-radius-full);
    
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--token-radius-full);
        box-shadow: var(--token-navbar-glow-inner), var(--token-navbar-glow-outer);
        pointer-events: none;
        z-index: var(--token-z-above);
    }
}

.navbar-profile-avatar-img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--token-radius-full);
    object-fit: cover;
}

/* User info text */
.navbar-profile-info {
    flex: 1;
    min-inline-size: 0;
}

.navbar-profile-name {
    font-family: var(--token-font-heading);
    font-size: var(--token-text-16);
    font-weight: var(--token-weight-700);
    color: var(--token-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-profile-email {
    font-size: var(--token-text-12);
    color: var(--token-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-block-start: var(--token-margin-4);
}

/* Divider — full width, visible */
.navbar-profile-divider {
    inline-size: 100%;
    block-size: var(--token-border-1);
    background: var(--token-border-secondary);
    flex-shrink: 0;
}

/* Menu section — contains items with padding */
.navbar-profile-menu {
    display: flex;
    flex-direction: column;
    padding: var(--token-padding-8);
    gap: var(--token-space-4);
}

/* Menu item */
.navbar-profile-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--token-space-12);
    padding: var(--token-padding-12) var(--token-padding-16);
    
    font-size: var(--token-text-14);
    color: var(--token-text-secondary);
    text-decoration: none;
    border-radius: var(--token-radius-12);
    cursor: pointer;
    
    transition: 
        background var(--token-duration-fast) var(--token-ease-smooth),
        color var(--token-duration-fast) var(--token-ease-smooth),
        transform var(--token-duration-fast) var(--token-ease-smooth);
    
    /* Left indicator line */
    &::before {
        content: '';
        position: absolute;
        inset-block-start: var(--token-space-8);
        inset-block-end: var(--token-space-8);
        inset-inline-start: var(--token-space-4);
        inline-size: var(--token-border-3);
        background: var(--token-color-brand-orange);
        border-radius: var(--token-radius-full);
        opacity: 0;
        transform: scaleY(0);
        transition: 
            opacity var(--token-duration-fast) var(--token-ease-smooth),
            transform var(--token-duration-fast) var(--token-ease-bounce);
    }
    
    &:hover {
        background: var(--token-bg-item-hover);
        color: var(--token-text-primary);
        transform: translateX(var(--token-space-4));
        
        &::before {
            opacity: 1;
            transform: scaleY(1);
        }
    }
    
    &:focus-visible {
        outline: var(--token-outline-width) solid var(--token-border-focus);
        outline-offset: calc(-1 * var(--token-outline-offset-sm));
        background: var(--token-bg-item-hover);
        color: var(--token-text-primary);
    }
    
    /* Danger variant (logout) */
    &--danger {
        color: var(--token-color-danger);
        
        &::before {
            background: var(--token-color-danger);
        }
        
        &:hover {
            background: var(--token-bg-danger-hover);
            color: var(--token-color-danger);
        }
    }
}

.navbar-profile-icon {
    font-size: var(--token-text-16);
    inline-size: var(--token-size-20);
    text-align: center;
    flex-shrink: 0;
}

/* =============================================================================
   RESPONSIVE MODES — JS Class Triggered
   
   JavaScript reads CSS tokens and applies classes based on container width:
   - Tokens: --token-breakpoint-850 (compact) 
             --token-breakpoint-500 (mobile)
   
   THREE RESPONSIVE MODES:
   
   1. Desktop (>850px): default state
      [Logo] [---- Pills ----] [User]
      Pills visible, menu toggle hidden
   
   2. Tablet (500-850px): .navbar.is-compact
      [☰] [------ Logo ------] [User]
      Menu toggle visible → opens DROPDOWN
   
   3. Mobile (<500px): .navbar.is-compact.is-mobile
      [☰] [------ Logo ------] [👤]
      Same as tablet — menu toggle opens DROPDOWN (smaller UI adjustments)
   
   NOTE: Breakpoints defined in TokensFixed.css. If you add/remove pills,
   adjust the token values in ONE place.
   ============================================================================= */

/* Tablet Mode (is-compact) — Pills hidden, menu toggle visible, logo centered */
.navbar.is-compact {
    .navbar-section--links {
        display: none;
    }
    
    /* Dropdown wrapper takes order 1 (leftmost) */
    .navbar-dropdown {
        order: 1;
    }
    
    .navbar-menu-toggle {
        display: flex;
    }
    
    .navbar-section--logo {
        order: 2;
        flex: 1 1 auto;
        justify-content: center;
    }
    
    .navbar-section--user {
        order: 3;
    }
}

/* Mobile Mode (is-mobile) — Login text hidden, smaller avatar */
.navbar.is-mobile {
    .navbar-login-text {
        display: none;
    }
    
    .navbar-login-btn {
        padding: var(--token-padding-12);
    }
}

} /* End @layer components */