:root {
    --nav-bg-color: rgba(240, 245, 250, 0); /* 完全透明的初始状态 */
    --nav-text-color: rgba(226, 232, 240, 0); /* 初始文字完全透明 */
    --nav-icon-color: rgba(160, 174, 192, 0); /* 初始图标完全透明 */
    --nav-shadow-color: rgba(0, 0, 0, 0); /* 初始阴影完全透明 */
    --nav-blur-intensity: 0px;
    
    /* 添加透明度控制变量 */
    --nav-overall-opacity: 0; /* 整体透明度控制 */
    --nav-padding-vertical: 8px; /* Reduced padding */
    --nav-padding-horizontal: 8px; /* Reduced padding */
    --nav-item-gap: 6px; /* Reduced gap */
    --nav-text-opacity: 0;
    --nav-text-width: 0px;
    --nav-text-margin-left: 0px;
    --nav-item-hover-bg: rgba(255, 255, 255, 0.08); /* Slightly less opaque hover */
    --nav-transition-duration: 0.35s; /* Smoother transitions */
    --nav-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother easing */

    /* Theme-specific colors - will be updated by JS */
    --theme-nav-bg-active: linear-gradient(135deg, rgba(50, 60, 70, 0.8), rgba(30, 40, 50, 0.9));
    --theme-nav-text-active: #F7FAFC;
    --theme-nav-icon-active: #CBD5E0;
    --theme-nav-shadow-active: rgba(0, 0, 0, 0.15); /* Softer shadow */
    --theme-nav-blur-active: 6px; /* Slightly less blur */
    --theme-nav-border-active: rgba(255,255,255,0.08); /* Softer border */

    --nav-accent-self: #9F7AEA; /* Adjusted Purple */
    --nav-accent-blog: #48BB78; /* Adjusted Green */
    --nav-accent-web: #F56565;  /* Adjusted Red */
}

#main-navigation {
    position: fixed;
    left: 40px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: var(--nav-item-gap);
    z-index: 1000;
    border-radius: 14px; /* Slightly smaller radius */
    padding: var(--nav-padding-vertical) var(--nav-padding-horizontal);
    background: var(--nav-bg-color);
    box-shadow: 0 3px 10px var(--nav-shadow-color); /* Softer shadow */
    -webkit-backdrop-filter: blur(var(--nav-blur-intensity));
    backdrop-filter: blur(var(--nav-blur-intensity));
    border: 1px solid transparent;
    opacity: var(--nav-overall-opacity); /* 整体透明度控制 */
    transition: background var(--nav-transition-duration) var(--nav-timing-function),
                box-shadow var(--nav-transition-duration) var(--nav-timing-function),
                backdrop-filter var(--nav-transition-duration) var(--nav-timing-function),
                padding var(--nav-transition-duration) var(--nav-timing-function),
                gap var(--nav-transition-duration) var(--nav-timing-function),
                border-color var(--nav-transition-duration) var(--nav-timing-function),
                opacity var(--nav-transition-duration) var(--nav-timing-function); /* 添加透明度过渡 */
}

#main-navigation a {
    text-decoration: none;
    color: var(--nav-icon-color);
    display: flex;
    align-items: center;
    padding: 7px; /* Slightly smaller padding */
    border-radius: 10px; /* Slightly smaller radius */
    transition: background-color var(--nav-transition-duration) ease-out, /* Faster feedback on hover */
                color var(--nav-transition-duration) ease-out,
                transform 0.25s ease-out; /* Snappier transform */
    background: transparent;
    will-change: transform, background-color, color; /* Optimize for animations */
}

#main-navigation a .nav-text {
    opacity: var(--nav-text-opacity);
    width: var(--nav-text-width);
    overflow: hidden;
    white-space: nowrap;
    margin-left: var(--nav-text-margin-left);
    font-size: 13.5px; /* Slightly smaller font */
    font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--nav-text-color);
    transition: opacity var(--nav-transition-duration) var(--nav-timing-function) 0.05s, /* Delay text appearance slightly */
                width var(--nav-transition-duration) var(--nav-timing-function) 0.05s,
                margin-left var(--nav-transition-duration) var(--nav-timing-function) 0.05s,
                color var(--nav-transition-duration) var(--nav-timing-function);
    will-change: opacity, width, margin-left; /* Optimize for animations */
}

#main-navigation a svg {
    flex-shrink: 0;
    stroke: var(--nav-icon-color);
    transition: stroke var(--nav-transition-duration) ease-out;
    will-change: stroke; /* Optimize for animations */
}

/* Hover effects when expanded */
#main-navigation.proximity-active a:hover {
    background-color: var(--nav-item-hover-bg);
    transform: translateX(3px) scale(1.02); /* Subtle scale and shift */
}

#main-navigation.proximity-active a[href*="self"]:hover,
#main-navigation.proximity-active a[href*="self"]:hover .nav-text {
    color: var(--nav-accent-self);
}
#main-navigation.proximity-active a[href*="self"]:hover svg {
    stroke: var(--nav-accent-self);
}

#main-navigation.proximity-active a[href*="blog"]:hover,
#main-navigation.proximity-active a[href*="blog"]:hover .nav-text {
    color: var(--nav-accent-blog);
}
#main-navigation.proximity-active a[href*="blog"]:hover svg {
    stroke: var(--nav-accent-blog);
}

#main-navigation.proximity-active a[href*="web"]:hover,
#main-navigation.proximity-active a[href*="web"]:hover .nav-text {
    color: var(--nav-accent-web);
}
#main-navigation.proximity-active a[href*="web"]:hover svg {
    stroke: var(--nav-accent-web);
}

