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

:root
{
    /* 从房间取样的配色 */
    --bg: #0d0c14;
    --bg-deep: #08080d;
    --panel: #14121d;
    --line: #252333;
    --text: #ededf2;
    --sub: #8a8a96;
    --accent: #ff5000;
    --accent-soft: #ff8a3c;
    --gold: #d9a12e;
    --mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
    --sans: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
}

html
{
    scroll-behavior: smooth;
}

body
{
    background: var(--bg-deep);
    color: var(--text);
    font-family: var(--sans);
    overflow-x: hidden;
}

.mono { font-family: var(--mono); }

/* ---------- 第 0 幕：3D 房间 ---------- */
.experience
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    transition: opacity .1s linear;
}

/* ---------- 粘性导航 ---------- */
.topnav
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 20px;
    background: rgba(13, 12, 20, .82);
    border-bottom: 1px solid rgba(37, 35, 51, .7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(-110%);
    transition: transform .35s ease;
}

.topnav.on { transform: none; }

.nav-id
{
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
}

.nav-id img
{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--accent);
}

.nav-links
{
    display: flex;
    gap: 18px;
    font-size: 12px;
    margin-left: auto;
}

.nav-links a { color: var(--sub); text-decoration: none; transition: color .2s; }
.nav-links a:hover { color: var(--accent-soft); }

.nav-douyin
{
    font-size: 12px;
    font-weight: 700;
    color: #0a0a0f;
    background: var(--accent);
    padding: 7px 14px;
    border-radius: 6px;
    text-decoration: none;
}

/* ---------- 首屏 UI ---------- */
.hero-ui
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2;
    pointer-events: none;
}

.hud-title
{
    position: absolute;
    top: 22px;
    left: 24px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.hud-name
{
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .06em;
}

.hud-sub
{
    display: block;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .3em;
    color: var(--accent-soft);
}

.hud-hint
{
    position: absolute;
    bottom: 20px;
    left: 24px;
    color: rgba(237, 237, 242, .45);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
}

.scroll-cue
{
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3em;
    text-indent: .3em; /* 抵消末字间距，视觉居中 */
    color: #ffe9dc;
    background: linear-gradient(180deg, rgba(34, 28, 40, .85), rgba(20, 16, 26, .9));
    border: 1px solid rgba(255, 106, 60, .55);
    border-radius: 999px;
    padding: 14px 34px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, .45),
        0 0 22px rgba(255, 80, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    animation: bob 2.4s ease-in-out infinite;
    transition: border-color .25s, color .25s, box-shadow .25s, background .25s;
}

.scroll-cue:hover
{
    border-color: var(--accent);
    color: #fff;
    background: linear-gradient(180deg, rgba(58, 34, 24, .92), rgba(30, 18, 16, .95));
    box-shadow:
        0 10px 36px rgba(0, 0, 0, .5),
        0 0 34px rgba(255, 80, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .1);
}

@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- tooltip ---------- */
.tooltip
{
    position: fixed;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -140%);
    transition: opacity .15s;
    background: rgba(10, 10, 15, .92);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 13px;
    white-space: nowrap;
}

.tooltip.on { opacity: 1; }

.tooltip small
{
    display: block;
    color: var(--sub);
    font-size: 11px;
    margin-top: 2px;
}

/* ---------- 页面 ---------- */
.page
{
    position: relative;
    z-index: 5;
    margin-top: 100vh;
}

/* ---------- 第 1 幕：开场白（左文右照片卡） ---------- */
.intro-hero
{
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* 顶部黑场承接“关灯”，往下沉入夜色，右上留一抹落日余温 */
    background:
        radial-gradient(60% 50% at 82% 30%, rgba(255, 106, 30, .10), transparent 70%),
        linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 55%, var(--bg) 100%);
}

.intro-grid
{
    width: 100%;
    max-width: 1020px;
    margin: 0 auto;
    padding: 100px 24px 72px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 48px;
    perspective: 900px;
}

.intro-kicker
{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    letter-spacing: .3em;
    color: rgba(237, 237, 242, .7);
}

.intro-kicker img
{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 16px rgba(255, 80, 0, .35);
}

