/* © 2026 iPrime | CssUiCoreNavBar.css */

@layer components {

/* === NAVBAR === */

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

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

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

/* === NAVBAR SECTIONS === */

.NavBar-Section {
    display: flex;
    align-items: center;
    gap: var(--prime-space-8);
    
    /* Appearance */
    background: var(--prime-navbar-inner-background);
    padding: var(--prime-padding-8);
    border-radius: var(--prime-border-radius-16);
    box-shadow: var(--prime-navbar-inner-shadow);
}

/* 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(--prime-width-112);
    block-size: var(--prime-height-8);
    background: radial-gradient(ellipse, var(--prime-navbar-glow-background) 0%, transparent 70%);
    border-radius: var(--prime-border-radius-full);
    filter: blur(var(--prime-blur-2));
    
    /* Initial state matches JS average — prevents flash on load */
    opacity: var(--prime-opacity-60);
    
    /* JS controls transform and opacity */
    will-change: transform, opacity;
    z-index: var(--prime-z-index-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(--prime-outline-width-2) solid var(--prime-navbar-logo-outline-focus);
        outline-offset: var(--prime-outline-offset-4);
        border-radius: var(--prime-border-radius-full);
    }
}

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

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

.NavBar-Pills {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--prime-space-fluid-4-8);
}

/* === MENU TOGGLE === */

.NavBar-MenuToggle {
    display: none;
    align-items: center;
    justify-content: center;
    
    /* Touch target (44px minimum) */
    inline-size: var(--prime-height-44);
    block-size: var(--prime-height-44);
    
    /* Clean appearance */
    background: transparent;
    border: none;
    border-radius: var(--prime-border-radius-12);
    padding: 0;
    cursor: pointer;
    
    /* Focus outline */
    &:focus-visible {
        outline: var(--prime-outline-width-2) solid var(--prime-navbar-menutoggle-outline-focus);
        outline-offset: var(--prime-outline-offset-2);
    }
}

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

/* Menu Lines — The 3 bars */
.NavBar-MenuLine {
    display: block;
    inline-size: 100%;
    block-size: var(--prime-border-width-2);
    background: var(--prime-navbar-hamburgerline-background);
    border-radius: var(--prime-border-radius-full);
    transition: 
        transform var(--prime-duration-200) var(--prime-ease-bounce),
        opacity var(--prime-duration-150) var(--prime-ease-smooth),
        background var(--prime-duration-150) var(--prime-ease-smooth);
    
    /* Middle line shorter */
    &:nth-child(2) {
        inline-size: 75%;
    }
}

/* Hover: Orange lines (mouse/trackpad only) */
@media (hover: hover) {
    .NavBar-MenuToggle:hover .NavBar-MenuLine {
        background: var(--prime-navbar-hamburgerline-background-open);
    }
}

/* Open State: X Transform */
[data-dropdown-id].is-Open .NavBar-MenuLine {
    background: var(--prime-navbar-hamburgerline-background-open);
    
    &:nth-child(1) {
        transform: translateY(calc(var(--prime-space-6) + var(--prime-border-width-2))) rotate(45deg);
    }
    
    &:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    
    &:nth-child(3) {
        transform: translateY(calc(-1 * (var(--prime-space-6) + var(--prime-border-width-2)))) rotate(-45deg);
    }
}

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

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

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

/* === LOGIN BUTTON === */

.NavBar-LoginButton {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--prime-space-12);
    
    /* Sizing */
    padding: var(--prime-padding-12) var(--prime-padding-24);
    
    /* Typography */
    font-family: var(--prime-font-primary);
    font-weight: var(--prime-font-weight-600);
    font-size: var(--prime-font-size-14);
    color: var(--prime-navbar-loginbutton-text);
    text-decoration: none;
    
    /* Appearance */
    background: var(--prime-navbar-loginbutton-background);
    border-radius: var(--prime-border-radius-12);
    overflow: visible;
    
    transition: 
        background var(--prime-duration-200) var(--prime-ease-smooth),
        transform var(--prime-duration-150) var(--prime-ease-smooth);
    
    &:hover {
        background: var(--prime-navbar-loginbutton-background-hover);
        transform: scale(var(--prime-scale-105));
    }
    
    &:active {
        transform: scale(var(--prime-scale-102));
    }
    
    &:focus-visible {
        outline: var(--prime-outline-width-2) solid var(--prime-navbar-loginbutton-outline-focus);
        outline-offset: var(--prime-outline-offset-2);
    }
}

