/* =========================================================
   TOP MASTER NAVBAR
   File: css/navbar.css
   ========================================================= */

:root {
    --nav-bg:
        rgba(
            3,
            7,
            18,
            0.94
        );

    --nav-border:
        rgba(
            153,
            160,
            205,
            0.12
        );

    --nav-purple:
        #b778ff;

    --nav-purple-soft:
        #d5afff;

    --nav-text:
        #ffffff;

    --nav-muted:
        rgba(
            210,
            195,
            238,
            0.42
        );
}


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

.top-navbar {

    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        1000;


    height:
        84px;


    padding:
        0
        clamp(
            22px,
            4vw,
            64px
        );


    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        32px;


    border-bottom:
        1px
        solid
        var(--nav-border);


    background:
        linear-gradient(
            180deg,
            rgba(
                3,
                7,
                18,
                0.98
            )
            0%,

            rgba(
                3,
                7,
                18,
                0.88
            )
            100%
        );


    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


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

.top-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;


    flex-shrink:
        0;


    color:
        #ffffff;

    text-decoration:
        none;
}


.top-brand-main {

    color:
        #c58aff;


    font-family:
        Georgia,
        "Times New Roman",
        serif;


    font-size:
        34px;

    font-style:
        italic;

    font-weight:
        900;


    line-height:
        1;


    letter-spacing:
        -0.07em;


    text-shadow:
        0
        0
        24px
        rgba(
            179,
            108,
            255,
            0.24
        );
}


.top-brand-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.top-brand-cn {

    color:
        rgba(
            255,
            255,
            255,
            0.93
        );


    font-size:
        14px;

    font-weight:
        700;


    letter-spacing:
        0.24em;


    white-space:
        nowrap;
}


.top-brand-en {

    color:
        rgba(
            255,
            255,
            255,
            0.30
        );


    font-size:
        7px;

    font-weight:
        600;


    letter-spacing:
        0.38em;


    white-space:
        nowrap;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.top-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;


    gap:
        12px;
}


/* =========================================================
   NAV ITEM
   ========================================================= */

.top-nav-item {

    position:
        relative;


    min-width:
        132px;

    height:
        58px;


    padding:
        0
        16px;


    display:
        flex;

    align-items:
        center;

    gap:
        13px;


    border:
        1px
        solid
        rgba(
            143,
            151,
            191,
            0.13
        );


    border-radius:
        13px;


    background:
        linear-gradient(
            180deg,
            rgba(
                16,
                23,
                42,
                0.66
            ),
            rgba(
                8,
                14,
                29,
                0.72
            )
        );


    color:
        var(--nav-text);


    text-decoration:
        none;


    transition:
        transform
        180ms
        ease,

        border-color
        180ms
        ease,

        background
        180ms
        ease,

        box-shadow
        180ms
        ease;
}


/* hover */

@media (hover: hover) {
    .top-nav-item:hover {
    
        transform:
            translateY(
                -1px
            );
    
    
        border-color:
            rgba(
                175,
                116,
                255,
                0.40
            );
    
    
        background:
            linear-gradient(
                180deg,
                rgba(
                    34,
                    31,
                    68,
                    0.82
                ),
                rgba(
                    16,
                    20,
                    43,
                    0.82
                )
            );
    
    
        box-shadow:
            0
            8px
            26px
            rgba(
                76,
                43,
                158,
                0.10
            );
    }
}


/* Current page */

.top-nav-item.active {

    border-color:
        rgba(
            167,
            105,
            255,
            0.58
        );


    background:
        radial-gradient(
            circle
            at
            10%
            50%,

            rgba(
                158,
                89,
                255,
                0.18
            ),

            transparent
            40%
        ),

        linear-gradient(
            180deg,
            rgba(
                34,
                28,
                71,
                0.88
            ),

            rgba(
                14,
                18,
                42,
                0.88
            )
        );


    box-shadow:
        inset
        0
        0
        18px
        rgba(
            133,
            74,
            225,
            0.05
        ),

        0
        8px
        28px
        rgba(
            94,
            53,
            192,
            0.09
        );
}


/* purple line under active item */

