/* ===== 基础变量 ===== */
:root{
    --bg:#0a0a0c;
    --bg-2:#111114;
    --ink:#e8e4d8;
    --ink-dim:#9a958a;
    --gold:#c9a96a;
    --gold-soft:#8a7548;
    --red:#b3261e;
    --line:rgba(232,228,216,0.12);
    --serif:"Noto Serif SC","Cinzel",serif;
    --display:"Cinzel",serif;
    --mono:"JetBrains Mono",monospace;
    --letterbox-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--serif);
    overflow-x:hidden;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
body.intro-locked{overflow:hidden;height:100vh;}
a{color:inherit;text-decoration:none;}

/* ===== 全局遮罩层 ===== */
.film-grain{
    position:fixed;inset:0;z-index:9000;pointer-events:none;
    opacity:.06;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation:grain .5s steps(2) infinite;
}
@keyframes grain{
    0%{transform:translate(0,0)}
    25%{transform:translate(-3%,2%)}
    50%{transform:translate(2%,-3%)}
    75%{transform:translate(-2%,-2%)}
    100%{transform:translate(3%,3%)}
}
.vignette{
    position:fixed;inset:0;z-index:8000;pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.65) 100%);
}
.scanlines{
    position:fixed;inset:0;z-index:8500;pointer-events:none;opacity:.08;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
}

/* ===== Letterbox 黑边 ===== */
.letterbox{
    position:fixed;left:0;right:0;height:var(--letterbox-h);
    background:#000;z-index:7000;
    transition:height .8s cubic-bezier(.7,0,.2,1);
}
.letterbox-top{top:0;}
.letterbox-bottom{bottom:0;}
body.entered .letterbox{height:36px;}
@media (max-width:680px){
    :root{--letterbox-h:40px;}
    body.entered .letterbox{height:22px;}
}

/* ===== 片头 intro ===== */
.intro{
    position:fixed;inset:0;z-index:9500;
    background:#000;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:24px;
    transition:opacity 1s ease, visibility 1s;
}
.intro.hide{opacity:0;visibility:hidden;}
.intro-studio{
    font-family:var(--display);letter-spacing:.5em;font-size:13px;
    color:var(--ink-dim);text-transform:uppercase;
    opacity:0;animation:introFade 1.4s ease .3s forwards;
}
.intro-presents{
    font-family:var(--serif);font-style:italic;color:var(--gold-soft);
    margin-top:18px;font-size:18px;
    opacity:0;animation:introFade 1.4s ease 1.2s forwards;
}
.intro-title{
    font-family:var(--serif);font-weight:900;
    font-size:clamp(48px,12vw,160px);
    letter-spacing:.15em;color:var(--ink);
    margin-top:36px;
    opacity:0;animation:introFade 1.8s ease 2s forwards;
    text-shadow:0 0 60px rgba(201,169,106,.25);
}
.intro-sub{
    margin-top:24px;color:var(--ink-dim);font-size:15px;letter-spacing:.18em;
    opacity:0;animation:introFade 1.4s ease 3.2s forwards;
}
.intro-enter{
    margin-top:64px;color:var(--gold);font-family:var(--mono);font-size:13px;
    letter-spacing:.3em;cursor:pointer;
    opacity:0;animation:introFade 1s ease 4.2s forwards, blink 1.6s steps(2) 5s infinite;
}
.intro-enter:hover{color:var(--ink);}
@keyframes introFade{to{opacity:1;}}
@keyframes blink{50%{opacity:.3;}}

/* ===== 导航 ===== */
.nav{
    position:fixed;top:var(--letterbox-h);left:0;right:0;z-index:6000;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(20px,5vw,60px);
    transition:background .4s ease, padding .4s ease, top .8s cubic-bezier(.7,0,.2,1);
}
body.entered .nav{top:36px;}
.nav.scrolled{
    background:rgba(10,10,12,.7);backdrop-filter:blur(10px);
    padding-top:12px;padding-bottom:12px;
    border-bottom:1px solid var(--line);
}
.nav-brand{
    font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:.2em;
}
.nav-dot{color:var(--red);}
.nav-menu{display:flex;gap:34px;list-style:none;}
.nav-link{
    font-family:var(--mono);font-size:12px;letter-spacing:.25em;text-transform:uppercase;
    color:var(--ink-dim);position:relative;padding:4px 0;transition:color .3s;
}
.nav-link::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
    transition:width .35s ease;
}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after{width:100%;}
.nav-time{
    font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.15em;
}
@media (max-width:760px){
    .nav-menu{display:none;}
}

