/* ============================================================
   阿玖的网站 · zyx0407.com
   深蓝星空 / 门牌 / 滚动进屋 / 时间线 / 两扇门
   ============================================================ */

:root {
    /* 深蓝夜 —— 色板借鉴 InternalBeyond：夜蓝底 + 雾银字 + 钢蓝强调 + 毛玻璃 */
    --bg-deep:   #0b1121;
    --bg-mid:    #131c33;
    --bg-card:   rgba(155, 180, 218, .07);
    --line:      rgba(165, 188, 230, .16);
    --line-soft: rgba(165, 188, 230, .08);
    --text:      #e2e9f5;
    --text-dim:  #a8b6d0;
    --text-faint: rgba(226, 233, 245, .40);
    --accent:      #7fb2e0;                 /* 冰蓝：全站唯一强调色 */
    --accent-soft: rgba(127, 178, 224, .30);
    --glass-line:  rgba(165, 188, 230, .20);
    --glass-shadow: 0 10px 40px rgba(3, 8, 20, .38);
    --hglow: 0 2px 16px rgba(4, 10, 26, .72), 0 0 28px rgba(127, 178, 224, .16);
    --ease: cubic-bezier(.4, 0, .2, 1);
    --font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-light: "Noto Sans SC Light", "Noto Sans SC", "PingFang SC", "Microsoft YaHei Light", "Microsoft YaHei", sans-serif;
    --font-display: "Noto Serif SC Light", "Noto Serif SC", "Songti SC", "STZhongsong", "SimSun", serif;
    --serif: Garamond, "Times New Roman", Georgia, serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lock { overflow: hidden; }

body {
    font-family: var(--font);
    background: var(--bg-deep);
    color: var(--text);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}

/* ================================================================
   背景五层：星云 → 星点 → 胶片颗粒 → 暗角
   （"好看"的三要素：雾、纵深、颗粒。借鉴 InternalBeyond 的摄影感）
   ================================================================ */

/* ① 星云 / 银河：多层径向渐变叠出来的一张"夜空底片"，极慢漂移 */
.nebula {
    position: fixed;
    inset: -12%;                 /* 留出漂移余量，边缘不会露出来 */
    z-index: 0;
    pointer-events: none;
    background:
        /* 银河主带：斜向一条亮带 */
        linear-gradient(157deg,
            rgba(11, 17, 33, 0) 24%,
            rgba(150, 185, 235, .09) 42%,
            rgba(198, 220, 252, .15) 50%,
            rgba(150, 185, 235, .08) 58%,
            rgba(11, 17, 33, 0) 76%),
        /* 银河里的亮核，把那条带打散，免得像一条直尺画的线 */
        radial-gradient(30% 13% at 63% 31%, rgba(206, 226, 255, .17) 0%, rgba(11, 17, 33, 0) 72%),
        radial-gradient(24% 11% at 40% 55%, rgba(176, 204, 246, .13) 0%, rgba(11, 17, 33, 0) 74%),
        radial-gradient(18% 9%  at 76% 20%, rgba(190, 214, 250, .12) 0%, rgba(11, 17, 33, 0) 76%),
        /* 星云团：冷蓝 + 一点紫，压得很低 */
        radial-gradient(36% 32% at 20% 22%, rgba(96, 120, 200, .15) 0%, rgba(11, 17, 33, 0) 72%),
        radial-gradient(32% 28% at 80% 70%, rgba(70, 138, 178, .13) 0%, rgba(11, 17, 33, 0) 74%),
        radial-gradient(28% 24% at 56% 86%, rgba(122, 98, 172, .11) 0%, rgba(11, 17, 33, 0) 74%),
        radial-gradient(22% 20% at 10% 76%, rgba(66, 118, 168, .10) 0%, rgba(11, 17, 33, 0) 76%),
        /* 地平线微光：像远处有一片城市或天光 */
        radial-gradient(86% 26% at 50% 106%, rgba(72, 124, 186, .17) 0%, rgba(11, 17, 33, 0) 74%),
        /* 底：自上而下由深到更深 */
        linear-gradient(180deg, #0a1020 0%, #0b1121 46%, #070c18 100%);
    animation: nebulaDrift 200s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes nebulaDrift {
    from { transform: translate3d(-1.1%, -0.7%, 0) scale(1.02); }
    to   { transform: translate3d(1.1%, 0.7%, 0) scale(1.05); }
}

/* ② 星点画布（背景透明，让星云透上来） */
#sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    background: transparent;
}

/* ③ 胶片颗粒：给它"照片感"的关键一层（SVG 噪声，本地生成，零请求） */
.grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ④ 暗角：把四周压暗，视线自然收到中间 */
.veil {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* 左右严格对称 */
    background:
        radial-gradient(125% 125% at 50% 50%, rgba(11, 17, 33, 0) 40%, rgba(4, 7, 16, .62) 100%);
}

/* ================================================================
   开场：进屋（照星空站那份 ENTER 环：细、白、极小字）
   ================================================================ */
.gate {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 不是一块死板：夜空的星云和星点从后面透上来。
       中间留清楚给环，四周压到接近全黑，视线自然收在环上。 */
    background: radial-gradient(circle at 50% 50%,
        rgba(11, 17, 33, .22) 0%,
        rgba(11, 17, 33, .50) 42%,
        rgba(11, 17, 33, .86) 74%,
        rgba(11, 17, 33, .97) 100%);
}

.ring-wrap {
    position: relative;
    width: clamp(130px, 30vw, 180px);
    height: clamp(130px, 30vw, 180px);
}

.ring-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}

.ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, .12);
    stroke-width: 1.5;
    opacity: .3;
}