/* --- START OF FILE css/home.css --- */
:root {
    /* Color variables remain the same */
    --zhu-red: #c02c38; --qing-blue: #3a5169; --cui-green: #1c7349;
    --mi-yellow: #f9d367; --yan-purple: #d3a0d3; --ju-orange: #f86b1d;
    --cang-cyan: #aebeb4; --mo-black: #161823; --rice-white: #f8f4e9;
    --biluochun: #d4c9ab; --zitan: #6a4c3d; --yuebai: #e5e0dc;
    --youlan: #40aad1; --canghuang: #bea672; --xiangyabai: #fffbec;
    --yanshi: #cca583;
    --zishi-color-val: #8e2f1c; --choushi-color-val: #7e435b; --yinshi-color-val: #6e3f34;
    --maoshi-color-val: #d4343f; --chenshi-color-val: #289c66; --sishi-color-val: #b25d25;
    --wushi-color-val: #bf242a; --weishi-color-val: #a3765d; --shenshi-color-val: #a4b1ca;
    --youshi-color-val: #f05654; --xushi-color-val: #9d5b45; --haishi-color-val: #7a5240;
    
    --current-shichen-color: var(--zishi-color-val);
    --current-shichen-color-rgb: 142,47,28; /* Default for zishi */
    --prev-shichen-color: var(--haishi-color-val);
    
    --trail-color: var(--current-shichen-color);
    --prev-trail-color: var(--prev-shichen-color);
    
    --dawn-color: #e8d3c7; --morning-color: #a8c9e6; --noon-color: #e5e0ba;
    --afternoon-color: #e9c9a5; --dusk-color: #d6a692; --evening-color: #b6afc5;
    --night-color: #2b4465;
    --ink-spread-speed: 0.5s; --ink-transform-speed: 0.3s;
    
    /* Theme-adaptive colors */
    --current-bg-color: var(--rice-white);
    --current-bg-color-rgb: 248,244,233; /* Default for rice-white */
    --current-text-color: var(--mo-black);
    --current-text-color-rgb: 22,24,35; /* Default for mo-black */
    --current-accent-color: var(--qing-blue);
    --current-accent-color-rgb: 58,81,105; /* Default for qing-blue */
    --current-shadow-color: rgba(0,0,0,0.1);
    --current-shadow-color-rgb: 0,0,0;
}

* { 
    margin: 0;    padding: 0; 
    box-sizing: border-box; 
    touch-action: manipulation;    /* 防止意外缩放 */
    /* 全局隐藏鼠标指针 */
    cursor: none !important;
}

html {
    /* 防止页面缩放的根级设置 */
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    font-family: 'Noto Serif SC', 'Ma Shan Zheng', cursive, 'Arial', sans-serif;
    background-color: var(--current-bg-color); 
    color: var(--current-text-color);
    /* 修复页面空白问题，调整布局属性 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: block;    transition: background-color 6s cubic-bezier(0.23, 1, 0.32, 1), 
                color 6s cubic-bezier(0.23, 1, 0.32, 1),
                backdrop-filter 4s ease;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none;
    /* 防止触摸相关问题 */
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    /* 添加微妙的纹理感 */
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(var(--current-shichen-color-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--current-shichen-color-rgb), 0.02) 0%, transparent 50%);
    background-attachment: fixed;
}

/* 移除右侧组件的文字选择功能，统一使用全局user-select: none */
.site-footer p {
    -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

#app {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#three-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }

.page-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; }
.welcome-section { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; position: relative; }

#artistic-animation-canvas { width: 60vmin; height: 60vmin; max-width: 500px; max-height: 500px; border-radius: 50%; opacity: 0; animation: fadeInAnimation 2s ease-out 1s forwards; }
@keyframes fadeInAnimation { from { opacity: 0; transform: scale(0.8); } to { opacity: 0.7; transform: scale(1); } }

.welcome-container { 
    text-align: center; 
    z-index: 100; 
    position: fixed; 
    right: -450px; 
    top: 50%; 
    transform: translateY(-50%); 
    padding: 2.5rem; 
    width: auto; 
    min-width: 350px; 
    max-width: 500px; 
    background-color: rgba(var(--current-bg-color-rgb), 0.45); 
    -webkit-backdrop-filter: blur(12px); 
    backdrop-filter: blur(12px); 
    border-radius: 18px; 
    box-shadow: 0 12px 35px var(--current-shadow-color); 
    transition: right 0.9s cubic-bezier(0.25, 0.8, 0.25, 1), 
                opacity 0.9s ease, 
                background-color 3s ease; 
    opacity: 0; 
}
.welcome-container.visible { right: 40px; opacity: 1; }