/* ===== 英雄区 ===== */
.hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:120px clamp(20px,5vw,80px) 80px;
    overflow:hidden;
}
.hero-bg{
    position:absolute;inset:0;z-index:-1;
    background:
        radial-gradient(circle at 70% 30%, rgba(201,169,106,.18), transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(179,38,30,.12), transparent 50%),
        linear-gradient(180deg, #0a0a0c 0%, #15110a 100%);
}
.hero-bg::before{
    content:"";position:absolute;inset:0;
    background-image:
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(circle at center, black 30%, transparent 75%);
}
.hero-content{text-align:center;max-width:1100px;}
.hero-tag{
    font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--gold);
    text-transform:uppercase;margin-bottom:32px;
    opacity:0;transform:translateY(20px);
    animation:heroUp 1s ease .3s forwards;
}
.hero-title{
    font-family:var(--serif);font-weight:900;
    font-size:clamp(64px,14vw,200px);
    letter-spacing:.08em;line-height:1;
    margin-bottom:24px;
}
.hero-line{
    display:inline-block;
    background:linear-gradient(180deg, #fff 0%, var(--gold) 60%, var(--gold-soft) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    opacity:0;transform:translateY(40px);
    animation:heroUp 1.4s cubic-bezier(.2,.7,.2,1) .6s forwards;
    text-shadow:0 0 80px rgba(201,169,106,.2);
}
.hero-role{
    font-family:var(--display);letter-spacing:.5em;font-size:14px;color:var(--ink-dim);
    margin-bottom:40px;
    opacity:0;animation:heroUp 1s ease 1.1s forwards;
}
.hero-quote{
    font-family:var(--serif);font-style:italic;color:var(--ink);
    font-size:clamp(16px,2.2vw,22px);max-width:680px;margin:0 auto;
    opacity:0;animation:heroUp 1s ease 1.4s forwards;
}
.hero-scroll{
    position:absolute;bottom:calc(var(--letterbox-h) + 30px);left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--ink-dim);
    opacity:0;animation:heroUp 1s ease 2s forwards;
}
.scroll-line{width:1px;height:50px;background:linear-gradient(180deg, var(--gold), transparent);
    animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);opacity:.4;}50%{transform:scaleY(1);opacity:1;}}
@keyframes heroUp{to{opacity:1;transform:translateY(0);}}

.timecode{
    position:absolute;bottom:calc(var(--letterbox-h) + 24px);right:clamp(20px,5vw,40px);
    font-family:var(--mono);font-size:11px;color:var(--gold-soft);letter-spacing:.15em;
}

/* ===== 通用 section ===== */
.section{
    position:relative;
    padding:140px clamp(20px,5vw,80px);
    max-width:1280px;margin:0 auto;
}
.section-index{
    position:absolute;top:90px;right:clamp(20px,5vw,80px);
    font-family:var(--display);font-size:120px;font-weight:900;
    color:rgba(201,169,106,.06);line-height:1;pointer-events:none;
}
.section-head{margin-bottom:72px;}
.section-label{
    font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:var(--gold);
    text-transform:uppercase;margin-bottom:16px;
    display:flex;align-items:center;gap:14px;
}
.section-label::before{content:"";width:40px;height:1px;background:var(--gold);}
.section-title{
    font-family:var(--serif);font-weight:700;
    font-size:clamp(36px,6vw,72px);letter-spacing:.04em;
}

/* ===== 关于 ===== */
.about-grid{
    display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:center;
}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:50px;}}
.poster-frame{
    position:relative;aspect-ratio:2/3;
    border:1px solid var(--line);
    padding:14px;background:var(--bg-2);
}
.poster-frame::before,.poster-frame::after{
    content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold);
}
.poster-frame::before{top:-6px;left:-6px;border-right:none;border-bottom:none;}
.poster-frame::after{bottom:-6px;right:-6px;border-left:none;border-top:none;}
.poster-inner{
    position:relative;width:100%;height:100%;
    background:
        radial-gradient(circle at 50% 30%, rgba(201,169,106,.18), transparent 60%),
        linear-gradient(180deg, #1a1408 0%, #0a0a0c 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:30px;overflow:hidden;
}
.poster-inner::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0 2px, transparent 2px 5px);
    pointer-events:none;mix-blend-mode:overlay;
}
.poster-text{position:relative;z-index:1;}
.poster-top{font-family:var(--mono);font-size:10px;letter-spacing:.4em;color:var(--gold);margin-bottom:24px;}
.poster-name{font-family:var(--serif);font-weight:900;font-size:clamp(28px,5vw,48px);letter-spacing:.1em;color:var(--ink);}
.poster-mid{font-family:var(--display);font-style:italic;color:var(--ink-dim);margin:18px 0;font-size:14px;}
.poster-role{font-family:var(--display);font-size:18px;letter-spacing:.25em;color:var(--gold);text-transform:uppercase;}
.poster-bottom{margin-top:32px;font-family:var(--serif);font-style:italic;color:var(--ink-dim);font-size:13px;}
.poster-credit{
    position:absolute;bottom:18px;left:0;right:0;z-index:1;
    font-family:var(--mono);font-size:9px;letter-spacing:.35em;color:var(--gold-soft);
}