.ring-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
}

.ring-enter {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: var(--font-light);
    font-size: clamp(.62rem, 1.4vw, .74rem);
    font-weight: 400;
    letter-spacing: .3em;
    padding-left: .3em;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .65s ease, color .3s ease;
}

.ring-enter.ready { opacity: 1; pointer-events: auto; }
.ring-enter:hover { color: #aaa; }
.ring-enter:active { transform: scale(.95); }

/* ================================================================
   圆形转场遮罩（GSAP 驱动，不加 CSS transition）
   ================================================================ */
.wipe {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
    background: var(--bg-deep);
    clip-path: circle(0% at 50% 50%);
    -webkit-clip-path: circle(0% at 50% 50%);
}

/* 进屋那一下的雾：让人从模糊里慢慢看清
   （借鉴 InternalBeyond 的 splash：backdrop-filter 霜化 + 缓慢散开）
   不加 CSS transition，全部交给 GSAP 驱动 */
.mist {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: none;
    pointer-events: none;
    opacity: 0;
    background: rgba(15, 41, 95, .40);
    backdrop-filter: blur(26px) saturate(.75) brightness(.92);
    -webkit-backdrop-filter: blur(26px) saturate(.75) brightness(.92);
}

/* ================================================================
   底部星点路标（居中横排）
   ================================================================ */
.rail {
    position: fixed;
    left: 50%;
    bottom: clamp(16px, 3.2vh, 28px);
    transform: translateX(-50%);
    z-index: 12;
    display: flex;
    flex-direction: row;
    gap: 13px;
    align-items: center;
    padding: 9px 15px;
    border: 1px solid var(--glass-line);
    border-radius: 2rem;
    background: rgba(155, 180, 218, .07);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: var(--glass-shadow);
    /* 首屏不出现：进了屋再浮出来 */
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s var(--ease);
}

.rail.show {
    opacity: 1;
    pointer-events: auto;
}

.rail-dot {
    position: relative;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.rail-dot::after {
    content: attr(data-label);
    position: absolute;
    left: 50%;
    bottom: 190%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font);
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--text-dim);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.rail-dot:hover::after { opacity: 1; }

/* 走过的：留下淡淡的痕迹，一眼看出翻过几页 */
.rail-dot.past {
    background: rgba(127, 178, 224, .30);
    border-color: rgba(127, 178, 224, .45);
}

.rail-dot.on {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-soft);
}

/* ================================================================
   ① 门牌
   ================================================================ */
.hero { position: relative; height: 220vh; }

.hero-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
}

/* 手机浏览器的地址栏会吃高度：用 svh（最小视口高度）保证门牌永远完整可见 */
@supports (height: 100svh) {
    .hero-inner { height: 100svh; }
    .gate { min-height: 100svh; }
}

.plate {
    text-align: center;
    will-change: transform, opacity;
}

.plate-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 7vw, 4.2rem);
    font-weight: 400;
    letter-spacing: .16em;
    padding-left: .16em;
    line-height: 1.35;
    color: var(--text);
    text-shadow: var(--hglow);
}

.plate-title .ch {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
}

.plate-domain {
    display: block;
    margin-top: 1.5rem;
    font-family: var(--serif);
    font-size: clamp(.85rem, 1.9vw, 1.02rem);
    letter-spacing: .3em;
    padding-left: .3em;
    color: var(--accent);
}

.plate-sub {
    margin-top: .9rem;
    font-size: clamp(.78rem, 1.7vw, .94rem);
    letter-spacing: .26em;
    padding-left: .26em;
    color: var(--text-dim);
}

/* ================================================================
   屋内（内容区）
   ================================================================ */
.inside {
    position: relative;
    z-index: 4;
    /* 半透明：让星云和星点一路透到页脚，整站才有"夜空里"的感觉 */
    background: rgba(11, 17, 33, .78);
}