.top-nav-item.active::after {

    content:
        "";


    position:
        absolute;


    left:
        20%;

    right:
        20%;

    bottom:
        -1px;


    height:
        2px;


    border-radius:
        999px;


    background:
        linear-gradient(
            90deg,
            #8b5cff,
            #d4a8ff
        );


    box-shadow:
        0
        0
        12px
        rgba(
            174,
            108,
            255,
            0.62
        );
}


/* =========================================================
   ICON
   ========================================================= */

.top-nav-icon {

    width:
        27px;


    flex:
        0
        0
        27px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    color:
        #ffffff;


    font-size:
        22px;

    line-height:
        1;
}


/* =========================================================
   NAV COPY
   ========================================================= */

.top-nav-copy {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;


    min-width:
        0;
}


.top-nav-cn {

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );


    font-size:
        13px;

    font-weight:
        760;


    white-space:
        nowrap;
}


.top-nav-en {

    color:
        var(--nav-muted);


    font-size:
        7px;

    font-weight:
        650;


    letter-spacing:
        0.18em;


    white-space:
        nowrap;
}


/* =========================================================
   MOBILE HAMBURGER
   ========================================================= */

.menu-toggle {

    display:
        none;


    width:
        44px;

    height:
        44px;


    padding:
        8px;


    border:
        1px
        solid
        rgba(
            171,
            131,
            235,
            0.18
        );


    border-radius:
        50%;


    background:
        rgba(
            10,
            15,
            31,
            0.62
        );


    cursor:
        pointer;
}