.welcome-container .welcome-text {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 3rem; 
    margin-bottom: 0.8rem;
    position: relative;
    animation: ink-float 4s ease-in-out infinite;
    text-shadow: 1px 1px 3px var(--current-shadow-color);
    background: linear-gradient(135deg, var(--current-text-color), var(--current-accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-container .subtitle {
    font-family: 'Noto Serif SC', serif;
    font-size: 1rem;
    line-height: 1.6;
    position: relative;
    background: linear-gradient(135deg, var(--current-text-color), var(--current-accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.85;
}

.global-navigation { 
    position: fixed; 
    top: 30px; 
    left: 50%; 
    transform: translateX(-50%) translateY(-10px); 
    z-index: 1001; 
    padding: 12px 25px; 
    background-color: rgba(var(--current-bg-color-rgb), 0.3); 
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px); 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(var(--current-shadow-color-rgb),0.05); 
    opacity: 0.1; 
    transition: opacity 0.7s ease, 
                transform 0.5s ease, 
                background-color 0.5s ease, 
                backdrop-filter 0.5s ease, 
                box-shadow 0.5s ease; 
}
.global-navigation.active-ui { 
    opacity: 0.85; 
    transform: translateX(-50%) translateY(0); 
    background-color: rgba(var(--current-bg-color-rgb), 0.55); 
    -webkit-backdrop-filter: blur(10px); 
    backdrop-filter: blur(10px); 
    box-shadow: 0 6px 20px var(--current-shadow-color); 
}
.global-navigation ul { list-style: none; padding: 0; display: flex; gap: 25px; } 
.global-navigation li a { font-family: 'Noto Serif SC', serif; font-size: 1.15rem; color: var(--current-text-color); text-decoration: none; padding: 10px 18px; border-radius: 8px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; opacity: 0.85; }
.global-navigation li a:hover, .global-navigation li a.active { 
    background-color: rgba(var(--current-text-color-rgb), 0.06); 
    color: var(--current-accent-color); 
    opacity: 1; 
    transform: translateY(-2px); 
}

.time-indicator { 
    position: fixed; 
    top: 30px; 
    right: 30px; 
    font-family: 'Noto Serif SC', serif; 
    font-size: 1rem; 
    padding: 10px 15px; 
    background-color: rgba(var(--current-bg-color-rgb), 0.3); 
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px); 
    border-radius: 8px; 
    box-shadow: 0 3px 12px rgba(var(--current-shadow-color-rgb),0.05); 
    z-index: 1000; 
    opacity: 0.1; 
    transform: translateY(-5px) translateX(5px); 
    transition: opacity 0.7s ease, 
                transform 0.5s ease, 
                background-color 0.5s ease, 
                backdrop-filter 0.5s ease, 
                box-shadow 0.5s ease; 
    text-align: right; 
    line-height: 1.4; 
}

.time-indicator.active-ui { 
    opacity: 0.8; 
    transform: translateY(0) translateX(0); 
    background-color: rgba(var(--current-bg-color-rgb), 0.65); 
    -webkit-backdrop-filter: blur(8px); 
    backdrop-filter: blur(8px); 
    box-shadow: 0 5px 15px var(--current-shadow-color); 
}
.time-indicator:hover { opacity: 1 !important; transform: translateY(-3px) translateX(0) !important; box-shadow: 0 6px 18px var(--current-shadow-color); }
.shichen-name { font-family: 'Ma Shan Zheng', cursive; font-size: 1.4em; display: block; margin-bottom: 3px; }
.theme-name { font-size: 0.85em; opacity: 0.8; display: block; }

.left-word-scroll-container {
    position: fixed;
    top: 30px; 
    left: 30px; 
    width: 80px; 
    height: calc(100vh - 60px); 
    z-index: 1000;
    pointer-events: none; 
}
.left-scroll-content {
    writing-mode: vertical-rl; 
    text-orientation: mixed;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 2.5rem; 
    line-height: 1.4; 
    color: var(--current-text-color);
    position: absolute; 
    top: 20px; 
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.left-scroll-content .scroll-char {
    display: inline-block; 
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.3s ease, color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; 
    text-shadow: 0 0 8px rgba(var(--current-shadow-color-rgb),0.3); 
    /* 移除cursor: pointer，使用全局cursor: none */
    border-radius: 8px;
    padding: 4px 8px;
    position: relative;
    pointer-events: auto;
    min-width: 20px;
    min-height: 20px;
}

.left-scroll-content .scroll-char.char-highlighted {
    opacity: 1 !important;
    color: var(--current-accent-color) !important;
    transition: opacity 0.2s ease, color 0.2s ease !important;
}

.left-scroll-content .scroll-char.char-temp-visible {
    opacity: 0.6 !important;
}

.left-scroll-content .scroll-char.char-fading {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 2s ease, transform 2s ease, color 2s ease !important;
}

.bottom-scroll-banner {
    position: fixed;
    bottom: -250px; 
    left: 0; 
    width: 100%; 
    min-height: 110px; 
    z-index: 999; 
    transition: bottom 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0; 
    color: var(--current-text-color);
    background: linear-gradient(135deg, 
        rgba(var(--current-bg-color-rgb), 0.25), 
        rgba(var(--current-shichen-color-rgb), 0.08),
        rgba(var(--current-bg-color-rgb), 0.35), 
        rgba(var(--current-shichen-color-rgb), 0.05),
        rgba(var(--current-bg-color-rgb), 0.25)
    );
    background-size: 300% 300%;
    animation: organicGradientFlow 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    -webkit-backdrop-filter: blur(20px) saturate(120%) brightness(1.05); 
    backdrop-filter: blur(20px) saturate(120%) brightness(1.05); 
    box-shadow: 0 -8px 32px rgba(var(--current-shadow-color-rgb), 0.12),
                0 -2px 8px rgba(var(--current-shichen-color-rgb), 0.08); 
    border-top: 1px solid rgba(var(--current-text-color-rgb), 0.05); 
    /* 添加微妙的呼吸效果 */
    transform: translateY(0) scale(1);
}
@keyframes organicGradientFlow {
    0% { 
        background-position: 0% 50%; 
        transform: translateY(0) scale(1);
    }
    25% { 
        background-position: 100% 25%; 
        transform: translateY(-1px) scale(1.002);
    }
    50% { 
        background-position: 50% 100%; 
        transform: translateY(0) scale(1);
    }
    75% { 
        background-position: 25% 0%; 
        transform: translateY(1px) scale(0.998);
    }
    100% { 
        background-position: 0% 50%; 
        transform: translateY(0) scale(1);
    }
}

@keyframes subtleGradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bottom-scroll-banner.visible {
    bottom: 0; 
}
.link-icons-container { 
    width: 80vw;
    max-width: 900px;
    display: flex;
    justify-content: center;
}
.link-icons-list {
    list-style: none; padding: 0; margin: 0; display: flex;
    gap: 35px; 
    flex-wrap: wrap; 
    justify-content: center;
}
.link-icons-list li {
     opacity: 0; 
     transform: translateY(30px); 
}
.link-icons-list li a {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; color: var(--current-text-color);
    padding: 15px 20px; border-radius: 12px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                color 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                filter 0.4s ease,
                box-shadow 0.4s ease; 
    min-width: 80px; text-align: center; position: relative;
    /* 添加微妙的初始状态 */
    filter: brightness(1) saturate(1);
    will-change: transform, filter;
}

.link-icons-list li a::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 16px; 
    background: linear-gradient(135deg, 
        rgba(var(--current-accent-color-rgb), 0.12),
        rgba(var(--current-shichen-color-rgb), 0.08),
        rgba(var(--current-accent-color-rgb), 0.06)
    );
    opacity: 0;
    transform: scale(0.85) rotate(-2deg);
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.4s ease;
    z-index: 0; 
    pointer-events: none;
    filter: blur(0.5px);
}
.link-icons-list li a:hover::before {
    opacity: 1;
    transform: scale(1.05) rotate(0deg);
    filter: blur(0px);
}
.link-icons-list li a:hover {
    transform: translateY(-6px) scale(1.05) rotate(1deg); 
    filter: brightness(1.1) saturate(1.2);
    box-shadow: 0 8px 25px rgba(var(--current-shichen-color-rgb), 0.15),
                0 3px 10px rgba(var(--current-accent-color-rgb), 0.1);
}

.link-icons-list li a i, 
.link-icons-list li a span {
    font-size: 2.5rem; margin-bottom: 10px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                filter 0.4s ease,
                text-shadow 0.3s ease;
    position: relative; z-index: 1; 
    will-change: transform, filter;
}
 .link-icons-list li a span { 
    font-size: 0.85rem; font-family: 'Noto Serif SC', serif;
    transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.4s ease,
                text-shadow 0.3s ease;
    transform: translateY(0);
}

.link-icons-list li a:hover i {
    transform: translateY(-3px) scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(var(--current-shichen-color-rgb), 0.2));
    text-shadow: 0 2px 8px rgba(var(--current-accent-color-rgb), 0.3);
}

.link-icons-list li a:hover span {
    transform: translateY(-2px);
    text-shadow: 0 1px 4px rgba(var(--current-shichen-color-rgb), 0.2);
}


.link-icons-list li a.github-link:hover { 
    color: var(--current-accent-color); 
}
.link-icons-list li a.github-link:hover i { 
    animation: bounceRotate 2s ease-in-out infinite alternate;
    filter: drop-shadow(0 6px 12px rgba(var(--current-shichen-color-rgb), 0.25));
}

.link-icons-list li a.gemini-link:hover { 
    color: var(--current-accent-color); 
}
.link-icons-list li a.gemini-link:hover i { 
    animation: sparkleFloat 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; 
    transform: translateY(-4px);
}
/* 合并并优化链接悬停动画 */
@keyframes bounceRotate {
    0% { transform: scale(1.15) rotateY(12deg) translateY(-4px) rotateZ(-2deg); }
    100% { transform: scale(1.18) rotateY(15deg) translateY(-6px) rotateZ(1deg); }
}

@keyframes sparkleFloat { 
    0%, 100% { 
        transform: scale(1.1) translateY(-4px) rotate(0deg); 
        filter: brightness(1.1) hue-rotate(0deg) drop-shadow(0 4px 8px rgba(var(--current-shichen-color-rgb), 0.2)); 
    } 
    25% { 
        transform: scale(1.2) translateY(-6px) rotate(-3deg); 
        filter: brightness(1.3) hue-rotate(10deg) drop-shadow(0 6px 12px rgba(var(--current-accent-color-rgb), 0.3)); 
    }
    75% { 
        transform: scale(1.15) translateY(-5px) rotate(2deg); 
        filter: brightness(1.2) hue-rotate(-5deg) drop-shadow(0 5px 10px rgba(var(--current-shichen-color-rgb), 0.25)); 
    }
} 

@keyframes thinkBounce {
    0%, 100% { transform: translateY(-6px) rotateZ(8deg) scale(1.12); }
    50% { transform: translateY(-8px) rotateZ(-5deg) scale(1.15); }
}

@keyframes danceMove { 
    0%, 100% { transform: rotate(-3deg) translateX(-1px) translateY(-4px) scale(1.1); } 
    25% { transform: rotate(5deg) translateX(2px) translateY(-6px) scale(1.15); }
    50% { transform: rotate(-2deg) translateX(-1px) translateY(-5px) scale(1.12); }
    75% { transform: rotate(4deg) translateX(1px) translateY(-7px) scale(1.14); }
}

.link-icons-list li a.chatgpt-link:hover { 
    color: var(--current-accent-color); 
}
.link-icons-list li a.chatgpt-link:hover i { 
    animation: thinkBounce 2.5s ease-in-out infinite;
    filter: drop-shadow(0 6px 15px rgba(var(--current-shichen-color-rgb), 0.3));
}

.link-icons-list li a.grok-link:hover { 
    color: var(--current-accent-color); 
}
.link-icons-list li a.grok-link:hover i { 
    animation: danceMove 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; 
    filter: drop-shadow(0 4px 12px rgba(var(--current-shichen-color-rgb), 0.2));
}

.floating-poems { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
    z-index: 5; 
    overflow: hidden; 
}

.floating-poem { 
    position: absolute; 
    font-family: 'Noto Serif SC', serif; 
    font-size: 1.1rem; 
    color: var(--current-text-color); 
    opacity: 0.25; 
    animation: float-poem 25s linear infinite; 
    white-space: nowrap; 
    text-shadow: 0 0 5px rgba(255,255,255,0.5); 
    transition: opacity 0.3s ease, color 3s ease; 
}
.floating-poem.left { left: 0; max-width: 25vw; text-align: left; }
.floating-poem.right { right: 0; max-width: 25vw; text-align: right; }
@keyframes float-poem { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 0.25; } 90% { opacity: 0.25; } 100% { transform: translateY(100vh); opacity: 0; } }
.ink-cursor { display: none; } 
.speed-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 5; background: radial-gradient(ellipse, var(--trail-color) 0%, transparent 70%); opacity: 0; transform-origin: center; mix-blend-mode: overlay; animation: speedRippleEffect 1.8s ease-out forwards; }
@keyframes speedRippleEffect { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 0.25; } 100% { transform: scale(1); opacity: 0; } }
.ink-splash { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--trail-color) 0%, transparent 70%); transform: translate(-50%, -50%) scale(0); pointer-events: none; z-index: 1000; mix-blend-mode: multiply; animation: ink-splash-animation var(--ink-spread-speed) ease-out forwards; }
@keyframes ink-splash-animation { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes ink-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.sky-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 50vh; background: linear-gradient(to bottom, var(--sky-color-top, transparent), transparent); opacity: 0.3; z-index: 1; pointer-events: none; transition: background 3s ease, opacity 3s ease; }