.intro-name
{
    font-size: clamp(44px, 7.5vw, 74px);
    font-weight: 800;
    letter-spacing: .04em;
    margin-top: 18px;
}

.intro-en
{
    font-size: 11px;
    letter-spacing: .32em;
    color: rgba(237, 237, 242, .65);
    margin-top: 12px;
}

.intro-tagline
{
    font-size: 15px;
    color: var(--accent-soft);
    margin-top: 18px;
    min-height: 1.5em;
}

.intro-quick
{
    margin-top: 26px;
    font-size: 11px;
    letter-spacing: .14em;
    color: #55515f;
}

/* 幽灵大字背景：填补首屏中部留白 */
.intro-ghost
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-58%, -50%) rotate(-90deg);
    font-size: clamp(120px, 20vw, 230px);
    font-weight: 700;
    letter-spacing: .05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 106, 60, .08);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

@supports not (-webkit-text-stroke: 1px #000)
{
    .intro-ghost { color: rgba(255, 106, 60, .05); }
}

/* 照片堆：主卡 + 背后一张空拍立得 */
.photo-stack
{
    position: relative;
    justify-self: end;
    width: min(100%, 340px);
}

.photo-card.back
{
    position: absolute;
    inset: 0;
    transform: rotate(-4.5deg) translate(-22px, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

.photo-blank
{
    color: #3c3948;
    font-size: 13px;
    letter-spacing: .3em;
}

/* 照片卡：完整展示原片（不裁头），拍立得式边框 + 鼠标视差 */
.photo-card
{
    position: relative;
    z-index: 1;
    width: 100%;
    background: #17151f;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 12px 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 40px rgba(255, 80, 0, .06);
    transform: rotate(2.2deg);
    transition: transform .25s ease;
    will-change: transform;
}

.photo-card img
{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.photo-card figcaption
{
    margin-top: 11px;
    font-size: 10px;
    letter-spacing: .22em;
    color: var(--sub);
    display: flex;
    justify-content: space-between;
}

.photo-card figcaption::after
{
    content: '35mm · GOLDEN HOUR';
    color: #4a4756;
}

.caret { animation: blink 1s steps(1) infinite; color: var(--accent-soft); }
@keyframes blink { 50% { opacity: 0; } }

.btn-douyin
{
    display: inline-block;
    margin-top: 26px;
    padding: 12px 28px;
    background: var(--accent);
    color: #0a0a0f;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(255, 80, 0, .4);
    transition: transform .2s, box-shadow .2s;
}

.btn-douyin:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255, 80, 0, .5); }

/* ---------- 数据/介绍/标签 ---------- */
.section
{
    max-width: 860px;
    margin: 0 auto;
    padding: 72px 24px 0;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
}

.section.in, .reveal.in { opacity: 1; transform: none; }

.reveal
{
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s ease;
}

/* ---------- 关于（双栏） ---------- */
.about-grid
{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 52px;
    align-items: start;
    padding-top: 96px;
}

/* 中缝细分隔线 */
.about-grid::before
{
    content: '';
    position: absolute;
    top: 120px;
    bottom: 90px;
    left: calc(60% - 6px);
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.sec-slash
{
    color: var(--accent);
    font-size: 26px;
    font-weight: 800;
    transform: skewX(-8deg);
}

.intro-lines { margin-top: 26px; }

.intro-lines p
{
    color: #c9c9d2;
    line-height: 1.9;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}

.intro-lines p:first-child
{
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    padding-left: 16px;
    border-left: 3px solid var(--accent);
}

.intro-lines.in p { opacity: 1; transform: none; }

.intro-lines.in p:nth-child(2) { transition-delay: .18s; }
.intro-lines.in p:nth-child(3) { transition-delay: .36s; }
.intro-lines.in p:nth-child(4) { transition-delay: .54s; }
.intro-lines.in p:nth-child(5) { transition-delay: .72s; }

.intro-lines p:last-child { color: var(--accent-soft); }

/* 数据卡 2×2 */
.stat-cards
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 58px;
}

.stat
{
    position: relative;
    background: linear-gradient(160deg, #17151f 0%, var(--panel) 60%);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px 16px 18px;
    text-align: center;
    overflow: hidden;
    transition: border-color .25s, transform .25s;
}

/* 顶部橙色发丝线 */
.stat::before
{
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 80, 0, .55), transparent);
}

/* 角标序号 */
.stat::after
{
    content: counter(stat-idx, decimal-leading-zero);
    counter-increment: stat-idx;
    position: absolute;
    top: 8px;
    right: 10px;
    font-family: var(--mono);
    font-size: 9px;
    color: #3c3948;
    letter-spacing: .1em;
}

.stat-cards { counter-reset: stat-idx; }

.stat:hover { border-color: rgba(255, 80, 0, .5); transform: translateY(-3px); }

.stat b
{
    display: block;
    font-family: var(--mono);
    font-size: 28px;
    color: var(--accent-soft);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.stat span
{
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--sub);
    letter-spacing: .18em;
}

.tags
{
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.tag
{
    padding: 6px 14px;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: #c9c9d2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .5s ease, transform .5s ease, border-color .2s;
}

.tags.in .tag { opacity: 1; transform: none; }

.tag:hover { border-color: var(--accent); }

/* ---------- 第 2 幕：作品集 ---------- */
.sec-head
{
    display: flex;
    align-items: baseline;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 14px;
}

.sec-head h2 { font-size: 24px; font-weight: 700; }

.sec-en { margin-left: auto; font-size: 10px; color: var(--sub); letter-spacing: .24em; }

.chapter { margin-top: 64px; }

/* 章头：幽灵大编号 + 标题组 */
.chap-head
{
    position: relative;
    display: flex;
    align-items: center;
    min-height: 86px;
    margin-bottom: 14px;
}

.chap-ghost
{
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 110px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 106, 60, .16);
    user-select: none;
    pointer-events: none;
}

@supports not (-webkit-text-stroke: 1px #000)
{
    .chap-ghost { color: rgba(255, 106, 60, .07); }
}

.chap-title { padding-left: 92px; }

.chap-no
{
    display: block;
    font-size: 10px;
    color: var(--accent-soft);
    letter-spacing: .3em;
}

.chap-title h3 { font-size: 26px; font-weight: 800; margin-top: 4px; }

.chap-sub
{
    display: block;
    font-size: 10px;
    color: var(--sub);
    letter-spacing: .18em;
    margin-top: 6px;
}

/* 胶片条：横向滚动 + snap（电影人主题的作品陈列） */
.works-strip
{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 2px 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 36px), transparent 100%);
    cursor: grab;
}

