/* ============================================================
   landing.css — 个人主页（/）v1「红墨 · 像素画像」
   风格参照 barku.re：视口缩放排版、sticky 首屏幕布滚动、
   渐变大标题、半调像素头像、噪点 + 光晕氛围、像素滚动条
   主题色：红（原站为蓝）
   ============================================================ */

:root {
    --color-bg: #f4f4f4;
    --color-bg-darken: var(--color-bg);
    --color-text: #1c1b1a;
    --color-text-dim: rgba(0, 0, 0, .56);
    --color-text-faint: rgba(0, 0, 0, .3);

    /* 品牌蓝：亮色下用深蓝保证对比度 */
    --hero-title-color: #0057e0;
    --hero-title-gradient: linear-gradient(105deg, #0048c8 0%, #006eff 55%, #0096ff 100%);
    --glow-primary: rgba(0, 96, 255, .1);
    --glow-secondary: rgba(0, 140, 255, .07);

    --hairline: rgba(0, 0, 0, .1);
    --dot-mask-opacity: .55;
    --slider-photo-brightness: 1.05;

    --margin-side: 3.75rem;
    --dot-mask-size: clamp(14px, 1.35vw, 24px);
    --viewport-height: 100svh;
    --content-mask-offset: clamp(13rem, 16vw, 18rem);
    --content-mask-before: linear-gradient(to bottom, #0000 0%, #0000000c 7.75%, #0000001b 11.25%, #00000073 23.55%, #0000008c 26.45%, #000000e4 38.75%, #000000f3 42.25%, #000 50%);
    --content-mask-after: linear-gradient(to bottom, #0000 0%, #0000000c 15.5%, #0000001b 22.5%, #00000073 47.1%, #0000008c 52.9%, #000000e4 77.5%, #000000f3 91.9%, #000 100%);

    color-scheme: light;
}

[data-theme="dark"] {
    --color-bg: #0c0d12;
    --color-text: #eff0f5;
    --color-text-dim: rgba(255, 255, 255, .6);
    --color-text-faint: rgba(255, 255, 255, .28);

    /* 品牌蓝：暗色下提亮 */
    --hero-title-color: #2f8bff;
    --hero-title-gradient: linear-gradient(105deg, #0060ff 0%, #2894ff 55%, #40b2ff 100%);
    --glow-primary: rgba(0, 96, 255, .16);
    --glow-secondary: rgba(0, 140, 255, .09);

    --hairline: rgba(255, 255, 255, .1);
    --dot-mask-opacity: .7;
    --slider-photo-brightness: 1;

    color-scheme: dark;
}

/* ---------- 基础：字号随视口缩放（整个主页排版的核心） ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }

html {
    font-size: 1.25vw;
    scrollbar-width: none;
    -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar { width: 0; height: 0; }
body::-webkit-scrollbar { width: 0; height: 0; }

body {
    background: var(--color-bg-darken);
    color: var(--color-text);
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', Roboto, Arial, sans-serif;
    line-height: 1.5;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    user-select: none;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg, canvas { display: block; vertical-align: middle; }
button { font: inherit; color: inherit; background: none; text-align: inherit; }

/* ---------- 氛围层：噪点纹理 + 品牌色光晕 ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .032;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(54rem 32rem at 16% -8%, var(--glow-primary), transparent 64%),
        radial-gradient(42rem 28rem at 86% 8%, var(--glow-secondary), transparent 62%);
}

/* ---------- 像素滚动条（替代被隐藏的原生滚动条） ---------- */
.pixel-scrollbar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: max(0px, env(safe-area-inset-right));
    z-index: 80;
    width: max(1rem, var(--dot-mask-size));
    pointer-events: none;
    opacity: 0;
    transition: opacity .65s;
}
.pixel-scrollbar.is-visible { opacity: 1; transition-duration: .12s; }
.pixel-scrollbar-thumb {
    position: absolute;
    top: var(--scrollbar-thumb-top, 0px);
    right: .1rem;
    width: .45rem;
    min-width: 6px;
    max-width: 9px;
    height: var(--scrollbar-thumb-height, 72px);
    background: var(--color-text);
}

/* ---------- 首屏：sticky + 幕布滚动 ---------- */
.site-shell { position: relative; }

.first-view {
    position: sticky;
    top: 0;
    height: 100vh;
    height: var(--viewport-height);
    display: flex;
    flex-direction: column;
}

.hero-copy {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    padding: var(--margin-side);
    pointer-events: none;
}

.hero-title {
    width: max-content;
    white-space: nowrap;
    margin-top: -1.5rem;
    margin-left: -.45rem;
    color: var(--hero-title-color);
    font-family: 'LXGW WenKai Screen', 'LXGW WenKai', 'KaiTi', 'STKaiti', serif;
    font-weight: 700;
    font-size: 6.2rem;
    line-height: 1.05;
    letter-spacing: .01em;
    animation: hero-rise .88s cubic-bezier(.22, .61, .36, 1) 60ms both;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title {
        background-image: var(--hero-title-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

.hero-subtitle {
    width: 92%;
    white-space: nowrap;
    margin-top: 1.35rem;
    color: var(--color-text-dim);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.3;
    animation: hero-rise .88s cubic-bezier(.22, .61, .36, 1) .2s both;
}

.hero-intro { display: none; }
.intro-name { font-weight: 700; color: var(--hero-title-color); }

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    animation: hero-media-in 1.05s cubic-bezier(.22, .61, .36, 1) .32s both;
}

@keyframes hero-rise {
    0% { opacity: 0; transform: translateY(2.4rem); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-media-in {
    0% { opacity: 0; transform: translateY(1.6rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 像素画像轮播：抠像 PNG 叠放，切换时交叉淡化 + 上浮 ---------- */
.portrait-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.portrait-stage .hero-slide {
    position: absolute;
    left: 50%;
    bottom: 0;
    height: min(96vw, 68rem, 100vh - 4rem);
    width: auto;
    max-width: none;
    filter: brightness(var(--slider-photo-brightness));
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(2.5rem) scale(calc(var(--slide-scale, 1) * .985));
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.portrait-stage .hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(var(--slide-scale, 1));
}
/* 随机起始图切换时临时禁用过渡，避免首帧闪动 */
.portrait-stage .hero-slide.no-anim { transition: none; }
/* 半调网点（Halftone）屏幕：一层背景色圆点盖在画像上 */
.portrait-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    --dot-cell: calc(var(--dot-mask-size) / 5);
    background-image: radial-gradient(circle, var(--color-bg) calc(var(--dot-cell) * .36), transparent calc(var(--dot-cell) * .36 + .5px));
    background-size: var(--dot-cell) var(--dot-cell);
    opacity: var(--dot-mask-opacity);
}

/* ---------- 第二屏：幕布（滚动时从上往下盖过画像） ---------- */
.content-shell {
    position: relative;
    z-index: 10;
    margin-top: 7.5rem;
    background: var(--color-bg-darken);
    isolation: isolate;
}
.content-shell::before,
.content-shell::after {
    content: "";
    position: absolute;
    left: -1px;
    top: calc(-1 * var(--content-mask-offset));
    width: calc(100% + 2px);
    height: var(--content-mask-offset);
    pointer-events: none;
}
.content-shell::before {
    background: var(--color-bg-darken);
    -webkit-mask-image: var(--content-mask-before);
    mask-image: var(--content-mask-before);
}
.content-shell::after {
    background-image: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%);
    -webkit-mask-image: var(--content-mask-after);
    mask-image: var(--content-mask-after);
}

/* ---------- 大字介绍句 ---------- */
.description-block {
    padding: calc(var(--margin-side) - 1.25rem) var(--margin-side) 0;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.32;
    text-align: justify;
    overflow-wrap: break-word;
}

/* ---------- 跳转链接（巨型图标行） ---------- */
.tag-block {
    padding: 5.25rem var(--margin-side) calc(var(--margin-side) - 1rem);
    min-height: calc(100vh - 26rem);
    min-height: calc(var(--viewport-height) - 26rem);
    font-size: 3.75rem;
    font-weight: 500;
}
.tag-block ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
}
.tag-block li { min-width: 0; }

.tag-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5em;
    margin: 0;
    padding: .16em;
    color: var(--color-text);
    cursor: pointer;
    transition: opacity .22s;
}
.tag-block ul:hover .tag-item:not(:hover) { opacity: .4; }

/* 悬停四角描线边框：四个渐变依次画出四条边 */
.tag-item::after {
    content: "";
    position: absolute;
    inset: -.04em;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(var(--hero-title-color), var(--hero-title-color)) left top / 0 .06em no-repeat,
        linear-gradient(var(--hero-title-color), var(--hero-title-color)) right top / .06em 0 no-repeat,
        linear-gradient(var(--hero-title-color), var(--hero-title-color)) right bottom / 0 .06em no-repeat,
        linear-gradient(var(--hero-title-color), var(--hero-title-color)) left bottom / .06em 0 no-repeat;
}
.tag-item:hover::after,
.tag-item:focus-visible::after {
    opacity: 1;
    animation: draw-tag-frame .32s forwards;
}
@keyframes draw-tag-frame {
    0%   { background-size: 0 .06em, .06em 0, 0 .06em, .06em 0; }
    35%  { background-size: 100% .06em, .06em 0, 0 .06em, .06em 0; }
    55%  { background-size: 100% .06em, .06em 100%, 0 .06em, .06em 0; }
    80%  { background-size: 100% .06em, .06em 100%, 100% .06em, .06em 0; }
    to   { background-size: 100% .06em, .06em 100%, 100% .06em, 100% .06em; }
}

.tag-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    color: var(--color-text);
    transition: color .2s, transform .26s cubic-bezier(.22, .61, .36, 1);
}
.tag-item:hover .tag-icon,
.tag-item:focus-visible .tag-icon {
    color: var(--hero-title-color);
    transform: translateY(-.06em);
}
.tag-icon svg { width: 1em; height: 1em; display: block; }
.tag-icon.is-github svg { transform: scale(.92); }
.tag-item:hover .tag-icon.is-github { transform: scale(.92) translateY(-.06em); }

/* 悬停提示行：黑色动词 + 蓝色主体（如 Write to minthats@qq.com） */
.tag-target {
    min-height: 1.2em;
    margin-top: .72rem;
    color: var(--color-text);
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
}
.tt-accent { color: var(--hero-title-color); }

/* 桌面端只显示图标，文字标签留给悬停提示行与移动端 */
.tag-label { display: none; }

/* ---------- 滚动入场 ---------- */
.reveal {
    opacity: 0;
    transform: translateY(1.75rem);
    transition: opacity .72s, transform .72s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ---------- 微信号弹窗 ---------- */
.wechat-mask {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background: rgba(12, 13, 18, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.wechat-mask.open { display: flex; animation: wc-fade .22s both; }
@keyframes wc-fade { from { opacity: 0; } to { opacity: 1; } }

.wechat-card {
    width: min(30rem, 88vw);
    padding: 2.4rem 2.2rem 2.1rem;
    background: var(--color-bg);
    border: 1px solid var(--hairline);
    border-radius: 1.1rem;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
    text-align: center;
    transform: translateY(0);
    animation: wc-pop .26s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes wc-pop {
    from { opacity: 0; transform: translateY(.9rem) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.wc-ico {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    color: #07c160;
    background: rgba(7, 193, 96, .12);
}
.wc-ico svg { width: 1.7rem; height: 1.7rem; }
.wechat-card h3 { margin-top: 1rem; font-size: 1.35rem; font-weight: 700; }
.wc-id {
    margin-top: .7rem;
    padding: .7rem 1rem;
    font-family: Consolas, Menlo, monospace;
    font-size: 1.15rem;
    letter-spacing: .04em;
    color: var(--hero-title-color);
    background: var(--color-text-faint);
    border-radius: .6rem;
    -webkit-user-select: text;
    user-select: text;
}
.wc-actions {
    display: flex;
    justify-content: center;
    gap: .8rem;
    margin-top: 1.4rem;
}
.wc-btn {
    padding: .6rem 1.3rem;
    border-radius: .6rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, opacity .2s;
}
.wc-btn:hover { transform: translateY(-1px); }
.wc-btn.primary {
    color: #fff;
    background: var(--hero-title-color);
    box-shadow: 0 6px 16px -6px var(--glow-primary);
}
.wc-btn.ghost {
    color: var(--color-text-dim);
    border: 1px solid var(--hairline);
}

/* ---------- 复制成功提示 ---------- */
.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 8vh;
    z-index: 130;
    padding: .65rem 1.2rem;
    color: #fff;
    font-size: .95rem;
    background: var(--hero-title-color);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translate(-50%, .6rem);
    pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.copy-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 响应式 ---------- */
@media (width >= 1440px) {
    html { font-size: 18px; }
}
@media (width <= 1280px), (height <= 900px) {
    :root { --dot-mask-size: 18px; }
}
@media (width <= 1100px), (height <= 780px) {
    :root { --dot-mask-size: 15px; }
}

@media (width <= 767px) {
    :root {
        --margin-side: 1rem;
        --dot-mask-size: 12px;
        --content-mask-offset: 5.5rem;
    }
    html { font-size: 4.25vw; }

    /* 排版与桌面端一致：左上角大标题 + 斜体副标题，介绍句在第二屏 */
    .hero-copy { padding: 1.4rem var(--margin-side) 0; }
    .hero-title { font-size: 3.2rem; margin-top: 0; }
    .hero-subtitle { margin-top: .8rem; font-size: 1.6rem; }

    .content-shell { margin-top: 3rem; z-index: 30; }
    .description-block { font-size: 2.1rem; }

    .tag-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: calc(var(--margin-side) * 2 - .5rem) var(--margin-side);
        min-height: 100vh;
        min-height: var(--viewport-height);
        font-size: 2rem;
    }
    .tag-block ul {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: .85rem;
        width: 100%;
    }
    .tag-target { display: none; }
    .tag-label { display: inline; }
    .tag-item { width: 100%; display: flex; font-size: 1.6rem; }
    .tag-item::after {
        border: .08em solid var(--hero-title-color);
        opacity: 0;
        background: none;
        transform: none;
        transition: opacity .12s;
    }
    .tag-item:hover::after, .tag-item:focus-visible::after { opacity: 1; animation: none; }
    .tag-icon { width: auto; height: auto; }
    .tag-icon svg { width: .9em; height: .9em; }
    .tag-icon.is-github svg { transform: none; }
}

/* ---------- 降低动效 ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-title, .hero-subtitle, .hero-media { animation: none; }
    .reveal { opacity: 1; transition: none; transform: none; }
    .wechat-mask, .wechat-card { animation: none; }
    .portrait-stage .hero-slide { transition: none; transform: translateX(-50%) scale(var(--slide-scale, 1)); }
}