/* ================================================
   个人作品集 v4
   性能优先 · 简洁丝滑 · 无卡顿
   ================================================ */

/* ---- 变量 ---- */
:root {
    --bg:    #080808;
    --bg2:   #0f0f0f;
    --bg3:   #161616;
    --txt:   #f0f0f0;
    --txt2:  #888888;
    --txt3:  #444444;
    --bd:    rgba(255,255,255,0.07);
    --bd2:   rgba(255,255,255,0.18);
    --e:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ef:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 重置 ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family: 'Noto Sans SC', sans-serif;
    background: var(--bg);
    color: var(--txt);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, video { display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

/* ---- 通用 ---- */
.wrap { max-width:1280px; margin:0 auto; padding:0 48px; }

/* ================================================
   导航栏
   ================================================ */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:900;
    background: transparent;
    transition: background .35s var(--e);
}
/* 滚动后变深色 */
.nav.s { background: rgba(8,8,8,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

.nav-inner {
    max-width:1280px; margin:0 auto;
    padding:0 48px; height:64px;
    display:flex; align-items:center; justify-content:space-between;
}

.logo {
    font-size:1.3rem; font-weight:700;
    letter-spacing:-.025em; color:var(--txt);
}

.nav-links { display:flex; gap:36px; }
.nav-links a {
    font-size:.875rem; font-weight:500;
    color:rgba(255,255,255,.5);
    transition:color .25s;
}
.nav-links a:hover { color:#fff; }

/* 汉堡菜单 */
.menu-btn {
    display:none; flex-direction:column; gap:5px;
    width:26px; background:none; border:none; padding:0;
}
.menu-btn span {
    display:block; width:100%; height:1.5px;
    background:#fff; border-radius:1px;
    transition:all .3s;
}
.menu-btn.on span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.menu-btn.on span:nth-child(2) { opacity:0; }
.menu-btn.on span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* 手机菜单 */
.mob-menu {
    position:fixed; inset:0; z-index:850;
    background:rgba(8,8,8,.98);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:32px;
    opacity:0; visibility:hidden;
    transition:all .3s var(--e);
}
.mob-menu.on { opacity:1; visibility:visible; }
.mob-menu a {
    font-size:2.2rem; font-weight:700;
    color:#fff; letter-spacing:-.02em;
}

/* ================================================
   Hero — 全屏视频背景
   ================================================ */
.hero {
    position:relative;
    height:100vh; min-height:600px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}

.hero-bg {
    position:absolute; inset:0; z-index:0;
}
/* 视频铺满全屏，无黑边 */
.hero-video {
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
}
/* 渐变遮罩：顶部淡、底部深，保护文字 */
.hero-mask {
    position:absolute; inset:0;
    background:
        linear-gradient(to bottom, rgba(8,8,8,.3) 0%, transparent 25%, transparent 45%, rgba(8,8,8,.7) 100%);
}

/* 文字内容 */
.hero-text {
    position:relative; z-index:2;
    text-align:center; padding:0 24px;
}
.hero-sub {
    font-size:.8rem; letter-spacing:.45em; text-transform:uppercase;
    color:rgba(255,255,255,.45); margin-bottom:24px;
}
.hero-title {
    font-size:clamp(2.8rem,10vw,8.5rem);
    font-weight:700; line-height:1.04; letter-spacing:-.04em;
    margin-bottom:22px;
}
.hero-title span { display:block; }
.hero-desc {
    font-size:1.1rem; color:rgba(255,255,255,.5);
    font-weight:300; margin-bottom:44px;
}
.hero-btns { display:flex; gap:14px; justify-content:center; }

/* 按钮 */
.btn {
    display:inline-flex; align-items:center;
    padding:13px 34px;
    font-size:.875rem; font-weight:500;
    border-radius:100px;
    transition:transform .3s var(--ef), box-shadow .3s;
}
.btn-pri { background:#fff; color:#080808; }
.btn-pri:hover { transform:translateY(-2px); box-shadow:0 14px 40px rgba(255,255,255,.14); }
.btn-out {
    background:rgba(255,255,255,.07); color:#fff;
    border:1px solid rgba(255,255,255,.2);
}
.btn-out:hover { background:rgba(255,255,255,.13); transform:translateY(-2px); }

/* 向下滚动提示 */
.scroll-hint {
    position:absolute; bottom:44px; left:50%;
    transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-arrow {
    width:24px; height:24px;
    color:rgba(255,255,255,.35);
    animation: arrowBounce 2s ease-in-out infinite;
}
.scroll-arrow svg { width:100%; height:100%; }
.scroll-hint span {
    font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.3);
}
@keyframes arrowBounce {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(7px); }
}

/* ================================================
   通用区块标题
   ================================================ */
.sec-head { margin-bottom:64px; }
.sec-num {
    display:block; font-size:.75rem;
    color:var(--txt3); letter-spacing:.18em; margin-bottom:10px;
}
.sec-title {
    font-size:clamp(1.9rem,4vw,3.4rem);
    font-weight:700; letter-spacing:-.025em; line-height:1.15;
}

/* ================================================
   关于我
   ================================================ */
.about { padding:140px 0; border-top:1px solid var(--bd); }

.about-grid {
    display:grid; grid-template-columns:1fr 1.6fr; gap:100px;
    align-items:center;
}

.about-pic { }
.pic-box {
    position:relative; padding-top:120%;
    overflow:hidden; border-radius:10px;
    background:var(--bg2);
}
.pic-img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover;
    transition:transform .5s var(--ef);
}
.pic-box:hover .pic-img { transform:scale(1.03); }

.pic-tag {
    display:flex; align-items:center; gap:8px;
    margin-top:16px; color:var(--txt2); font-size:.82rem;
}

.about-info { }
.about-info.fade-up {
    animation: fadeUp .8s var(--ef) forwards;
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}

.about-intro {
    font-size:1.85rem; font-weight:300; margin-bottom:18px;
    line-height:1.45;
}
.name { font-weight:600; }
.about-body {
    font-size:1.05rem; color:var(--txt2);
    line-height:1.85; font-weight:300;
    margin-bottom:44px;
}

.stat-row { display:flex; gap:48px; margin-bottom:44px; padding-bottom:44px; border-bottom:1px solid var(--bd); }
.stat-b { display:flex; flex-direction:column; }
.stat-n { font-size:3.2rem; font-weight:700; letter-spacing:-.03em; line-height:1; }
.stat-n::after { content:'+'; font-size:1.8rem; font-weight:300; }
.stat-l { font-size:.82rem; color:var(--txt2); margin-top:6px; }

.tag-row { display:flex; flex-wrap:wrap; gap:10px; }
.tag {
    padding:9px 20px;
    background:var(--bg2);
    border:1px solid var(--bd);
    border-radius:100px;
    font-size:.875rem; color:var(--txt2);
    transition:all .25s;
}
.tag:hover { background:#fff; color:#080808; border-color:#fff; }

/* ================================================
   作品
   ================================================ */
.works { padding:140px 0; background:var(--bg2); border-top:1px solid var(--bd); }

/* 筛选 */
.filter-row { display:flex; justify-content:center; gap:10px; margin-bottom:52px; }
.fbtn {
    padding:10px 26px;
    border:1px solid var(--bd);
    border-radius:100px;
    font-size:.875rem; color:var(--txt2);
    background:transparent;
    transition:all .3s;
}
.fbtn:hover { border-color:var(--bd2); color:var(--txt); }
.fbtn.on { background:#fff; color:#080808; border-color:#fff; }

/* 网格：全部均匀三列，统一比例 */
.works-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.wcard {
    cursor:pointer;
    opacity:0;
    transform:translateY(40px);
    transition:opacity .55s var(--ef), transform .55s var(--ef);
}
.wcard:nth-child(1){transition-delay:.0s}  .wcard:nth-child(2){transition-delay:.07s}
.wcard:nth-child(3){transition-delay:.14s} .wcard:nth-child(4){transition-delay:.07s}
.wcard:nth-child(5){transition-delay:.0s}  .wcard:nth-child(6){transition-delay:.07s}
.wcard:nth-child(7){transition-delay:.14s} .wcard:nth-child(8){transition-delay:.07s}
.wcard:nth-child(9){transition-delay:.0s}
.wcard.show { opacity:1; transform:translateY(0); }

/* 封面：统一 3:2 比例，照片视频完全一致 */
.wthumb {
    position:relative;
    padding-top:66.25%; /* 3:2 比例，兼顾视频和照片 */
    overflow:hidden;
    border-radius:10px;
    background:var(--bg3);
}
.wcover {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    will-change:transform;
    z-index:1;
    transition:transform .55s var(--ef);
}
.wcard:hover .wcover { transform:scale(1.04); }

/* 视频：hover 才播视频 */
.wvideo {
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    opacity:0; z-index:2;
    will-change:opacity;
    transition:opacity .4s ease;
}
.wcard[data-cat="video"]:hover .wvideo { opacity:1; }
.wcard[data-cat="video"]:hover .wcover  { opacity:.1; }

/* ===== 视频标识：播放图标（始终显示，未 hover 也能看到）===== */
.vbadge {
    position:absolute; top:12px; left:12px;
    width:32px; height:32px;
    background:rgba(0,0,0,.58);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    z-index:5;
    backdrop-filter:blur(6px);
    pointer-events:none;
}
.vbadge svg { width:11px; height:11px; fill:#fff; margin-left:2px; }

/* 作品文字 */
.winfo { padding:14px 3px 3px; }
.winfo h3 { font-size:1rem; font-weight:500; margin-bottom:4px; }
.winfo p { font-size:.82rem; color:var(--txt2); }

/* ================================================
   联系我
   ================================================ */
.contact { padding:140px 0; border-top:1px solid var(--bd); }
.contact-body { text-align:center; max-width:600px; margin:0 auto; }
.contact-lead { font-size:clamp(1.5rem,3.5vw,2.6rem); font-weight:600; letter-spacing:-.02em; margin-bottom:12px; }
.contact-sub { font-size:1rem; color:var(--txt2); margin-bottom:56px; font-weight:300; }

.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.cbtn {
    display:flex; align-items:center; gap:14px;
    padding:20px 22px;
    background:var(--bg2);
    border:1px solid var(--bd);
    border-radius:12px;
    text-align:left;
    transition:all .3s;
}
.cbtn:hover { background:var(--bg3); border-color:var(--bd2); transform:translateY(-3px); }
.ci { font-size:1.3rem; flex-shrink:0; }
.cl { display:block; font-size:.7rem; color:var(--txt2); letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px; }
.cv { font-size:.92rem; font-weight:500; }

/* ================================================
   页脚
   ================================================ */
.footer { padding:32px 0; border-top:1px solid var(--bd); }
.footer-inner {
    max-width:1280px; margin:0 auto; padding:0 48px;
    display:flex; align-items:center; justify-content:space-between;
}
.footer-logo { font-size:1.15rem; font-weight:700; letter-spacing:-.02em; }
.footer-inner p { color:var(--txt3); font-size:.82rem; }
.footer-top { font-size:.82rem; color:var(--txt2); transition:color .25s; }
.footer-top:hover { color:#fff; }

/* ================================================
   弹窗
   ================================================ */
.modal {
    position:fixed; inset:0; z-index:2000;
    background:rgba(0,0,0,.93);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .35s, visibility .35s;
    backdrop-filter:blur(8px);
}
.modal.on { opacity:1; visibility:visible; }

.modal-box {
    position:relative;
    width:92%; max-width:1080px; max-height:92vh;
    overflow:hidden; border-radius:12px;
    background:var(--bg2);
    transform:scale(.93);
    transition:transform .4s var(--ef);
}
.modal.on .modal-box { transform:scale(1); }

.modal-x {
    position:absolute; top:12px; right:12px; z-index:10;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    color:#fff; transition:background .25s;
}
.modal-x:hover { background:rgba(255,255,255,.22); }

.modal-media {
    width:100%;
    background:#000;
    display:flex; align-items:center; justify-content:center;
}
/* 照片：自适应高度，内容决定大小 */
.modal-media img {
    width:auto; max-width:100%;
    height:auto; max-height:75vh;
    object-fit:contain;
}
/* 视频：填满宽度，高度自适应 */
.modal-media video {
    width:100%; height:auto;
    max-height:75vh;
    object-fit:contain;
}

.modal-body { padding:26px 34px 30px; }
.modal-cat { font-size:.7rem; color:var(--txt3); letter-spacing:.18em; text-transform:uppercase; display:block; margin-bottom:8px; }
.modal-title { font-size:1.6rem; font-weight:600; letter-spacing:-.02em; margin-bottom:10px; }
.modal-desc { font-size:.95rem; color:var(--txt2); line-height:1.75; }

/* ================================================
   滚动条
   ================================================ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.22); }

/* ================================================
   响应式
   ================================================ */
@media (max-width:1024px) {
    .wrap { padding:0 36px; }
    .nav-inner { padding:0 36px; }
    .footer-inner { padding:0 36px; }
    .about-grid { grid-template-columns:1fr 1.2fr; gap:60px; }
    .works-grid { grid-template-columns:repeat(2,1fr); }
    .wcard.wbig { grid-column:span 2; }
    .wbig .wthumb { padding-top:52%; }
}

@media (max-width:768px) {
    .wrap { padding:0 20px; }
    .nav-inner { padding:0 20px; }
    .footer-inner { padding:0 20px; }
    .nav-links { display:none; }
    .menu-btn { display:flex; }

    .hero-title { font-size:clamp(2.2rem,13vw,4.2rem); }
    .hero-btns { flex-direction:column; align-items:center; }
    .btn { width:220px; justify-content:center; }

    .about { padding:90px 0; }
    .about-grid { grid-template-columns:1fr; gap:40px; }
    .pic-box { max-width:300px; padding-top:100%; margin:0 auto; }
    .about-intro { font-size:1.5rem; }
    .stat-row { gap:28px; flex-wrap:wrap; }
    .stat-n { font-size:2.6rem; }

    .works { padding:90px 0; }
    .works-grid { grid-template-columns:1fr; }
    .wcard.wbig { grid-column:span 1; }
    .wbig .wthumb { padding-top:66%; }

    .contact { padding:90px 0; }
    .contact-grid { grid-template-columns:1fr; }

    .footer-inner { flex-direction:column; gap:14px; text-align:center; }
    .modal-box { width:96%; }
    .modal-body { padding:18px 20px 22px; }
    .modal-title { font-size:1.25rem; }
}