/* Elegant & Dynamic Footer */
.elegant-footer {
    position: fixed;
    bottom: 25px;
    right: 30px;
    z-index: 1000;
    font-family: 'Noto Serif SC', 'LXGW WenKai Screen', serif;
    --ef-text-color: var(--current-text-color);
    --ef-accent-color: var(--current-accent-color);
    --ef-bg-blur: rgba(var(--rgb-bg-color, 50, 50, 50), 0.1);
}

.ef-trigger-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 移除cursor样式，使用全局cursor: none */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(var(--current-shadow-color-rgb), 0.1));
}

.ef-icon-base {
    width: 18px;
    height: 18px;
    stroke: var(--ef-text-color);
    opacity: 0.3;
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
                stroke 0.4s ease,
                filter 0.3s ease;
    filter: drop-shadow(0 1px 2px rgba(var(--current-shadow-color-rgb), 0.1));
}

.elegant-footer:hover .ef-icon-base {
    opacity: 0.9;
    stroke: var(--ef-accent-color);
    filter: drop-shadow(0 2px 6px rgba(var(--current-accent-color-rgb), 0.2));
}

.elegant-footer:hover .ef-trigger-wrapper {
    transform: scale(1.15) rotate(-18deg) translateY(-2px);
    filter: drop-shadow(0 4px 8px rgba(var(--current-shadow-color-rgb), 0.15));
}