.inside::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 38vh;
    transform: translateY(-100%);
    background: linear-gradient(180deg, rgba(11, 17, 33, 0) 0%, rgba(11, 17, 33, .78) 100%);
    pointer-events: none;
}

.block {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(5rem, 13vh, 10rem) clamp(1.2rem, 5vw, 3rem);
    /* 杂志式两栏：左栏栏目名，右栏内容，顶部对齐 */
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.block-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.1vw, 1.9rem);
    font-weight: 400;
    letter-spacing: .14em;
    padding-left: .14em;
    margin-bottom: 0;
    color: var(--text);
    text-shadow: var(--hglow);
}

/* 逐字显影（区块标题 / 页脚悄悄话共用） */
.split .ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(.32em);
    filter: blur(6px);
    transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}

.split.in .ch {
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* 通用淡入 */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .9s ease, transform .9s ease;
}

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

/* 卡片 */
.card {
    max-width: 34em;
    padding: clamp(1.7rem, 4vw, 2.7rem);
    border: 1px solid var(--glass-line);
    border-radius: 1.1rem;
    background: var(--bg-card);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    box-shadow: var(--glass-shadow);
    font-size: clamp(.92rem, 1.6vw, 1.02rem);
    color: var(--text);
}

.card p + p { margin-top: 1rem; }
.card-accent { border-color: var(--accent-soft); }

/* ================================================================
   ④ 时间线
   ================================================================ */
.tl {
    position: relative;
    max-width: 40em;
    padding-left: 2.4rem;
}

.tl-line {
    position: absolute;
    left: 5px;
    top: .5rem;
    bottom: .5rem;
    width: 1px;
    background: var(--line);
    overflow: hidden;
}

.tl-spark {
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: 18%;
    background: linear-gradient(180deg, rgba(127, 178, 224, 0), rgba(127, 178, 224, .9), rgba(127, 178, 224, 0));
    filter: blur(1px);
    animation: tlFlow 4.6s linear infinite;
}

@keyframes tlFlow {
    0%   { transform: translateY(-120%); }
    100% { transform: translateY(560%); }
}

.tl-list { list-style: none; }

.tl-item {
    position: relative;
    padding-bottom: 2.2rem;
}

.tl-item:last-child { padding-bottom: 0; }

.tl-dot {
    position: absolute;
    left: calc(-2.4rem + 1px);
    top: .68rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transition: background .8s ease, box-shadow .8s ease;
}

.tl-item.on .tl-dot {
    background: var(--accent);
    box-shadow: 0 0 14px var(--accent-soft);
}

.tl-item.on .tl-dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid var(--accent-soft);
    border-radius: 50%;
    animation: tlRipple 1.1s ease-out 1;
}

@keyframes tlRipple {
    from { transform: scale(.6); opacity: .9; }
    to   { transform: scale(1.5); opacity: 0; }
}

.tl-body {
    opacity: .32;
    transform: translateY(8px);
    transition: opacity .8s ease, transform .8s ease;
}

.tl-item.on .tl-body {
    opacity: 1;
    transform: none;
}

.tl-body time {
    font-family: var(--serif);
    font-size: .95rem;
    letter-spacing: .08em;
    color: var(--accent);
}

.tl-body p {
    margin-top: .35rem;
    font-size: clamp(.9rem, 1.6vw, 1rem);
    color: var(--text);
}

/* ================================================================
   ④ 我在做的东西 / ⑥ 找我的地方
   同一套玻璃卡片：作品用 .work，入口用 .door
   ================================================================ */
.doors,
.works {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 3vw, 1.8rem);
    max-width: 900px;
}

.door,
.work {
    position: relative;
    display: block;
    padding: clamp(1.7rem, 4vw, 2.5rem);
    border: 1px solid var(--glass-line);
    border-radius: 1.1rem;
    background: var(--bg-card);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    box-shadow: var(--glass-shadow);
    color: inherit;
    text-decoration: none;
    transition: transform .6s var(--ease), border-color .6s var(--ease),
                background .6s var(--ease), box-shadow .6s var(--ease);
}

/* 卡片是奇数张时，最后一张单独占一行，居中放——别歪在左边 */
.works > .work:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .9rem);
}

.door h3,
.work h3 {
    font-family: var(--font-display);
    margin: .85rem 0 .7rem;
    font-size: clamp(1.1rem, 2.3vw, 1.35rem);
    font-weight: 400;
    letter-spacing: .1em;
}

.door p,
.work p {
    font-size: .92rem;
    line-height: 1.85;
    color: var(--text-dim);
}

.door-tag,
.work-tag {
    font-size: .68rem;
    letter-spacing: .26em;
    color: var(--text-faint);
}

.door-open .door-tag,
.work-link .work-tag { color: var(--accent); }