.works-strip.dragging { cursor: grabbing; scroll-snap-type: none; }

.works-strip::-webkit-scrollbar { height: 6px; }
.works-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.strip-hint
{
    font-size: 10px;
    color: #4a4756;
    letter-spacing: .2em;
    margin-top: 2px;
}

.work-card
{
    position: relative;
    display: block;
    flex: 0 0 176px;
    scroll-snap-align: start;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    padding-left: 14px; /* 胶片齿孔边 */
    transition: transform .25s, border-color .25s, box-shadow .25s;
}

.work-card.featured { flex-basis: 232px; }

/* 左侧胶片齿孔条 */
.film-edge
{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14px;
    background:
        radial-gradient(circle at 7px 10px, #0a0a10 3px, transparent 3.6px) 0 0 / 14px 20px repeat-y,
        #1c1a26;
    border-right: 1px solid #26232f;
}

.work-card:hover
{
    transform: translateY(-4px);
    border-color: rgba(255, 80, 0, .55);
    box-shadow: 0 8px 30px rgba(255, 80, 0, .12);
}

.work-cover { position: relative; height: 230px; overflow: hidden; }

.work-cover img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}

.work-card:hover .work-cover img { transform: scale(1.05); }

/* 封面底部渐变，托住赞数 */
.cover-shade
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(180deg, transparent, rgba(6, 6, 10, .85));
}

.work-jump
{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    background: rgba(10, 10, 15, .75);
    color: var(--accent-soft);
    border: 1px solid rgba(255, 106, 60, .35);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s;
}

.work-card:hover .work-jump { opacity: 1; transform: none; }

.work-pin
{
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 9px;
    background: var(--accent);
    color: #0a0a0f;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 700;
}