.ef-content-wrapper {
    position: absolute;
    bottom: 10px; /* Adjust based on trigger size */
    right: 10px; /* Adjust based on trigger size */
    padding: 12px 18px;
    background: linear-gradient(135deg, 
        rgba(var(--current-bg-color-rgb), 0.85),
        rgba(var(--current-shichen-color-rgb), 0.05),
        rgba(var(--current-bg-color-rgb), 0.9)
    );    -webkit-backdrop-filter: blur(15px) saturate(130%) brightness(1.05);
    backdrop-filter: blur(15px) saturate(130%) brightness(1.05);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(var(--current-shadow-color-rgb), 0.15),
                0 2px 8px rgba(var(--current-shichen-color-rgb), 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(var(--current-text-color-rgb), 0.08);
    opacity: 0;
    transform: translateY(25px) scale(0.9) rotate(-2deg);
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, 
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
                filter 0.3s ease;
    text-align: right;
    min-width: 180px; /* Ensure enough space */
    filter: drop-shadow(0 4px 12px rgba(var(--current-shadow-color-rgb), 0.1));
}

.elegant-footer:hover .ef-content-wrapper,
.elegant-footer.ef-active .ef-content-wrapper {
    opacity: 1;
    transform: translateY(-40px) scale(1.02) rotate(0deg); /* Move above trigger */
    pointer-events: auto;
    filter: drop-shadow(0 6px 20px rgba(var(--current-shadow-color-rgb), 0.2));
}

.elegant-footer.ef-active .ef-content-wrapper {
    pointer-events: auto;
}

/* Signature Block Styles */
.ef-signature-block {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.elegant-footer:hover .ef-signature-block,
.elegant-footer.ef-active .ef-signature-block {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Poetry Line */
.ef-poetry-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    font-family: 'Ma Shan Zheng', cursive;
}

.ef-poetry-text {
    font-size: 0.75rem;
    color: var(--ef-text-color);
    opacity: 0.8;
    letter-spacing: 1px;
    transition: opacity 0.3s ease;
}

.ef-poetry-accent {
    font-size: 0.6rem;
    color: var(--ef-accent-color);
    opacity: 0.6;
    margin: 0 2px;
    transform: scale(1.2);
}

/* Creator Line */
.ef-creator-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    gap: 6px;
}

.ef-creator-link {
    text-decoration: none;
    color: var(--ef-text-color);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.ef-creator-link:hover {
    color: var(--ef-accent-color);
}

.ef-creator-prefix {
    font-size: 0.6rem;
    opacity: 0.5;
    font-style: italic;
    letter-spacing: 0.5px;
}

.ef-creator-name {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Meta Line */
.ef-meta-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.55rem;
    opacity: 0.6;
}

.ef-divider {
    opacity: 0.3;
    font-weight: 300;
}

.ef-current-time {
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    opacity: 0.7;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.ef-theme {
    font-family: 'Noto Serif SC', serif;
    letter-spacing: 1px;
    opacity: 0.7;
}

.ef-github-link {
    color: var(--ef-text-color);
    transition: color 0.3s ease;
}
.ef-github-link:hover {
    color: var(--ef-accent-color);
}
.ef-github-icon {
    font-size: 0.9rem;
    opacity: 0.7;
}
.ef-github-link:hover .ef-github-icon {
    opacity: 1;
    transform: scale(1.1);
}

.ef-year {
    font-size: 0.6rem;
    opacity: 0.5;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .global-navigation { padding: 8px 15px; top: 15px; }
    .global-navigation ul { gap: 15px; }
    .global-navigation li a { font-size: 1rem; padding: 6px 10px; }
    .time-indicator { font-size: 0.9rem; padding: 8px 12px; top: 18px; right: 15px; }
    .welcome-container.visible { right: 5%; width: 90%; max-width: 400px; padding: 2rem;}
    .welcome-container .welcome-text { font-size: 2.5rem; }
    .welcome-container .subtitle { font-size: 0.9rem; }
    .floating-poem { font-size: 0.9rem; }
    .left-word-scroll-container { top: 20px; left: 15px; width: 70px; }
    .left-scroll-content { font-size: 2rem; }
    #artistic-animation-canvas { width: 70vmin; height: 70vmin; }
    .bottom-scroll-banner { min-height: 100px; padding: 15px 0;}
    .link-icons-container { width: 90vw; }
    .link-icons-list { gap: 25px; } 
    .link-icons-list li a i { font-size: 2.2rem; } 
    .link-icons-list li a span { font-size: 0.8rem; } 
    /* .creative-footer, .signature-line, .year-mark are replaced by .elegant-footer styles below */
    .elegant-footer { bottom: 20px; right: 20px; }
    .ef-trigger-wrapper { width: 28px; height: 28px; }
    .ef-icon-base { width: 16px; height: 16px; }
    .ef-content-wrapper { padding: 8px 12px; min-width: 160px; }
    .elegant-footer:hover .ef-content-wrapper { transform: translateY(-30px) scale(1); }
    .ef-poetry-text { font-size: 0.7rem; }
    .ef-poetry-accent { font-size: 0.55rem; }
    .ef-creator-prefix { font-size: 0.55rem; }
    .ef-creator-name { font-size: 0.7rem; }
    .ef-github-icon { font-size: 0.75rem; }
    .ef-current-time { font-size: 0.5rem; }
    .ef-meta-line { font-size: 0.5rem; }
}
@media (max-width: 480px) {
    .global-navigation { padding: 6px 10px; top: 10px; } /* New rule, as per replace intent */
    .global-navigation ul { gap: 10px; }
    .global-navigation li a { font-size: 0.9rem; padding: 4px 8px; } /* Modified padding */
    .time-indicator { font-size: 0.8rem; padding: 6px 10px; top: 12px; right: 10px; } /* Modified: top/right added */
    .welcome-container.visible { padding: 1.5rem; }
    .welcome-container .welcome-text { font-size: 2.2rem; }
    .welcome-container .subtitle { font-size: 0.85rem; }
    .left-word-scroll-container { top: 15px; left: 10px; width: 60px; }
    .left-scroll-content { font-size: 1.8rem; }
    #artistic-animation-canvas { width: 80vmin; height: 80vmin; }
    .bottom-scroll-banner { min-height: 90px; padding: 10px 0;}
    .link-icons-container { width: 95vw; }
    .link-icons-list { gap: 20px; } 
    .link-icons-list li a { padding: 12px 15px; min-width: 70px; } 
    .link-icons-list li a i { font-size: 2rem; } 
    .link-icons-list li a span { font-size: 0.75rem; } 
    /* .site-footer is replaced by .elegant-footer styles below */
    .elegant-footer { bottom: 15px; right: 15px; }
    .ef-trigger-wrapper { width: 24px; height: 24px; }
    .ef-icon-base { width: 14px; height: 14px; }
    .ef-content-wrapper { padding: 6px 10px; min-width: 140px; }
    .elegant-footer:hover .ef-content-wrapper { transform: translateY(-25px) scale(1); }
    .ef-poetry-text { font-size: 0.65rem; }
    .ef-poetry-accent { font-size: 0.5rem; }
    .ef-creator-prefix { font-size: 0.5rem; }
    .ef-creator-name { font-size: 0.65rem; }
    .ef-github-icon { font-size: 0.7rem; }
    .ef-current-time { font-size: 0.45rem; }
    .ef-meta-line { font-size: 0.45rem; }
}

/* 简化鼠标轨迹相关元素 */
.mouse-trail, 
.sharp-trail {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    opacity: 0.95;
    mix-blend-mode: hard-light;
    animation: trailFade 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    box-shadow: 0 0 10px var(--trail-color), 0 0 5px rgba(255,255,255,0.8);
    filter: saturate(1.5) contrast(1.2);
}

.mouse-trail {
    width: 3px;
    height: 3px;
    background: linear-gradient(90deg, var(--trail-color) 0%, rgba(255, 255, 255, 0.6) 100%);
}

.sharp-trail {
    width: 10px;
    height: 1.5px;
    background: linear-gradient(90deg, var(--trail-color) 0%, rgba(255,255,255,0.7) 100%);
    border-radius: 0;
    animation: sharpTrailFade 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    box-shadow: 0 0 15px var(--trail-color), 0 0 6px #fff;
    filter: saturate(2) contrast(1.8);
}
/* 简化轨迹动画 */
@keyframes trailFade { 
    0% { opacity: 0.95; width: 3px; height: 3px; filter: saturate(1.5) contrast(1.2) blur(0); } 
    50% { filter: saturate(1.8) contrast(1.5) blur(1px); } 
    100% { opacity: 0; width: 35px; height: 1.5px; filter: saturate(1.2) contrast(1) blur(2px); } 
}

@keyframes sharpTrailFade { 
    0% { opacity: 0.95; width: 10px; filter: saturate(2) contrast(1.8) blur(0px); } 
    50% { opacity: 0.8; width: 100px; filter: saturate(1.8) contrast(1.5) blur(0.5px); } 
    100% { opacity: 0; width: 150px; filter: saturate(1.5) contrast(1.2) blur(1px); } 
}
.ink-stain { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, var(--trail-color) 0%, transparent 80%); z-index: 998; pointer-events: none; transform: translate(-50%, -50%); filter: blur(1px); mix-blend-mode: multiply; animation: stainFade 3s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes stainFade { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 30% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.ink-droplet { position: absolute; width: 4px; height: 4px; background-color: var(--trail-color); border-radius: 50%; pointer-events: none; z-index: 1000; opacity: 0.9; transform-origin: center; box-shadow: 0 0 4px var(--trail-color); animation: dropletFly 1.2s cubic-bezier(0.36, 0, 0.66, -0.56) forwards; }
@keyframes dropletFly { 0% { transform: translate(0, 0) scale(1); opacity: 0.9; } 80% { opacity: 0.6; } 100% { transform: translate(var(--fly-x), var(--fly-y)) scale(0); opacity: 0; } }
.mouse-particle { position: absolute; width: 3px; height: 3px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; pointer-events: none; z-index: 9999; opacity: 0.9; box-shadow: 0 0 8px var(--trail-color), 0 0 4px rgba(255, 255, 255, 0.8); mix-blend-mode: screen; filter: saturate(1.6) contrast(1.3); animation: particleFade 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; }
@keyframes particleFade { 0% { opacity: 0.9; transform: scale(1) translateY(0); filter: saturate(1.6) contrast(1.3) blur(0); } 100% { opacity: 0; transform: scale(0.5) translateY(-20px); filter: saturate(1.3) contrast(1.1) blur(1px); } }

/* Added for right-click poem drop */
.falling-poem {
    position: absolute;
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif; /* Emphasize artistic font */
    font-size: 1.4rem; 
    color: var(--current-text-color);
    opacity: 0; /* Start invisible */
    white-space: nowrap;
    text-shadow: 1px 1px 3px var(--current-shadow-color);
    pointer-events: none;
    animation: poemFall 5s cubic-bezier(0.25, 0.1, 0.25, 2) forwards; /* Quick scatter */
    z-index: 1001;
    transition: color 4s ease; 
    transform-origin: center center;
}

@keyframes poemFall {
    0% {
        transform: translateY(-25px) translateX(-50%) rotate(-5deg) scale(0.9);
        opacity: 0;
        filter: blur(1px) brightness(0.8);
    }
    15% {
        opacity: 0.8;
        transform: translateY(-8px) translateX(-50%) rotate(-1deg) scale(0.98);
        filter: blur(0.2px) brightness(1);
    }
    30% {
        opacity: 1;
        transform: translateY(0px) translateX(-50%) rotate(0deg) scale(1);
        filter: blur(0px) brightness(1.05);
    }
    45% {
        opacity: 0.95;
        transform: translateY(-5px) translateX(-45%) rotate(2deg) scale(0.98);
        filter: blur(0.1px) brightness(1.02);
    }
    60% {
        opacity: 0.7;
        transform: translateY(-18px) translateX(-25%) rotate(8deg) scale(0.85);
        filter: blur(0.8px) brightness(0.95);
    }
    80% {
        opacity: 0.35;
        transform: translateY(-45px) translateX(5%) rotate(18deg) scale(0.6);
        filter: blur(2px) brightness(0.8);
    }
    100% {
        transform: translateY(-80px) translateX(35%) rotate(35deg) scale(0.3);
        opacity: 0;
        filter: blur(4px) brightness(0.6);
    }
}


/* 简化涟漪元素类 */
.click-ripple, 
.click-ripple-secondary, 
.click-ripple-third { 
    position: absolute; 
    border-radius: 50%; 
    pointer-events: none; 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(0); 
}

.click-ripple { 
    z-index: 1000; 
    background: radial-gradient(circle, var(--trail-color) 0%, transparent 70%); 
    animation: rippleEffect 1.5s cubic-bezier(0.1, 0.5, 0.1, 1) forwards; 
}

.click-ripple-secondary { 
    z-index: 999; 
    background: radial-gradient(circle, var(--trail-color) 10%, transparent 80%); 
    animation: rippleEffectSecondary 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
    animation-delay: 0.15s; 
}

.click-ripple-third { 
    z-index: 998; 
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, var(--trail-color) 40%, transparent 90%); 
    animation: rippleEffectTertiary 2.1s cubic-bezier(0.42, 0, 0.58, 1) forwards; 
    animation-delay: 0.3s; 
}
/* 简化重复的动画关键帧 */
@keyframes rippleEffect { 
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 
    25% { opacity: 0.7; } 
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } 
}

@keyframes rippleEffectSecondary { 
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 
    25% { opacity: 0.5; } 
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } 
}

@keyframes rippleEffectTertiary { 
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 
    30% { opacity: 0.3; } 
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } 
}