.door-open:hover,
.work-link:hover {
    transform: translateY(-5px);
    border-color: var(--accent-soft);
    background: rgba(155, 180, 218, .13);
    box-shadow: 0 18px 52px rgba(3, 8, 20, .46);
}

.door-go,
.work-go {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: .86rem;
    letter-spacing: .12em;
    color: var(--accent);
}

.door-shut { opacity: .78; }

/* 关着的那扇门：门缝下透出一条暖光，别让卡片空着下半截 */
.door-shut::after {
    content: '';
    position: absolute;
    left: 9%;
    right: 9%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 206, 140, 0), rgba(255, 214, 152, .70), rgba(255, 206, 140, 0));
    box-shadow: 0 0 17px 3px rgba(255, 190, 120, .17);
    pointer-events: none;
}

.lamp {
    display: block;
    margin-top: 2.1rem;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: radial-gradient(circle,
        #ffe2b6 0%,
        rgba(255, 208, 145, .58) 30%,
        rgba(255, 192, 122, .20) 54%,
        rgba(255, 190, 120, 0) 74%);
    box-shadow: 0 0 26px rgba(255, 196, 120, .26);
    animation: lampBreath 4.2s ease-in-out infinite;
}

@keyframes lampBreath {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}

/* ================================================================
   ⑥ 页脚
   ================================================================ */
.foot {
    padding: clamp(5rem, 12vh, 9rem) 1.5rem calc(clamp(4.5rem, 10vh, 7rem) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-soft);
    text-align: center;
}

.foot-whisper {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.1vw, 1.22rem);
    letter-spacing: .18em;
    padding-left: .18em;
    color: var(--text);
    text-shadow: var(--hglow);
}

.foot-copy {
    margin-top: 2.8rem;
    font-size: .72rem;
    letter-spacing: .18em;
    color: var(--text-faint);
}

/* ================================================================
   窄屏：两栏改成一栏
   ================================================================ */
@media (max-width: 860px) {
    .block { grid-template-columns: 1fr; gap: 1.4rem; }
    .block-title { margin-bottom: .6rem; }
}

/* ================================================================
   小屏 / 触摸
   ================================================================ */
@media (max-width: 768px), (pointer: coarse) {
    .hero { height: 150vh; }
    .doors,
    .works { grid-template-columns: 1fr; }
    .works > .work:last-child:nth-child(odd) { width: auto; }
    .card { max-width: none; }
    /* 手机上不做整屏霜化（太吃性能），只留一层薄纱。
       !important 是为了挡住 JS 写进来的内联 backdrop-filter */
    .mist {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(11, 17, 33, .55);
    }
    /* 颗粒层和星云漂移在手机上关掉，省电也省性能 */
    .grain { display: none; }
    .nebula { animation: none; }
    .tl { padding-left: 1.9rem; }
    .tl-dot { left: calc(-1.9rem + 1px); }
    .card, .door { backdrop-filter: none; -webkit-backdrop-filter: none; }

    /* 玻璃层的模糊很吃手机性能，卡片只留底色和描边 */
    .work, .door, .card { box-shadow: 0 6px 24px rgba(3, 8, 20, .34); }

    /* 小字稍微放大一点，手机上更好读 */
    .work-tag, .door-tag { font-size: .74rem; }
    .work p, .door p { font-size: .96rem; }
    .tl-body p { font-size: .96rem; }
}

/* ================================================================
   触摸设备：把星点路标的"可点面积"做大
   6px 的小圆点在手机上根本戳不准，改成 36px 的透明按钮，
   圆点用 ::before 画出来，视觉上不变、手指好点
   ================================================================ */
@media (pointer: coarse) {
    .rail {
        gap: 0;
        padding: 3px 10px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    /* 触摸没有"悬停"，名字标签不出现 */
    .rail-dot::after { display: none; }
    .rail-dot {
        width: 36px;
        height: 36px;
        border: 0;
        background: transparent;
    }
    .rail-dot::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 9px;
        height: 9px;
        margin: -4.5px 0 0 -4.5px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 50%;
        transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
    }
    .rail-dot.past::before {
        background: rgba(127, 178, 224, .30);
        border-color: rgba(127, 178, 224, .45);
    }
    .rail-dot.on::before {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 12px var(--accent-soft);
    }
}

/* 触摸设备没有"悬停"，把 hover 效果收掉，免得点完一直卡着 */
@media (hover: none) {
    .work-link:hover, .door-open:hover {
        transform: none;
        background: var(--bg-card);
        border-color: var(--glass-line);
        box-shadow: var(--glass-shadow);
    }
}

/* ================================================================
   减少动效偏好
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .split .ch, .tl-body {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .tl-spark, .lamp, .tl-item.on .tl-dot::after { animation: none !important; }
}