/* 变量定义 */
:root {
    --bg-gradient-start: #f0f4f8;
    --bg-gradient-mid: #e1e8f0;
    --bg-gradient-end: #f0f4f8;
    --shape-color-1: #E0E8EA;
    --shape-color-2: #A6E4D0;
    --text-color: #2C2C2C;
    --particle-color-1: rgba(100, 150, 200, 0.6);
    --particle-color-2: rgba(150, 200, 250, 0.4);

    --anim-duration-entry: 1.2s;
    --anim-duration-subtle: 8s;
    --anim-duration-bg: 15s;
    --easing-curve-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* 带回弹效果的曲线 */
    --easing-curve-smooth: ease-in-out;
}

/* 基础设置 */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-mid), var(--bg-gradient-end));
    background-size: 400% 400%;
    animation: gradientBG var(--anim-duration-bg) var(--easing-curve-smooth) infinite;
    overflow: hidden;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    perspective: 1000px;
    position: relative;
    isolation: isolate;
}

/* 动态粒子效果 - 性能优化 */
.splash-screen::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(2px 2px at 20px 30px, var(--particle-color-1), transparent),
        radial-gradient(1px 1px at 40px 70px, var(--particle-color-2), transparent),
        radial-gradient(1px 1px at 90px 40px, var(--particle-color-1), transparent),
        radial-gradient(2px 2px at 160px 120px, var(--particle-color-2), transparent);
    background-repeat: repeat;
    background-size: 250px 250px;
    animation: sparkle var(--anim-duration-subtle) var(--easing-curve-smooth) infinite;
    opacity: 0; /* 初始不可见 */
    animation-name: sparkle, fadeIn-subtle;
    animation-duration: var(--anim-duration-subtle), 2s;
    animation-timing-function: var(--easing-curve-smooth), var(--easing-curve-smooth);
    animation-delay: 0s, 0.5s;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: forwards;
    z-index: 0;
    will-change: transform, opacity; /* 硬件加速 */
}

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

/* 粒子闪烁动画 - 优化为 transform */
@keyframes sparkle {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-250px, -250px); }
}

/* 背景形状容器 - 性能优化 */
.background-shape {
    position: absolute;
    width: 60vw;
    height: 60vh;
    /* 移除高消耗的 filter 动画, 保留静态模糊效果 */
    filter: blur(30px); 
    opacity: 0;
    /* 使用 transform 进行动画 */
    animation: shape-float var(--anim-duration-subtle) var(--easing-curve-smooth) infinite alternate, fadeIn-subtle 2s var(--easing-curve-smooth) forwards;
    will-change: transform, opacity; /* 硬件加速 */
}

.top-left {
    top: -10vh;
    left: -10vw;
    animation-delay: 0s, 0s;
    z-index: 1;
}

.bottom-right {
    bottom: -10vh;
    right: -10vw;
    animation-delay: 1s, 0s; /* 增加动画延迟，增加层次感 */
    z-index: 1;
}

.background-shape svg {
    width: 100%;
    height: 100%;
}

/* 中心内容容器 */
.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeIn var(--anim-duration-entry) var(--easing-curve-bounce) 0.5s forwards;
    z-index: 10;
    position: relative;
}

/* Logo容器 */
.logo-container {
    margin-bottom: 10px;
    /* 动画序列调整 */
    animation: scaleIn var(--anim-duration-entry) var(--easing-curve-bounce) 0.5s forwards, 
               float var(--anim-duration-subtle) var(--easing-curve-smooth) 2s infinite;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)); /* 简化阴影 */
    position: relative;
    z-index: 10;
    will-change: transform, opacity; /* 硬件加速 */
}

/* 移除高消耗的 SVG 内部闪烁动画 */
/* .logo-container svg circle, .logo-container svg polygon { animation: none; } */

/* 标题样式 */
h1 {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 600; /* 稍微调细一点 */
    color: var(--text-color);
    font-size: 32px;
    margin: 0;
    letter-spacing: 2px;
    /* 动画序列调整 */
    animation: slideUp var(--anim-duration-entry) var(--easing-curve-bounce) 0.8s forwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 简化阴影 */
    position: relative;
    z-index: 10;
    will-change: transform, opacity; /* 硬件加速 */
}

/* 通用淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn-subtle {
    from { opacity: 0; }
    to { opacity: 0.6; }
}

/* 缩放进入动画 - 优化曲线 */
@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 浮动动画 - 保持不变 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* 上滑动画 - 优化曲线 */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 背景形状浮动动画 - 性能优化 */
@keyframes shape-float {
    from { transform: translateY(0px) scale(1); }
    to { transform: translateY(20px) scale(1.05); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .background-shape { width: 80vw; height: 80vh; }
    .top-left { top: -15vh; left: -15vw; }
    .bottom-right { bottom: -15vh; right: -15vw; }
    h1 { font-size: 24px; }
}

@media (max-width: 480px) {
    .background-shape { width: 100vw; height: 100vh; }
    .top-left { top: -20vh; left: -20vw; }
    .bottom-right { bottom: -20vh; right: -20vw; }
    h1 { font-size: 20px; }
}

/* 页面退出动画 */
body.exit .center-content {
    animation: fadeOut var(--anim-duration-entry) var(--easing-curve-smooth) forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}