/* --- OPTIMIZED INK DIFFUSION STYLES (LEFT CLICK) --- */
/* 简化墨水扩散相关的公共样式 */
.ink-diffusion, 
.ink-diffusion-secondary, 
.ink-diffusion-light {
    position: absolute;
    pointer-events: none;
    z-index: 999;
    mix-blend-mode: multiply;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    animation: inkDiffusionAnim 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.ink-diffusion {
    border-radius: 45% 55% 52% 48% / 48% 43% 57% 52%;
    background: radial-gradient(circle, 
        rgba(var(--current-shichen-color-rgb), 0.55) 5%, 
        rgba(var(--current-shichen-color-rgb), 0.25) 40%, 
        transparent 70%
    );
    filter: blur(2.5px);
}

.ink-diffusion-secondary {
    border-radius: 63% 37% 32% 68% / 44% 56% 44% 56%;
    background: radial-gradient(circle, 
        rgba(var(--current-shichen-color-rgb), 0.35) 10%, 
        rgba(var(--current-shichen-color-rgb), 0.15) 50%, 
        transparent 75%
    );
    filter: blur(3.5px);
    animation-delay: 0.1s;
    animation-duration: 4.8s;
}

.ink-diffusion-light {
    border-radius: 37% 63% 56% 44% / 71% 29% 71% 29%;
    background: radial-gradient(ellipse, 
        rgba(var(--current-shichen-color-rgb), 0.3) 0%, 
        rgba(var(--current-shichen-color-rgb), 0.1) 35%, 
        transparent 65%
    );
    mix-blend-mode: overlay;
    filter: blur(1.5px);
    animation-delay: 0.05s;
    animation-duration: 4s;
}

.ink-diffusion-feather {
    position: absolute;
    pointer-events: none;
    width: 6px !important; /* Keep small */
    height: 6px !important;
    border-radius: 50%;
    background: rgba(var(--current-shichen-color-rgb), 0.45); /* Shichen color based, less intense */
    mix-blend-mode: multiply; 
    opacity: 0;
    transform: translate(-50%, -50%);
    filter: blur(1px); /* Softer feather */
    animation: inkFeatherAnim 3s ease-out forwards; /* Slightly longer travel/fade */
}

@keyframes inkDiffusionAnim {
    0% { 
        transform: translate(-50%, -50%) scale(0) rotate(0deg); 
        opacity: 0; 
        filter: blur(2px) brightness(1.2); 
    }
    5% { 
        transform: translate(-50%, -50%) scale(0.15) rotate(-2deg); 
        opacity: 0.8; 
        filter: blur(1.8px) brightness(1.1); 
    }
    15% { 
        transform: translate(-50%, -50%) scale(0.4) rotate(1deg); 
        opacity: 0.9; 
        filter: blur(2.2px) brightness(1.05); 
    }
    35% { 
        transform: translate(-50%, -50%) scale(0.7) rotate(-1deg); 
        opacity: 0.7; 
        filter: blur(2.8px) brightness(1); 
    }
    60% { 
        transform: translate(-50%, -50%) scale(0.9) rotate(2deg); 
        opacity: 0.4; 
        filter: blur(3.5px) brightness(0.95); 
    }
    85% { 
        transform: translate(-50%, -50%) scale(1.05) rotate(-1deg); 
        opacity: 0.15; 
        filter: blur(4.2px) brightness(0.9); 
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.25) rotate(1deg); 
        opacity: 0; 
        filter: blur(5px) brightness(0.8); 
    }
}

