/* ================================================================
   导航站 · 前台样式
   结构：顶部横幅 → 滚动公告 → 逐条导航卡片
   类名与 index.php 一一对应，改版式只动这里即可
   ================================================================ */

/* ------------------------------------------------------------ 变量 */

:root{
    /* 底色 */
    --bg:#050a16;
    --bg-deep:#020610;
    --page:#08111f;

    /* 卡片 */
    --card:#111b2e;
    --card-2:#16223a;
    --line:rgba(255,255,255,.07);
    --line-strong:rgba(255,255,255,.14);

    /* 品牌色（薄荷绿） */
    --mint:#5fd6c0;
    --mint-2:#39b89f;
    --mint-soft:rgba(95,214,192,.14);

    /* 文字 */
    --tx:#eef3fb;
    --tx-2:#a7b6cc;
    --tx-3:#6b7d96;

    /* 强调 */
    --gold:#ffd97a;
    --amber:#ffc861;

    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

html,
body{
    min-height:100%;
}

body{
    /* 深色底 + 两团柔光，避免纯色死板 */
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(95,214,192,.13), transparent 62%),
        radial-gradient(820px 540px at 92% 6%, rgba(108,124,255,.13), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    background-attachment:fixed;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei",
        Arial,
        sans-serif;

    color:var(--tx);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    border:0;
}

/* 选中文字用品牌色 */
::selection{
    background:rgba(95,214,192,.28);
    color:#fff;
}

/* 细滚动条 */
::-webkit-scrollbar{
    width:9px;
    height:9px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.13);
    border-radius:99px;
}

::-webkit-scrollbar-thumb:hover{
    background:rgba(95,214,192,.4);
}

.page{
    position:relative;

    width:100%;
    max-width:750px;
    min-height:100vh;

    margin:0 auto;

    background:var(--page);

    /* 桌面宽屏时，两侧留一条淡淡的分界线，看起来像一块“板子” */
    box-shadow:
        0 0 0 1px rgba(255,255,255,.045),
        0 30px 80px rgba(0,0,0,.45);
}

/* ================================================================
   顶部横幅
   ================================================================ */

.banner{
    position:relative;

    width:100%;
    overflow:hidden;

    background:#0b1425;

    border-radius:0 0 var(--radius) var(--radius);
}

/* 底部渐隐，让横幅和下方内容自然衔接 */
.banner::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42%;

    background:linear-gradient(180deg, transparent, rgba(8,17,31,.85));

    pointer-events:none;
    z-index:2;
}

.banner a{
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}

.banner img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .7s cubic-bezier(.2,.7,.2,1);
}

.banner:hover img{
    transform:scale(1.035);
}

.banner.contain img{
    object-fit:contain;
}

.banner-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    height:100%;
    min-height:180px;

    background:
        linear-gradient(135deg, #101b30, #1b2740);

    color:var(--tx-3);
    font-size:15px;
    letter-spacing:.04em;
}

/* ================================================================
   公告 / 跑马灯
   ================================================================ */

.notice{
    position:relative;

    margin:16px 17px 20px;
    padding:11px 0;

    overflow:hidden;

    border-radius:999px;

    background:rgba(255,255,255,.045);
    box-shadow:inset 0 0 0 1px var(--line);
}