.about-text p{margin-bottom:20px;color:var(--ink);}
.about-text p:nth-child(2),.about-text p:nth-child(3),.about-text p:nth-child(4){color:var(--ink-dim);}
.about-lead{
    font-family:var(--serif);font-weight:700;font-size:clamp(22px,3vw,32px);
    color:var(--ink)!important;margin-bottom:28px!important;
}
.about-meta{
    margin-top:40px;display:flex;flex-wrap:wrap;gap:36px;
    padding-top:30px;border-top:1px solid var(--line);
}
.about-meta>div{display:flex;flex-direction:column;gap:6px;}
.meta-k{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--gold-soft);text-transform:uppercase;}
.meta-v{font-family:var(--serif);font-size:16px;color:var(--ink);}

/* ===== 技能 ===== */
.skills-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);
}
@media (max-width:880px){.skills-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.skills-grid{grid-template-columns:1fr;}}
.skill-card{
    background:var(--bg);padding:42px 32px;
    display:flex;flex-direction:column;gap:14px;
    transition:background .4s ease;position:relative;
}
.skill-card:hover{background:var(--bg-2);}
.skill-card:hover .skill-num{color:var(--gold);}
.skill-num{
    font-family:var(--display);font-size:14px;letter-spacing:.3em;color:var(--gold-soft);
    transition:color .4s;
}
.skill-name{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink);}
.skill-desc{font-size:13px;color:var(--ink-dim);line-height:1.6;flex:1;}
.skill-bar{height:2px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:8px;}
.skill-bar span{
    display:block;height:100%;width:0;
    background:linear-gradient(90deg, var(--gold), var(--red));
    transition:width 1.4s cubic-bezier(.2,.7,.2,1);
}
.skill-card.in .skill-bar span{width:var(--w);}

/* ===== 作品 ===== */
.works-list{display:flex;flex-direction:column;}
.work-item{
    display:grid;grid-template-columns:120px 1fr 200px;gap:40px;
    padding:40px 0;border-top:1px solid var(--line);
    align-items:start;transition:background .4s, padding .4s;
}
.work-item:last-child{border-bottom:1px solid var(--line);}
.work-item:hover{background:rgba(201,169,106,.03);padding-left:20px;padding-right:20px;}
.work-year{
    font-family:var(--display);font-size:22px;letter-spacing:.1em;color:var(--gold);
    padding-top:4px;
}
.work-title{
    font-family:var(--serif);font-weight:700;font-size:clamp(22px,3vw,32px);
    color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.work-tag{
    font-family:var(--mono);font-size:10px;letter-spacing:.25em;color:var(--gold);
    padding:3px 8px;border:1px solid var(--gold-soft);
}
.work-desc{color:var(--ink-dim);font-size:15px;max-width:60ch;}
.work-role{
    font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-dim);
    text-transform:uppercase;text-align:right;padding-top:8px;
}
@media (max-width:760px){
    .work-item{grid-template-columns:1fr;gap:14px;}
    .work-role{text-align:left;}
}

/* ===== 片尾 ===== */
.outro{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:160px clamp(20px,5vw,80px);
    background:
        radial-gradient(circle at 50% 50%, rgba(201,169,106,.08), transparent 60%),
        var(--bg);
}
.outro-screen{text-align:center;width:100%;max-width:680px;}
.outroll{padding:18px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;}
.outro-line{font-family:var(--mono);font-size:11px;letter-spacing:.35em;color:var(--gold-soft);text-transform:uppercase;}
.outro-name{font-family:var(--serif);font-size:22px;color:var(--ink);letter-spacing:.06em;}
.outro-contact{margin:60px 0 40px;}
.contact-label{font-family:var(--mono);font-size:11px;letter-spacing:.4em;color:var(--gold);margin-bottom:22px;}
.contact-links{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;}
.contact-link{
    font-family:var(--serif);font-size:15px;color:var(--ink-dim);
    padding:8px 4px;border-bottom:1px solid transparent;transition:all .3s;
}
.contact-link:hover{color:var(--gold);border-bottom-color:var(--gold);}
.outro-theend{
    font-family:var(--serif);font-size:28px;letter-spacing:.4em;color:var(--ink);
    margin:50px 0 18px;
}
.outro-credit{font-family:var(--mono);font-size:10px;letter-spacing:.35em;color:var(--gold-soft);}

/* ===== 滚动淡入 ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal[style*="--i"]{transition-delay:calc(var(--i) * .1s);}

/* ===== 选区 / 滚动条 ===== */
::selection{background:var(--gold);color:#000;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#000;}
::-webkit-scrollbar-thumb{background:var(--gold-soft);}