@keyframes inkFeatherAnim { /* Renamed */
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.65; }
    40% { opacity: 0.45; }
    100% { transform: translate(calc(-50% + var(--feather-x)), calc(-50% + var(--feather-y))) scale(1.6); opacity: 0; }
}
/* --- END OPTIMIZED INK DIFFUSION --- */


/* New Message Styles */
.top-message {
    position: fixed;
    top: 30px; 
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 25px; 
    font-size: 1.4rem; 
    font-family: 'STKaiti', 'KaiTi', 'FangSong', serif;
    z-index: 2000;
    text-align: center;
    pointer-events: none; 

    /* 使用中国传统色彩：墨黑色，与米白背景形成最高对比度 */
    color: var(--mo-black);
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.6); 
    opacity: 0;
    animation: fadeInOutTopMessage 3.5s ease-in-out forwards;
}

@keyframes fadeInOutTopMessage {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    20% { opacity: 1; transform: translate(-50%, 0); }
    80% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}
@media (max-width: 768px) {
    .top-message { font-size: 1.2rem; top: 20px; padding: 10px 20px; }
    .falling-poem { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .top-message { font-size: 1rem; top: 15px; padding: 8px 15px; }
    .falling-poem { font-size: 1.1rem; }
}
/* --- END OF FILE css/home.css --- */