.work-likes
{
    position: absolute;
    left: 10px;
    bottom: 8px;
    font-size: 10.5px;
    color: #ffd9c2;
    letter-spacing: .04em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.work-info { padding: 10px 12px 12px; }

.work-title
{
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.work-tag
{
    display: inline-block;
    margin-top: 8px;
    font-size: 9px;
    color: var(--sub);
    letter-spacing: .08em;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 7px;
}

.next-card
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px dashed #38344e;
    border-radius: 12px;
    padding: 44px 20px;
    text-align: center;
    color: var(--sub);
}

.next-card .big { font-size: 26px; }
.next-card .mono { font-size: 10px; letter-spacing: .28em; color: var(--gold); }

/* ---------- 第 3 幕：尾声 ---------- */
.marquee
{
    margin-top: 110px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    padding: 14px 0;
    background: var(--panel);
}

.marquee-track
{
    display: flex;
    white-space: nowrap;
    width: max-content;
    font-size: 12px;
    letter-spacing: .3em;
    color: #55515f;
    animation: marquee 26s linear infinite;
}

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

.footer
{
    padding: 56px 24px 46px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}

.foot-big
{
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 22px;
}

.footer > a
{
    font-size: 12px;
    color: var(--sub);
    letter-spacing: .18em;
    text-decoration: none;
}

.footer > a:hover { color: var(--accent-soft); }

.foot-line { margin-top: 14px; font-size: 11px; color: #55555f; }

.foot-credit { margin-top: 8px; font-size: 10px; color: #3c3c48; }
.foot-credit a { color: inherit; }

.star-egg
{
    background: none;
    border: none;
    cursor: pointer;
    color: #2a2a36;
    font-size: 11px;
    padding: 4px;
    transition: color .3s, transform .3s;
}

.star-egg:hover { color: var(--accent); transform: rotate(72deg) scale(1.3); }

/* ---------- 彩蛋 ---------- */
.egg-overlay
{
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(6, 6, 10, .95);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.egg-overlay[hidden] { display: none; }

#eggConfetti
{
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.egg-card
{
    position: relative;
    max-width: 480px;
    text-align: center;
    animation: eggin .8s cubic-bezier(.2, .9, .3, 1.2) both;
}

@keyframes eggin
{
    from { opacity: 0; transform: translateY(30px) scale(.94); }
}

.egg-date { font-size: 12px; color: var(--accent-soft); letter-spacing: .34em; }

.egg-title
{
    font-size: clamp(30px, 8vw, 44px);
    font-weight: 800;
    margin: 18px 0 22px;
    text-shadow: 0 0 44px rgba(255, 80, 0, .45);
}

.egg-msg p
{
    color: #c9c9d2;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 12px;
}

.egg-photos
{
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.egg-photos img
{
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: top;
    border-radius: 10px;
    border: 1px solid #33333f;
    transform: rotate(-2deg);
}

.egg-photos img:nth-child(2n) { transform: rotate(2.5deg); }

.egg-close
{
    margin-top: 30px;
    padding: 12px 30px;
    background: var(--accent);
    color: #0a0a0f;
    font-weight: 700;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(255, 80, 0, .4);
}

/* ---------- 响应式 & 动效偏好 ---------- */
@media (max-width: 820px)
{
    .intro-grid
    {
        grid-template-columns: 1fr;
        gap: 44px;
        padding-top: 84px;
    }

    .intro-ghost { display: none; }

    .photo-stack { justify-self: center; width: min(100%, 300px); }

    .about-grid { grid-template-columns: 1fr; gap: 8px; padding-top: 72px; }
    .about-grid::before { display: none; }
    .stat-cards { margin-top: 26px; }

    .chap-ghost { font-size: 84px; }
    .chap-title { padding-left: 70px; }
}

@media (max-width: 640px)
{
    .hud-hint { display: none; }
    .nav-links { display: none; }
    .work-card { flex-basis: 150px; }
    .work-card.featured { flex-basis: 190px; }
    .work-cover { height: 200px; }
}

@media (prefers-reduced-motion: reduce)
{
    *, *::before, *::after
    {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
    .section, .reveal { opacity: 1; transform: none; }
}


/*# sourceMappingURL=main.css.map*/