.NavBar-LoginContent {
    position: relative;
    z-index: var(--prime-z-index-above);
    display: flex;
    align-items: center;
    gap: var(--prime-space-12);
}

.NavBar-LoginIcon {
    inline-size: var(--prime-icon-24);
    block-size: var(--prime-icon-24);
    flex-shrink: 0;
    fill: currentColor;
}

.NavBar-LoginText {
    white-space: nowrap;
}

/* Lightning Bolts */
.NavBar-LightningBolt {
    position: absolute;
    inline-size: var(--prime-width-2);
    block-size: 100%;
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--prime-navbar-lightning-color) 50%, 
        transparent 100%);
    inset-block-start: 0;
    opacity: 0;
    pointer-events: none;
    
    &:nth-child(1) { inset-inline-start: var(--prime-percent-15); animation: lightning1 var(--prime-duration-3000) var(--prime-ease-in-out) infinite; }
    &:nth-child(2) { inset-inline-start: var(--prime-percent-35); animation: lightning2 var(--prime-duration-2500) var(--prime-ease-in-out) infinite; animation-delay: var(--prime-delay-2000); }
    &:nth-child(3) { inset-inline-start: var(--prime-percent-60); animation: lightning3 var(--prime-duration-3500) var(--prime-ease-in-out) infinite; animation-delay: var(--prime-delay-1200); }
    &:nth-child(4) { inset-inline-start: var(--prime-percent-80); animation: lightning4 var(--prime-duration-3500) var(--prime-ease-in-out) infinite; animation-delay: var(--prime-delay-800); }
    &:nth-child(5) { inset-inline-start: var(--prime-percent-25); animation: lightning5 var(--prime-duration-3000) var(--prime-ease-in-out) infinite; animation-delay: var(--prime-delay-1500); }
    &:nth-child(6) { inset-inline-start: var(--prime-percent-70); animation: lightning6 var(--prime-duration-3000) var(--prime-ease-in-out) infinite; animation-delay: var(--prime-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(--prime-space-5))); }
    93% { opacity: 0; }
    94% { opacity: 1; transform: translateY(0) translateX(calc(-1 * var(--prime-space-5))); }
    95% { opacity: 0; }
    96%, 97% { opacity: 1; transform: translateY(0) translateX(var(--prime-space-5)); }
}

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

/* === FALLING SPARKLES EFFECT === */

.NavBar-Sparkle {
    position: absolute;
    inline-size: var(--prime-size-6);
    block-size: var(--prime-size-6);
    inset-block-start: calc(-1 * var(--prime-size-20));
    opacity: 0;
    pointer-events: none;
    z-index: var(--prime-z-index-above);
    
    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--prime-sparkle-color, var(--prime-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(--prime-percent-10); 
    --prime-sparkle-color: var(--prime-navbar-sparkle-color-cyan); 
}
.NavBar-Sparkle:nth-of-type(2) { 
    inset-inline-start: var(--prime-percent-25); 
    --prime-sparkle-color: var(--prime-navbar-sparkle-color-purple); 
}
.NavBar-Sparkle:nth-of-type(3) { 
    inset-inline-start: var(--prime-percent-40); 
    --prime-sparkle-color: var(--prime-navbar-sparkle-color-cyan); 
}
.NavBar-Sparkle:nth-of-type(4) { 
    inset-inline-start: var(--prime-percent-55); 
    --prime-sparkle-color: var(--prime-navbar-sparkle-color-purple); 
}
.NavBar-Sparkle:nth-of-type(5) { 
    inset-inline-start: var(--prime-percent-70); 
    --prime-sparkle-color: var(--prime-navbar-sparkle-color-cyan); 
}
.NavBar-Sparkle:nth-of-type(6) { 
    inset-inline-start: var(--prime-percent-85); 
    --prime-sparkle-color: var(--prime-navbar-sparkle-color-purple); 
}

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

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

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

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

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

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

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

/* === FAIRY DUST EFFECT === */

.NavBar-FairyDust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--prime-z-index-above);
}

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