.menu-toggle span {

    display:
        block;


    width:
        19px;

    height:
        2px;


    margin:
        4px
        auto;


    border-radius:
        999px;


    background:
        rgba(
            255,
            255,
            255,
            0.92
        );
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {

    position:
        fixed;


    inset:
        0;


    z-index:
        2000;


    padding:
        22px
        18px
        28px;


    display:
        flex;

    flex-direction:
        column;


    opacity:
        0;

    visibility:
        hidden;


    transform:
        translateY(
            -8px
        );


    background:
        radial-gradient(
            circle
            at
            20%
            0%,

            rgba(
                132,
                73,
                224,
                0.16
            ),

            transparent
            35%
        ),

        linear-gradient(
            180deg,
            rgba(
                4,
                9,
                23,
                0.995
            ),

            rgba(
                3,
                8,
                18,
                0.995
            )
        );


    transition:
        opacity var(--dur-m) var(--ease-out),
        transform var(--dur-m) var(--ease-out),
        visibility 0s linear var(--dur-m);
}




/* Header inside mobile menu */

.mobile-menu-head {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;


    gap:
        18px;
}


.menu-close {

    width:
        44px;

    height:
        44px;


    display:
        grid;

    place-items:
        center;


    border:
        0;


    background:
        transparent;


    color:
        rgba(
            255,
            255,
            255,
            0.92
        );


    font-size:
        34px;

    font-weight:
        200;


    cursor:
        pointer;
}


/* =========================================================
   MOBILE NAV ITEMS
   ========================================================= */

.mobile-menu-list {

    margin-top:
        48px;


    display:
        grid;

    gap:
        12px;
}


.mobile-menu-list > a {

    min-height:
        68px;


    padding:
        0
        17px;


    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;


    border:
        1px
        solid
        rgba(
            143,
            151,
            191,
            0.15
        );


    border-radius:
        15px;


    background:
        linear-gradient(
            180deg,
            rgba(
                15,
                23,
                42,
                0.70
            ),

            rgba(
                7,
                13,
                28,
                0.74
            )
        );


    color:
        #ffffff;


    text-decoration:
        none;
}


.mobile-menu-list a small {

    margin-top:
        4px;


    color:
        rgba(
            204,
            182,
            232,
            0.42
        );


    font-size:
        8px;


    letter-spacing:
        0.18em;
}


/* =========================================================
   MOBILE FOOTER
   ========================================================= */

.mobile-menu-footer {

    margin-top:
        auto;


    padding-top:
        28px;


    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;


    color:
        rgba(
            177,
            127,
            233,
            0.42
        );
}


.social-row {

    display:
        flex;

    gap:
        16px;


    margin-bottom:
        20px;
}


.social-row span {

    width:
        34px;

    height:
        34px;


    display:
        grid;

    place-items:
        center;


    border:
        1px
        solid
        rgba(
            255,
            255,
            255,
            0.14
        );


    border-radius:
        50%;


    color:
        rgba(
            255,
            255,
            255,
            0.74
        );


    font-size:
        11px;
}


.menu-signature {

    font-family:
        Georgia,
        serif;


    font-size:
        12px;

    font-style:
        italic;


    line-height:
        1.55;


    text-align:
        center;
}


/* =========================================================
   DESKTOP SHRINKING
   ========================================================= */

@media (
    max-width:
    1280px
) {

    .top-navbar {

        padding:
            0
            24px;

    }


    .top-nav-item {

        min-width:
            118px;


        padding:
            0
            13px;

    }


    .top-nav {

        gap:
            8px;

    }


    .top-nav-cn {

        font-size:
            12px;

    }


    .top-nav-en {

        font-size:
            6.5px;

    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (
    max-width:
    1050px
) {

    .top-navbar {

        height:
            76px;


        padding:
            0
            18px;

    }


    .top-nav {

        display:
            none;

    }


    .menu-toggle {

        display:
            block;

    }


    .top-brand-main {

        font-size:
            30px;

    }


    .top-brand-cn {

        font-size:
            12px;

        letter-spacing:
            0.18em;

    }


    .top-brand-en {

        font-size:
            6px;

        letter-spacing:
            0.30em;

    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
    max-width:
    480px
) {

    .top-navbar {

        padding:
            0
            13px;

    }


    .top-brand {

        gap:
            9px;

    }


    .top-brand-main {

        font-size:
            27px;

    }


    .top-brand-cn {

        font-size:
            10px;

    }


    .top-brand-en {

        font-size:
            5.5px;

    }


    .mobile-menu {

        padding:
            18px
            14px
            24px;

    }

}

/* Active state in the master mobile menu */
.mobile-menu-list > a.active {
    border-color: rgba(167, 105, 255, 0.56);
    background:
        radial-gradient(circle at 0 50%, rgba(154, 86, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(19, 22, 50, 0.86), rgba(10, 15, 36, 0.86));
}


/* =========================================================
   PHASE 1B: icons, flags, header stability, mobile menu motion
   ========================================================= */

:root { --nav-h: 84px; }

@media (max-width: 1050px) {
    :root { --nav-h: 76px; }
}

html:not([data-channel="beta"]) [data-beta-only] {
    display: none !important;
}

/* The header is fixed, so it never shifts content; keep it on its own
   view-transition layer so it stays put between pages. */
.top-navbar {
    view-transition-name: site-header;
}

/* First visit without cached markup: fade in instead of popping in. */
.top-navbar[data-nav-fade] {
    animation: top-fade-in var(--dur-l) var(--ease-out) both;
}

/* Feature locks (flag-driven): look unchanged, just not clickable.
   Keyed on html[data-locked] so it applies before first paint. */
.top-nav-item.is-feature-locked,
.mobile-menu-list > a.is-feature-locked,
html[data-locked~="merch"] :is(.top-nav-item, .mobile-menu-list > a)[data-feature="merch"],
html[data-locked~="music"] :is(.top-nav-item, .mobile-menu-list > a)[data-feature="music"],
html[data-locked~="materials"] :is(.top-nav-item, .mobile-menu-list > a)[data-feature="materials"],
html[data-locked~="concerts"] :is(.top-nav-item, .mobile-menu-list > a)[data-feature="concerts"] {
    pointer-events: none;
    cursor: default;
}

/* Nav icon glyph slot */
.top-nav-icon .icon {
    width: 1em;
    height: 1em;
}

/* Press micro-interactions */
.top-nav-item,
.top-brand,
.menu-toggle,
.menu-close,
.mobile-menu-list > a {
    transition-property: transform, border-color, background, box-shadow;
    transition-duration: var(--dur-s);
    transition-timing-function: var(--ease-out);
}

.top-nav-item:active,
.top-brand:active,
.menu-toggle:active,
.menu-close:active,
.mobile-menu-list > a:active {
    transform: scale(0.97);
}

/* Hamburger morphs into an X (driven by aria-expanded) */
.menu-toggle span {
    transition:
        transform var(--dur-m) var(--ease-out),
        opacity var(--dur-s) var(--ease-out);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.2);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile menu: enter / exit driven by data-state (TopUI.dialog) */
.mobile-menu[data-state="open"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* Never swallow taps while hidden or fading out (visibility lags behind opacity). */
.mobile-menu:not([data-state="open"]) {
    pointer-events: none;
}

.mobile-menu[data-state="closing"] {
    opacity: 0;
    visibility: visible;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
        opacity var(--dur-s) var(--ease-in),
        transform var(--dur-s) var(--ease-in);
}

.mobile-menu[data-state="open"] .mobile-menu-list > a {
    animation: top-rise-in var(--dur-m) var(--ease-out) backwards;
    animation-delay: calc(60ms + var(--i, 0) * var(--stagger));
}

.mobile-menu[data-state="closing"] .mobile-menu-list > a {
    opacity: 0;
    transition: opacity var(--dur-xs) var(--ease-in);
}

.mobile-menu:focus {
    outline: none;
}


/* =========================================================
   Back button (js/back-link.js): same spot on every page,
   left side under the navbar, scrolls away with the page
   ========================================================= */
.top-back {
    position: absolute;
    top: calc(var(--nav-h) + 16px);
    left: 48px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px 7px 11px;
    border: 1px solid rgba(185, 132, 255, .3);
    border-radius: 999px;
    background: rgba(16, 9, 28, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #e6d6ff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .03em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    /* backwards, not both: a kept end frame would block the :active shrink */
    animation: topBackIn var(--dur-m, 260ms) var(--ease-out, ease) .08s backwards;
    /* same spot on every page: morphs in place during a page change */
    view-transition-name: top-back;
    transition:
        transform var(--dur-s, 180ms) var(--ease-out, ease),
        background-color var(--dur-s, 180ms) var(--ease-out, ease),
        border-color var(--dur-s, 180ms) var(--ease-out, ease);
}

.top-back .icon {
    font-size: 15px;
    transition: transform var(--dur-s, 180ms) var(--ease-out, ease);
}

@media (hover: hover) {
    .top-back:hover {
        background: rgba(185, 132, 255, .2);
        border-color: rgba(216, 180, 255, .55);
    }

    .top-back:hover .icon {
        transform: translateX(-3px);
    }
}

.top-back:active {
    transform: scale(.96);
}

.top-back:focus-visible {
    outline: 2px solid #d8b4ff;
    outline-offset: 2px;
}

@keyframes topBackIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 1050px) {
    .top-back {
        top: calc(var(--nav-h) + 12px);
        left: 20px;
    }
}

@media (max-width: 620px) {
    .top-back {
        left: 14px;
        padding: 6px 13px 6px 10px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .top-back { animation: none; }
}

@media print {
    .top-back { display: none; }
}

/* room for the back button above each page's first line; pages are at least
   one screen tall, so take the same amount off that minimum (no extra scroll) */
body.has-top-back {
    --top-back-room: 20px;
}

@media (max-width: 1050px) {
    body.has-top-back {
        --top-back-room: 24px;
    }
}

@media (max-width: 620px) {
    body.has-top-back {
        --top-back-room: 40px;
    }
}

body.has-top-back > main:not(.travel-page) {
    margin-top: var(--top-back-room);
    min-height: calc(100vh - var(--top-back-room));
}

/* the travel map is full screen: only its title block moves down */
body.has-top-back .travel-page .hero-copy {
    margin-top: 16px;
}

/* phones: the map timeline sits right under the title block, so make room by
   dropping the small English line instead of pushing the block down */
@media (max-width: 620px) {
    body.has-top-back .travel-page .hero-en {
        display: none;
    }
}


/* =========================================================
   ACCOUNT ENTRY (components/navbar.html, js/navbar.js)
   Desktop: a round icon button so six items still fit;
   the mobile menu shows the name in full.
   ========================================================= */

.top-nav-item.top-nav-account {
    min-width: 0;
    width: 58px;
    padding: 0;
    justify-content: center;
}

.top-nav-account .top-nav-copy {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.top-nav-account.is-signed-in .top-nav-icon {
    color: var(--nav-purple-soft);
    filter: drop-shadow(0 0 8px rgba(197, 138, 255, 0.55));
}