.notice-scroll{
    width:100%;
    overflow:hidden;
    white-space:nowrap;

    /* 左右淡出，比硬边缘更精致 */
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.notice-track{
    display:flex;
    width:max-content;
    will-change:transform;
    animation:noticeMarquee 18s linear infinite;
}

.notice:hover .notice-track{
    animation-play-state:paused;
}

.notice-item{
    flex-shrink:0;

    padding-right:80px;

    color:var(--tx-2);
    font-size:15px;
    line-height:1.6;
    letter-spacing:.02em;

    white-space:nowrap;
}

@keyframes noticeMarquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

/* ================================================================
   导航列表
   ================================================================ */

.nav-list{
    padding:0 17px 26px;
}

.nav-card{
    position:relative;

    display:flex;
    align-items:center;
    gap:18px;

    min-height:170px;
    margin-bottom:14px;
    padding:22px;

    overflow:hidden;

    border-radius:var(--radius);

    background:
        linear-gradient(180deg, var(--card-2), var(--card));

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        inset 0 0 0 1px var(--line),
        var(--shadow);

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        box-shadow .28s ease,
        background .28s ease;

    /* 入场：淡入上浮 */
    animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both;
}

/* 入场依次延迟，像瀑布一样下来 */
.nav-card:nth-child(1){ animation-delay:.02s; }
.nav-card:nth-child(2){ animation-delay:.07s; }
.nav-card:nth-child(3){ animation-delay:.12s; }
.nav-card:nth-child(4){ animation-delay:.17s; }
.nav-card:nth-child(5){ animation-delay:.22s; }
.nav-card:nth-child(6){ animation-delay:.27s; }
.nav-card:nth-child(7){ animation-delay:.32s; }
.nav-card:nth-child(8){ animation-delay:.37s; }
.nav-card:nth-child(n+9){ animation-delay:.4s; }

@keyframes cardIn{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* 左侧薄荷竖条：改成渐亮 + 发光 */
.nav-card::before{
    content:"";

    position:absolute;
    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:
        linear-gradient(180deg, var(--mint), var(--mint-2));

    box-shadow:
        0 0 12px rgba(95,214,192,.55);

    transition:width .28s ease, box-shadow .28s ease;
}

/* 右上角一点光晕，鼠标悬停时变亮 */
.nav-card::after{
    content:"";

    position:absolute;
    top:-60px;
    right:-40px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(circle, rgba(95,214,192,.16), transparent 68%);

    opacity:0;

    transition:opacity .35s ease;

    pointer-events:none;
}

.nav-card:hover{
    transform:translateY(-3px);

    background:
        linear-gradient(180deg, #1a2842, #131e33);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 0 0 1px var(--line-strong),
        0 16px 40px rgba(0,0,0,.45),
        0 0 0 1px rgba(95,214,192,.1);
}

.nav-card:hover::before{
    width:6px;
    box-shadow:0 0 18px rgba(95,214,192,.8);
}

.nav-card:hover::after{
    opacity:1;
}

/* -------------------------------------------------- 左侧图片 */

.nav-image{
    flex:0 0 132px;

    width:132px;
    height:132px;

    overflow:hidden;

    border-radius:22px;

    background:linear-gradient(135deg, #24304a, #333f5c);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        0 6px 16px rgba(0,0,0,.3);

    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}

.nav-card:hover .nav-image{
    transform:scale(1.03) rotate(-1deg);
    box-shadow:
        inset 0 0 0 1px rgba(95,214,192,.3),
        0 10px 24px rgba(0,0,0,.4);
}

.nav-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .5s cubic-bezier(.2,.7,.2,1);
}

.nav-card:hover .nav-image img{
    transform:scale(1.06);
}

.nav-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    background:
        linear-gradient(135deg, #2b3852, #4a5878);

    color:#fff;
    font-size:46px;
    font-weight:600;

    text-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* -------------------------------------------------- 文字区 */

.nav-info{
    flex:1;
    min-width:0;
}

.nav-title{
    margin-bottom:8px;

    color:var(--tx);

    font-size:23px;
    font-weight:650;
    line-height:1.32;
    letter-spacing:.01em;

    /* 太长就省略，不撑破卡片 */
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.nav-rating{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0 6px;

    margin-bottom:6px;

    color:var(--tx-2);
    font-size:14px;
    line-height:1.6;
}

.stars{
    color:var(--gold);

    letter-spacing:1.5px;
    font-size:14px;

    text-shadow:0 0 10px rgba(255,217,122,.35);
}

.score{
    margin-left:2px;
    padding:1px 8px;

    border-radius:6px;

    background:rgba(255,217,122,.13);
    color:var(--amber);

    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
}

.review-count{
    margin-bottom:5px;

    color:var(--tx-2);
    font-size:13.5px;
    letter-spacing:.01em;
}

.review-count::before{
    content:"♡";
    margin-right:4px;

    color:var(--mint);
    opacity:.85;
}

.nav-description{
    color:var(--tx-3);

    font-size:13px;
    line-height:1.62;

    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

/* -------------------------------------------------- 进入按钮 */

.go-button{
    position:relative;

    flex:0 0 116px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    width:116px;
    height:48px;

    overflow:hidden;

    border-radius:12px;

    background:
        linear-gradient(135deg, var(--mint), var(--mint-2));

    color:#052a25;

    font-size:15.5px;
    font-weight:700;
    letter-spacing:.02em;

    box-shadow:
        0 6px 18px rgba(95,214,192,.28),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition:
        box-shadow .22s ease,
        filter .22s ease;

    /* 呼吸跳动：轻微缩放，让按钮自己“活”起来 */
    animation:goBreath 2.4s ease-in-out infinite;
    transform-origin:center;
}

@keyframes goBreath{
    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }
}

/* 按钮右箭头 */
.go-button::after{
    content:"›";

    margin-left:1px;

    font-size:19px;
    font-weight:400;
    line-height:1;
    opacity:.75;

    transition:transform .22s ease;
}

/* 掠光 */
.go-button::before{
    content:"";

    position:absolute;
    top:0;
    left:-140%;

    width:70%;
    height:100%;

    background:
        linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);

    transform:skewX(-18deg);

    transition:left .55s ease;

    pointer-events:none;
}

.go-button:hover{
    filter:brightness(1.12) saturate(1.06);

    box-shadow:
        0 10px 30px rgba(95,214,192,.5),
        inset 0 1px 0 rgba(255,255,255,.45);
}

.go-button:hover::after{
    transform:translateX(3px);
}

.go-button:hover::before{
    left:130%;
}

.go-button:active{
    animation:none;

    transform:scale(.97);
}

/* 键盘可达性 */
a:focus-visible,
.go-button:focus-visible{
    outline:2px solid var(--mint);
    outline-offset:3px;
    border-radius:12px;
}

/* -------------------------------------------------- 空状态 / 页脚 */

.empty{
    margin:20px 0;
    padding:64px 22px;

    border-radius:var(--radius);

    background:rgba(255,255,255,.03);
    box-shadow:inset 0 0 0 1px var(--line);

    text-align:center;

    color:var(--tx-3);
    font-size:14px;
    letter-spacing:.04em;
}

.site-foot{
    padding:6px 20px 40px;

    text-align:center;

    color:#475569;

    font-size:12px;
    line-height:1.9;
    letter-spacing:.02em;
}

/* ================================================================
   手机
   ================================================================ */

@media (max-width:600px){

    body{
        background:#050a16;
        background-attachment:scroll;
    }

    .page{
        box-shadow:none;
    }

    .banner{
        border-radius:0 0 14px 14px;
    }

    .notice{
        margin:12px 12px 14px;
        padding:9px 0;
    }

    .notice-item{
        padding-right:56px;
        font-size:13px;
    }

    .nav-list{
        padding:0 12px 20px;
    }

    .nav-card{
        min-height:0;

        gap:13px;
        margin-bottom:11px;
        padding:14px;

        border-radius:15px;
    }

    .nav-card:hover{
        transform:none;
    }

    .nav-image{
        flex:0 0 82px;

        width:82px;
        height:92px;

        border-radius:15px;
    }

    .nav-card:hover .nav-image{
        transform:none;
    }

    .nav-placeholder{
        font-size:30px;
    }

    .nav-title{
        margin-bottom:5px;

        font-size:17px;
        line-height:1.3;
        -webkit-line-clamp:2;
    }

    .nav-rating{
        margin-bottom:4px;
        font-size:11.5px;
        gap:0 4px;
    }

    .stars{
        font-size:11.5px;
        letter-spacing:1px;
    }

    .score{
        padding:0 5px;
        font-size:11.5px;
    }

    .review-count{
        margin-bottom:3px;
        font-size:11.5px;
    }

    .nav-description{
        font-size:11.5px;
        line-height:1.55;
        -webkit-line-clamp:2;
    }

    .go-button{
        flex:0 0 74px;

        width:74px;
        height:38px;

        border-radius:10px;

        font-size:13px;
    }

    .go-button::after{
        font-size:15px;
    }

    .empty{
        padding:48px 18px;
        font-size:13px;
    }

    .site-foot{
        padding:4px 16px 30px;
        font-size:11px;
    }
}

/* 超小屏 */
@media (max-width:380px){

    .nav-card{
        gap:10px;
        padding:11px;
    }

    .nav-image{
        flex:0 0 68px;

        width:68px;
        height:80px;

        border-radius:13px;
    }

    .nav-placeholder{
        font-size:25px;
    }

    .nav-title{
        font-size:15.5px;
    }

    .nav-rating,
    .review-count,
    .nav-description,
    .stars,
    .score{
        font-size:11px;
    }

    .go-button{
        flex:0 0 62px;

        width:62px;
        height:34px;

        font-size:12px;
    }
}

/* ================================================================
   降低动效（系统开了“减少动态效果”就不动）
   ================================================================ */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }

    .notice-track{
        animation:none;
    }

    .banner:hover img,
    .nav-card:hover .nav-image img{
        transform:none;
    }
}