/* Vertical spike */
.NavBar-SpikeVertical {
    position: absolute;
    inline-size: var(--prime-width-1);
    block-size: var(--prime-size-10);
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--prime-navbar-avatarshine-color-30) 20%, 
        var(--prime-navbar-avatarshine-color-60) 50%, 
        var(--prime-navbar-avatarshine-color-30) 80%, 
        transparent 100%);
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 var(--prime-size-4) var(--prime-navbar-avatarshine-color-40);
}

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

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

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

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

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

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

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

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

/* === NAVBAR DROPDOWN === */

.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-DropDownPanel {
    /* Override dropdown utility defaults for navbar */
    --prime-dropdown-gap: var(--prime-space-20);
    --prime-dropdown-min-width: var(--prime-max-width-240);
    
    background: var(--prime-navbar-mobilemenu-background);
    border: none;
    border-radius: var(--prime-border-radius-20);
    box-shadow: var(--prime-navbar-mobilemenu-shadow);
    padding: var(--prime-padding-8);
}

/* Items wrapper — positioning context for indicator */
.NavBar-DropDownItems {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--prime-space-4);
    
    background: var(--prime-navbar-mobileinner-background);
    border-radius: var(--prime-border-radius-16);
    box-shadow: var(--prime-navbar-mobileinner-shadow);
    padding: var(--prime-padding-8);
}

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

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

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

/* === PROFILE DROPDOWN === */

.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-ProfilePanel {
    --prime-dropdown-gap: var(--prime-space-20);
    --prime-dropdown-min-width: var(--prime-max-width-260);
    
    /* Right-align: panel's right edge aligns with avatar's right edge */
    left: auto;
    right: 0;
    
    background: var(--prime-navbar-dropdown-background);
    border: none;
    border-radius: var(--prime-border-radius-20);
    box-shadow: var(--prime-navbar-dropdown-shadow);
    overflow: hidden;
}

/* Header — avatar + user info (supports optional banner background) */
.NavBar-ProfileHeader {
    display: flex;
    align-items: center;
    gap: var(--prime-space-12);
    padding: var(--prime-padding-16);
    
    /* Banner background (URL set via inline style when present) */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-radius: var(--prime-border-radius-12);
}

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

.NavBar-ProfileAvatarImage {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--prime-border-radius-full);
    object-fit: cover;
}

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

.NavBar-ProfileName {
    font-family: var(--prime-font-heading);
    font-size: var(--prime-font-size-16);
    font-weight: var(--prime-font-weight-700);
    color: var(--prime-navbar-mobileusername-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
    text-shadow: 0px 0px 5px var(--prime-dropdown-header-text-shadow);
}

.NavBar-ProfileEmail {
    font-size: var(--prime-font-size-12);
    color: var(--prime-navbar-mobileusername-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-block-start: var(--prime-margin-4);
}

/* Divider — full width, visible */
.NavBar-ProfileDivider {
    inline-size: 100%;
    block-size: var(--prime-border-width-1);
    background: var(--prime-navbar-mobiledivider-background);
    flex-shrink: 0;
}

/* Menu section — contains items with padding */
.NavBar-ProfileMenu {
    display: flex;
    flex-direction: column;
    padding: var(--prime-padding-8);
    gap: var(--prime-space-4);
}

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

.NavBar-ProfileIcon {
    font-size: var(--prime-font-size-16);
    inline-size: var(--prime-size-20);
    text-align: center;
    flex-shrink: 0;
}

/* === RESPONSIVE MODES === */

/* 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-MenuToggle {
        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-LoginText {
        display: none;
    }
    
    .NavBar-LoginButton {
        padding: var(--prime-padding-12);
    }
}

} /* End @layer components */